本篇文章給大家帶來了關于微信小程序的相關知識，其中主要介紹了怎么實現小程序授權登錄功能的相關內容，下面一起來看一下，希望對大家有幫助。
在我們平時工作、學習、生活中，微信小程序已成為我們密不可分的一部分，我們仔細留意下，每當我們使用一個新的小程序時，總會遇到如下頁面:
這便是微信小程序授權登錄功能了，授權登錄后，我們就可以正常使用小程序，而小程序也會獲取到我們的用戶權益，手機號等個人信息
授權登錄功能剖析
微信小程序的授權登錄具體步驟如下所示
具體實現主要有以下三個步驟:
調用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
})
}
})
},此時授權登錄功能已完成
