本篇文章給大家?guī)砹岁P于微信小程序的相關知識，其中主要介紹了怎么實現小程序授權登錄功能的相關內容，下面一起來看一下，希望對大家有幫助。

【相關學習推薦：小程序學習教程】

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

這便是微信小程序授權登錄功能了，授權登錄后，我們就可以正常使用小程序，而小程序也會獲取到我們的用戶權益，手機號等個人信息

授權登錄功能剖析

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

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

• 調用wx.login() 微信api獲取臨時登錄憑證code，并回傳到開發(fā)者服務器

• 調用auth.code2Session?微信api接口，獲取用戶唯一標識OpenID、 用戶在微信開放平臺帳號下的唯一標識UnionID和會話密鑰session_key

• 通過步驟2獲取的參數進行解密操作，獲取用戶手機號，頭像等特性，并把需要的數據保存到緩存中

步驟實現代碼如下：

一、獲取臨時登錄憑證code

由于微信官方修改了getUserInfo接口，現在無法實現一進入微信小程序就會自動彈出授權窗口，所以我們只能通過button按鈕讓用戶手動觸發(fā)

我們先寫一個簡單的彈框，用isShow變量控制，isShow取決于步驟3中的緩存信息，當所有步驟都走通，會正確緩存用戶信息，此時彈框隱藏，否則彈框都為顯示狀態(tài)

??<view class=&#39;wx_dialog&#39; wx:if="{{isShow}}">
????????<view class=&#39;wx_content&#39;>
??????????<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);
??????????????????????}
????????????????????})
??????????????????}
????????????????}
??????????????})
????????}
??????})

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

三、根據用戶信息，解密獲取用戶手機號

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
????????})
??????}
????})
??},

此時授權登錄功能已完成

【相關學習推薦：小程序學習教程】

以上是簡單介紹：實現小程序授權登錄功能的詳細內容。更多信息請關注PHP中文網其他相關文章！