本篇文章給大家?guī)砹岁P(guān)于微信小程序的相關(guān)知識，其中主要介紹了怎么實現(xiàn)小程序授權(quán)登錄功能的相關(guān)內(nèi)容，下面一起來看一下，希望對大家有幫助。
在我們平時工作、學(xué)習(xí)、生活中，微信小程序已成為我們密不可分的一部分，我們仔細(xì)留意下，每當(dāng)我們使用一個新的小程序時，總會遇到如下頁面:
這便是微信小程序授權(quán)登錄功能了，授權(quán)登錄后，我們就可以正常使用小程序，而小程序也會獲取到我們的用戶權(quán)益，手機(jī)號等個人信息
授權(quán)登錄功能剖析
微信小程序的授權(quán)登錄具體步驟如下所示
具體實現(xiàn)主要有以下三個步驟:
調(diào)用wx.login() 微信api獲取臨時登錄憑證code，并回傳到開發(fā)者服務(wù)器
調(diào)用auth.code2Session 微信api接口，獲取用戶唯一標(biāo)識OpenID、 用戶在微信開放平臺帳號下的唯一標(biāo)識UnionID和會話密鑰session_key
通過步驟2獲取的參數(shù)進(jìn)行解密操作，獲取用戶手機(jī)號，頭像等特性，并把需要的數(shù)據(jù)保存到緩存中
步驟實現(xiàn)代碼如下：
一、獲取臨時登錄憑證code
由于微信官方修改了getUserInfo接口，現(xiàn)在無法實現(xiàn)一進(jìn)入微信小程序就會自動彈出授權(quán)窗口，所以我們只能通過button按鈕讓用戶手動觸發(fā)
我們先寫一個簡單的彈框，用isShow變量控制，isShow取決于步驟3中的緩存信息，當(dāng)所有步驟都走通，會正確緩存用戶信息，此時彈框隱藏，否則彈框都為顯示狀態(tài)
<view class='wx_dialog' wx:if="{{isShow}}">
<view class='wx_content'>
<text>需要先授權(quán)獲取個人信息</text>
<button class="btn" open-type="getPhoneNumber" type="primary" bindgetphonenumber="getUserInfo">微信賬號快速授權(quán)</button>
</view>
</view>點擊按鈕時，調(diào)用getUserInfo方法，isShow設(shè)置為false,同時使用wx.login獲取到登錄憑證code
getUserInfo:e=>{
this.setData({
isShow:false
})
wx.login({
success: function (res) {
let code = res.code // 登錄憑證code
}
})
}二、根據(jù)登錄憑證code，獲取用戶登錄信息
拿到登錄憑證code后，調(diào)用auth.code2Session 微信api接口（此處為服務(wù)端操作，后端大佬搞定，我們直接調(diào)用他給的接口就好）
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 //解密手機(jī)號
var msg = e.detail.errMsg;
var sessionKey = userphone.session_key;//會話密鑰
var encryptedData=e.detail.encryptedData; //簽名
var unionid = userphone.unionid//唯一標(biāo)識
var iv= e.detail.iv; //授權(quán)成功
if (msg == 'getPhoneNumber:ok') {
wx.checkSession({
success:function(){ //進(jìn)行請求服務(wù)端解密手機(jī)號
this.deciyption(sessionKey,encryptedData,iv,unionid);
}
})
}
}
})此時大多數(shù)用戶信息我們已經(jīng)獲取了，但用戶手機(jī)號，用戶頭像等信息還處于加密狀態(tài)，我們需要去解密獲取這些參數(shù)
三、根據(jù)用戶信息，解密獲取用戶手機(jī)號
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);//存儲解密后的用戶手機(jī)號
}else{
wx.showToast({
title: '獲取信息失敗請重新授權(quán)',
icon: 'none'
})
that.setData({
isShow:true
})
}
},
fail:function(res) {
wx.showToast({
title: '獲取失敗請重新授權(quán)',
icon: 'none'
})
that.setData({
isShow:true
})
}
})
},此時授權(quán)登錄功能已完成
