簡單介紹：實現小程式授權登入功能

本篇文章給大家帶來了關於的相關知識，其中主要介紹了怎麼實現小程式授權登入功能的相關內容，下面一起來看一下，希望對大家有幫助。

zion無程式碼雲ide,帶你快速實現小程式開發立即使用

【相關學習推薦：】

在我們平時工作、學習、生活中，微信小程式已成為我們密不可分的一部分，我們仔細留意下，每當我們使用一個新的小程式時，總會遇到如下頁面:

這便是微信小程式授權登入功能了，授權登入後，我們就可以正常使用小程式，而小程式也會獲取到我們的使用者權益，手機號等個人資訊

授權登入功能剖析

微信小程式的授權登入具體步驟如下所示

具體實現主要有以下三個步驟:

呼叫wx.login() 微信api獲取臨時登入憑證code，並回傳到開發者伺服器
呼叫auth.code2Session 微信api介面，獲取使用者唯一標識OpenID、使用者在微信開放平臺帳號下的唯一標識UnionID和對談金鑰session_key
通過步驟2獲取的引數進行解密操作，獲取使用者手機號，頭像等特性，並把需要的資料儲存到快取中

步驟實現程式碼如下：

一、獲取臨時登入憑證code

由於微信官方修改了getUserInfo介面，現在無法實現一進入微信小程式就會自動彈出授權視窗，所以我們只能通過button按鈕讓使用者手動觸發

我們先寫一個簡單的彈框，用isShow變數控制，isShow取決於步驟3中的快取資訊，當所有步驟都走通，會正確快取使用者資訊，此時彈框隱藏，否則彈框都為顯示狀態

  <view class='wx_dialog' wx:if="{{isShow}}">
        <view class='wx_content'>
          <text>需要先授權獲取個人資訊</text>
          <button class="btn" open-type="getPhoneNumber" type="primary" bindgetphonenumber="getUserInfo">微信賬號快速授權</button>
        </view>
  </view>
登入後複製

點選按鈕時，呼叫getUserInfo方法，isShow設定為false,同時使用wx.login獲取到登入憑證code

getUserInfo:e=>{      this.setData({        isShow:false
      })

      wx.login({        success: function (res) {               let code = res.code // 登入憑證code
         }
      })
      
  }
登入後複製

二、根據登入憑證code，獲取使用者登入資訊

拿到登入憑證code後，呼叫auth.code2Session 微信api介面（此處為伺服器端操作，後端大佬搞定，我們直接呼叫他給的介面就好）

         wx.request({                url: 獲取使用者資訊的auth.code2Session微信api介面,                method: 'POST',                data:{                  code:code//登入憑證code
                },                header: {                  'content-type': 'application/json;charset=UTF-8'
                },                
                success: function (res) {                  var userphone= res.data.data                  //解密手機號
                  var msg = e.detail.errMsg;                  var sessionKey = userphone.session_key;//對談金鑰
                  var encryptedData=e.detail.encryptedData; //簽名
                  var unionid = userphone.unionid//唯一標識
                  var iv= e.detail.iv;                  //授權成功
                  if (msg == 'getPhoneNumber:ok') {
                    wx.checkSession({                      success:function(){                        //進行請求伺服器端解密手機號
                        this.deciyption(sessionKey,encryptedData,iv,unionid);
                      }
                    })
                  }
                }
              })
        }
      })
登入後複製

此時大多數使用者資訊我們已經獲取了，但使用者手機號，使用者頭像等資訊還處於加密狀態，我們需要去解密獲取這些引數

三、根據使用者資訊，解密獲取使用者手機號

deciyption(sessionKey,encryptedData,iv,unionid){    var that = this;
    wx.request({      url: 解密介面,      method: 'POST',      data: {        sessionKey: sessionKey,        encryptedData:encryptedData,        iv: iv
      },      header: {        'content-type': 'application/json;charset=UTF-8'
      },      success: function(res) {
        let data = res.data        if (data.resultCode == 'success') {
            wx.setStorageSync('userTel', data.data.phoneNumber);//儲存解密後的使用者手機號
        }else{
            wx.showToast({                title: '獲取資訊失敗請重新授權',                icon: 'none'
            })
            that.setData({                isShow:true
            })
        }    
      },
      fail:function(res) {
        wx.showToast({            title: '獲取失敗請重新授權',            icon: 'none'
        })
        that.setData({          isShow:true
        })
      }
    })
  },
登入後複製

此時授權登入功能已完成

【相關學習推薦：】

以上就是簡單介紹：實現小程式授權登入功能的詳細內容，更多請關注TW511.COM其它相關文章！