這篇文章為大家?guī)砹岁P(guān)於微信小程式的相關(guān)知識，其中主要介紹了怎麼實現(xiàn)小程式授權(quán)登入功能的相關(guān)內(nèi)容，下面一起來看一下，希望對大家有幫助。

【相關(guān)學(xué)習(xí)推薦：小程式學(xué)習(xí)教學(xué)】

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

這便是微信小程序授權(quán)登入功能了，授權(quán)登入後，我們就可以正常使用小程序，而小程序也會取得到我們的用戶權(quán)益，手機號碼等個人資訊

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

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

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

• 呼叫wx.login() 微信api取得臨時登入憑證code，並回傳到開發(fā)者伺服器

• 呼叫auth.code2Session?微信api接口，取得使用者唯一識別OpenID、 使用者在微信開放平臺帳號下的唯一識別UnionID和會話金鑰session_key

• ##透過步驟2取得的參數(shù)進行解密操作，取得使用者手機號，頭像等特性，並將所需的資料儲存到快取中

步驟實作程式碼如下：

一、取得臨時登入憑證code

由於微信官方修改了getUserInfo接口，現(xiàn)在無法實作一進入微信小程式就會自動彈出授權(quán)窗口，所以我們只能透過button按鈕讓使用者手動觸發(fā)

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

??<view>
????????<view>
??????????<text>需要先授權(quán)獲取個人信息</text>
??????????<button>微信賬號快速授權(quán)</button>
????????</view>
??</view>

點擊按鈕時，呼叫g(shù)etUserInfo方法，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後，呼叫auth.code2Session?微信api介面（這裡為服務(wù)端操作，後端大佬搞定，我們直接呼叫他給的介面就好）

?????????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//唯一標(biāo)識
??????????????????var?iv=?e.detail.iv;??????????????????//授權(quán)成功
??????????????????if?(msg?==?'getPhoneNumber:ok')?{
????????????????????wx.checkSession({??????????????????????success:function(){????????????????????????//進行請求服務(wù)端解密手機號
????????????????????????this.deciyption(sessionKey,encryptedData,iv,unionid);
??????????????????????}
????????????????????})
??????????????????}
????????????????}
??????????????})
????????}
??????})

此時大多數(shù)使用者資訊我們已經(jīng)取得了，但用戶手機號，用戶頭像等資訊仍處於加密狀態(tài)，我們需要去解密取得這些參數(shù)

三、根據(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);//存儲解密后的用戶手機號
????????}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)登入功能已完成

【相關(guān)學(xué)習(xí)推薦：小程式學(xué)習(xí)教學(xué)】

以上是簡單介紹：實作小程式授權(quán)登入功能的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！