本篇文章給大家?guī)?lái)了關(guān)于微信小程序的相關(guān)知識(shí)，其中主要介紹了怎么實(shí)現(xiàn)小程序授權(quán)登錄功能的相關(guān)內(nèi)容，下面一起來(lái)看一下，希望對(duì)大家有幫助。

【相關(guān)學(xué)習(xí)推薦：小程序?qū)W習(xí)教程】

在我們平時(shí)工作、學(xué)習(xí)、生活中，微信小程序已成為我們密不可分的一部分，我們仔細(xì)留意下，每當(dāng)我們使用一個(gè)新的小程序時(shí)，總會(huì)遇到如下頁(yè)面:

這便是微信小程序授權(quán)登錄功能了，授權(quán)登錄后，我們就可以正常使用小程序，而小程序也會(huì)獲取到我們的用戶權(quán)益，手機(jī)號(hào)等個(gè)人信息

授權(quán)登錄功能剖析

微信小程序的授權(quán)登錄具體步驟如下所示

具體實(shí)現(xiàn)主要有以下三個(gè)步驟:

• 調(diào)用wx.login() 微信api獲取臨時(shí)登錄憑證code，并回傳到開(kāi)發(fā)者服務(wù)器

• 調(diào)用auth.code2Session?微信api接口，獲取用戶唯一標(biāo)識(shí)OpenID、 用戶在微信開(kāi)放平臺(tái)帳號(hào)下的唯一標(biāo)識(shí)UnionID和會(huì)話密鑰session_key

• 通過(guò)步驟2獲取的參數(shù)進(jìn)行解密操作，獲取用戶手機(jī)號(hào)，頭像等特性，并把需要的數(shù)據(jù)保存到緩存中

步驟實(shí)現(xiàn)代碼如下：

一、獲取臨時(shí)登錄憑證code

由于微信官方修改了getUserInfo接口，現(xiàn)在無(wú)法實(shí)現(xiàn)一進(jìn)入微信小程序就會(huì)自動(dòng)彈出授權(quán)窗口，所以我們只能通過(guò)button按鈕讓用戶手動(dòng)觸發(fā)

我們先寫(xiě)一個(gè)簡(jiǎn)單的彈框，用isShow變量控制，isShow取決于步驟3中的緩存信息，當(dāng)所有步驟都走通，會(huì)正確緩存用戶信息，此時(shí)彈框隱藏，否則彈框都為顯示狀態(tài)

??<view class=&#39;wx_dialog&#39; wx:if="{{isShow}}">
????????<view class=&#39;wx_content&#39;>
??????????<text>需要先授權(quán)獲取個(gè)人信息</text>
??????????<button class="btn" open-type="getPhoneNumber" type="primary" bindgetphonenumber="getUserInfo">微信賬號(hào)快速授權(quán)</button>
????????</view>
??</view>

點(diǎn)擊按鈕時(shí)，調(diào)用getUserInfo方法，isShow設(shè)置為false,同時(shí)使用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ī)號(hào)
??????????????????var?msg?=?e.detail.errMsg;??????????????????var?sessionKey?=?userphone.session_key;//會(huì)話密鑰
??????????????????var?encryptedData=e.detail.encryptedData;?//簽名
??????????????????var?unionid?=?userphone.unionid//唯一標(biāo)識(shí)
??????????????????var?iv=?e.detail.iv;??????????????????//授權(quán)成功
??????????????????if?(msg?==?'getPhoneNumber:ok')?{
????????????????????wx.checkSession({??????????????????????success:function(){????????????????????????//進(jìn)行請(qǐng)求服務(wù)端解密手機(jī)號(hào)
????????????????????????this.deciyption(sessionKey,encryptedData,iv,unionid);
??????????????????????}
????????????????????})
??????????????????}
????????????????}
??????????????})
????????}
??????})

此時(shí)大多數(shù)用戶信息我們已經(jīng)獲取了，但用戶手機(jī)號(hào)，用戶頭像等信息還處于加密狀態(tài)，我們需要去解密獲取這些參數(shù)

三、根據(jù)用戶信息，解密獲取用戶手機(jī)號(hào)

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);//存儲(chǔ)解密后的用戶手機(jī)號(hào)
????????}else{
????????????wx.showToast({????????????????title:?'獲取信息失敗請(qǐng)重新授權(quán)',????????????????icon:?'none'
????????????})
????????????that.setData({????????????????isShow:true
????????????})
????????}????
??????},
??????fail:function(res)?{
????????wx.showToast({????????????title:?'獲取失敗請(qǐng)重新授權(quán)',????????????icon:?'none'
????????})
????????that.setData({??????????isShow:true
????????})
??????}
????})
??},

此時(shí)授權(quán)登錄功能已完成

【相關(guān)學(xué)習(xí)推薦：小程序?qū)W習(xí)教程】

以上是簡(jiǎn)單介紹：實(shí)現(xiàn)小程序授權(quán)登錄功能的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！