如何實(shí)現(xiàn)小程序授權(quán)登錄功能

這篇文章主要介紹“如何實(shí)現(xiàn)小程序授權(quán)登錄功能”，在日常操作中，相信很多人在如何實(shí)現(xiàn)小程序授權(quán)登錄功能問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”如何實(shí)現(xiàn)小程序授權(quán)登錄功能”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

具體實(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='wx_dialog' wx:if="{{isShow}}">
        <view class='wx_content'>
          <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
        })
      }
    })
  },

到此，關(guān)于“如何實(shí)現(xiàn)小程序授權(quán)登錄功能”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！