如何實現小程序授權登錄功能

這篇文章主要介紹“如何實現小程序授權登錄功能”，在日常操作中，相信很多人在如何實現小程序授權登錄功能問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何實現小程序授權登錄功能”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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

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

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

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

步驟實現代碼如下：

一、獲取臨時登錄憑證code

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

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

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

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

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

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

到此，關于“如何實現小程序授權登錄功能”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！