微信小程序登錄授權流程

小程序的登錄授權是開發小程序中必不可少的一部分 今天整理了一下小程序的登錄授權的流程

首先是官方給的小程序的登錄授權流程圖

下面是主要的部分哦~

1.項目路徑結構

2.登錄和未登錄的不同狀態 my.wxml頁面

通過判斷是否有token值來控制切換

 <view class="user_header_container">
<!-- -----------登錄成功顯示的---------- -->
<view class="user_header" wx:if="{{userStatus}}">
	<view class="user_picture">
		<image src="{{userinfo.avatarUrl}}"></image>
	</view>
	<view class="user_name_container">
		<view class="user_name">{{userinfo.nickName}}</view>
	</view>
</view>
<!-- -----------未登錄顯示的---------- -->
<view class="user_header" wx:else>
	<view class="user_picture">
		<image src="/pages/image/noloading.png"></image>
	</view>
	<view class="user_name_container">
		<button open-type='getUserInfo' bindgetuserinfo="getuserinfo">未登錄</button>
	</view>
</view>

3.判斷是否登錄

  data: {
      // 用戶信息
      userinfo:{},
      userStatus:'',
      loadingView:false
    },
  //頁面初始化時需要判斷
  onLoad: function (options) {
      if(wx.getStorageSync('token')){
        wx.getUserInfo({
          success: res => {
            console.log("信息", res)
            this.setData({
              userinfo:res.userInfo,
              userStatus:wx.getStorageSync('token')
            })
            // console.log(this.data.userStatus)
          }
        })
       }
    },
  //每次進入我的頁面都要判斷一下
   /**
     * 生命周期函數--監聽頁面顯示
     */
    onShow: function () {
      if(wx.getStorageSync('token')){
        wx.getUserInfo({
          success: res => {
            // console.log("信息", res)
            this.setData({
              userinfo:res.userInfo,
              userStatus:wx.getStorageSync('token')
            })
            // console.log(this.data.userinfo)
          }
        })
    }else{
         this.setData({
          userStatus:''
         })
      }
 },

接下來就是重點了 小程序的登錄注冊

4.彈框頁面 .wxml

  <!---------------確認登錄的彈框開始-------------- -->
  <view class="login_dialog" wx:if='{{isShow}}'>
    <view class="wrapper">
       <view class="header">
      <view class="header_image">
              <image class="icon" src="{{userinfo.avatarUrl}}"></image> 
      </view>
        <view class="username">{{userinfo.nickName}}</view>
      </view>
     <view class="content">
  <view>請授權小程序登錄</view>
  <view>我們不會公布你的這些信息</view>
  <view>只是為了給你提供更好的服務</view>
</view>
<view class="footer">
  <button 
type="primary" 
open-type='getUserInfo'  
bindgetuserinfo="getuserinfo" 
>允許</button>
  <button bindtap="nologin">暫不登錄</button>
</view>

5.登錄注冊的核心

 methods: {
      getuserinfo(e) {
        this.data.encryptedData = e.detail.encryptedData
        this.data.iv = e.detail.iv
        // 調用函數
        this.logintap()
        this.setData({
          isShow:false
        })
      },
      // =======驗證登錄=======
      logintap() {
        wx.login({
          complete: (res) => {
            getUserMsg(res.code).then((res)=> {
              // console.log(res)
              // 臨時登錄憑證code 
              if (res.code == 0) {  //登錄成功
                // console.log("666666", res)
                wx.setStorageSync('token', res.data.token)  //保存token   
              }
              if (res.code == 10000) {
                //code為10000代表沒有注冊過
                  //調用注冊函數
                  // console.log(111)
                  this.register()
              }
            })
          }
        })
      },
      // 注冊函數
      register() {
        wx.login({
          complete: (res) => {
            console.log("1111112222", res)
            // code: res.code,
            // iv: this.data.iv,
            // encryptedData: this.data.encryptedData  //加密用戶信息
             //配置注冊參數
            getwxre(res.code,this.data.iv, this.data.encryptedData ).then(function (res) { 
              console.log("zhuce", res)
              if (res.code == 0) {
                this.logintap()  //注冊成功在調用登錄
                wx.setStorageSync('token', res.data.token)
                console.log(res.data)
              }
            })
          }
        })
      },
    }

6.退出登錄

退出登錄其實很簡單 就是清除保存在Storage中的信息 和token

  nologin() {
        // console.log(1111111)
        wx.setStorageSync('token', '')
      },

7.檢測當前用戶登錄態是否有效

檢測當前用戶登錄態是否有效用的是wx.checkSession方法
wx.checkSession({ success: function(){ //session 未過期，並且在本生命周期一直有效 }, fail: function(){ //登錄態過期 wx.login() //重新登錄 .... } })

過程寫的有些粗糙 但大體的思路就是這樣了 其中 里邊用到的登錄和注冊接口 都是之前封裝好的直接拿來用的 我之前的一篇文章介紹過小程序封裝request 感興趣的可以去看一下
https://www.cnblogs.com/mxnl/p/13472023.html
每天一個小知識點，一點一點的成長，加油！