小程序微信授權登錄、獲取用戶信息及授權綁定微信手機號流程

登錄及獲取微信用戶信息

  1. 調用wx.login()獲取登錄憑證code,再調用后端接口換取用戶登錄態信息(openid, session_key)

    此時獲得的登錄狀態具有時效性,可以調用wx.checkSession()檢查是否過期,若過期,則需要重新調用wx.login()執行登錄流程

  2. 使用wx.getSetting()獲取用戶授權列表

    1. 若已授權:調用wx.getUserInfo()獲取用戶信息
    2. 若未授權:彈出模態框展示一個 微信授權登錄 按鈕提示用戶點擊登錄
      1. 同意授權:用戶授權后可通過綁定的方法獲取用戶信息
      2. 拒絕授權:則無法獲取用戶信息,若必須微信授權登錄才可用,可以以恰當的方式給出說明,如使用wx.openSetting()引導用戶手動打開授權開關
  3. 將獲取到的用戶信息和第1部中得到的code使用服務端提供的接口更新用戶信息,如1中的示例

授權綁定微信手機號

  1. 顯示授權綁定微信手機號的按鈕(必須用戶手動點擊)
  2. 用戶同意授權后,調用成功回調處理后續操作

相應接口代碼示例

  1. 用戶授權列表:wx.getSetting()

    wx.getSetting({
      success (res) {
        console.log(res.authSetting)
        // res.authSetting = {
        //   "scope.userInfo": true, // true已授權 false未授權
        //   "scope.userLocation": true
        //    ...
        // }
      }
    })
    
  2. 檢查登錄態是否過期

    wx.checkSession({
      success () {
        //session_key 未過期,并且在本生命周期一直有效
      },
      fail () {
        // session_key 已經失效,需要重新執行登錄流程
        wx.login() //重新登錄
      }
    })
    
  3. 調用wx.login()進行登錄并獲取cookies

    wx.login({
        success: function(res) {
            // 得到了code
            if (res.code) {
                wx.request({
                    url: api.user.authLogin(res.code) // 后端提供的驗證登錄接口
                    success: function(response) {
                     // 驗證成功,保存cookies, 封裝在全局統一的請求方法中,如get, post
                        wx.setStorage({
                         key: 'cookies',
                         data: response.data.res.cookies
                        })
                     
                        wx.getUserInfo({
                         withCredentials: true,
                            success: function(res) {
                                // 取得用戶微信信息,調用后端接口更新用戶信息
                                const userInfo = res.userInfo
                                const encryptedData = res.encryptedData
                             const iv = res.iv
                                
                                const params = {
                                  nick_name: userInfo.nickName,
                                  gender: userInfo.gender,
                                  province: userInfo.province,
                                  city: userInfo.city,
                                  country: userInfo.country,
                                  avatar_url: userInfo.avatarUrl,
                                  encrypted_data: encryptedData,
                                  encrypt_iv: iv
                                }
    
                                server.get(api.user.updateBaseInfo(), params, () => {
                                 // 成功保存用戶信息
                                })
                            }
                        })
                 }
                })
            }
        }
    })
    
  4. 微信授權登錄

    <button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">微信登錄</button>
    
    methods = {
        onGetUserInfo: this.handleGetUserInfo
    }
    
    // 同意授權
    handleGetUserInfo(e) {
        wx.getUserInfo()
    }
    
  5. 授權獲取微信綁定的手機號

    <button open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber">
        綁定微信手機號
    </button>
    
    methods = {
        onGetPhoneNumber: this.handleGetPhoneNumber
    }
    
    /**
    * 同意授權獲取手機號
    * @desc 獲取到 encryptedData,iv信息,需要服務端解密才能獲取到真正的手機號
    */
    handleGetPhoneNumber(e) {
        if (e.detail.iv) {
            server.post(api.user.bindWXPhoneNumber(), {
                encrypted_data: e.detail.encryptedData,
                encrypt_iv: e.detail.iv
            }, data => {
                wx.showToast({ title: '綁定成功' })
                // do something
            }, error => {
                wx.showModal({
                    title: '綁定失敗',
                    content: '[服務端返回的錯誤信息]',
                    showCancel: false,
                    success: res => {
                        if (res.confirm) { // 用戶確認后
                            // do something
                        }
                    }
                })
            })
        } else { // 用戶拒絕授權
            // do something
        }
    }
    
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容