小程序登錄及用戶信息、手機號獲取

小程序登錄流程時序

 

 

說明：

1. 調用 wx.login() 獲取 臨時登錄憑證code ，並回傳到開發者服務器。
2. 調用 auth.code2Session 接口，換取 用戶唯一標識 OpenID 和 會話密鑰 session_key。

之后開發者服務器可以根據用戶標識來生成自定義登錄態，用於后續業務邏輯中前后端交互時識別用戶身份。

注意：

1. 會話密鑰 session_key 是對用戶數據進行 加密簽名 的密鑰。為了應用自身的數據安全，開發者服務器不應該把會話密鑰下發到小程序，也不應該對外提供這個密鑰。
2. 臨時登錄憑證 code 只能使用一次

獲取用戶信息

1. 用戶授權后，小程序通過 wx.getUserInfo 獲取用戶信息

<!-- 如果只是展示用戶頭像昵稱，可以使用 <open-data /> 組件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
<!-- 需要使用 button 來授權登錄 -->
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授權登錄</button>
<view wx:else>請升級微信版本</view>

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function() {
    // 查看是否授權
    wx.getSetting({
      success (res){
        if (res.authSetting['scope.userInfo']) {
          // 已經授權，可以直接調用 getUserInfo 獲取頭像昵稱
          wx.getUserInfo({
            success: function(res) {
              console.log(res.userInfo)
            }
          })
        }
      }
    })
  },
  bindGetUserInfo (e) {
    console.log(e.detail.userInfo)
  }
})

輸出

{nickName: "梁濤", gender: 1, language: "zh_CN", city: "Nanjing", province: "Jiangsu", …}//頭像、昵稱、性別、語言、國家、省、市

 

2、個人敏感信息被加密，加密信息傳給服務端，使用在登錄時獲取的 session_key 解密數據，解密方法可以看微信的 開放數據校驗與解密文檔

{ "openId": "OPENID", "nickName": "NICKNAME", "gender": GENDER, "city": "CITY", "province": "PROVINCE", "country": "COUNTRY", "avatarUrl": "AVATARURL", "unionId": "UNIONID", "watermark": { "appid":"APPID", "timestamp":TIMESTAMP } } 

獲取手機號

獲取微信用戶綁定的手機號，需先調用wx.login接口。

使用方法

需要將 button 組件 open-type 的值設置為 getPhoneNumber，當用戶點擊並同意之后，可以通過 bindgetphonenumber 事件回調獲取到微信服務器返回的加密數據， 然后在第三方服務端結合 session_key 以及 app_id 進行解密獲取手機號。

注意

在回調中調用 wx.login 登錄，可能會刷新登錄態。此時服務器使用 code 換取的 sessionKey 不是加密時使用的 sessionKey，導致解密失敗。建議開發者提前進行 login；或者在回調中先使用 checkSession 進行登錄態檢查，避免 login 刷新登錄態。

 

//微信
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
//vue
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></button>

getPhoneNumber (e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.iv)
    console.log(e.detail.encryptedData)
  }

獲取得到的開放數據為以下 json 結構：

{ "phoneNumber": "13580006666", "purePhoneNumber": "13580006666", "countryCode": "86", "watermark": { "appid":"APPID", "timestamp": TIMESTAMP } }

 

引申：檢查登錄態是否過期

通過 wx.login 接口獲得的用戶登錄態擁有一定的時效性。用戶越久未使用小程序，用戶登錄態越有可能失效。反之如果用戶一直在使用小程序，則用戶登錄態一直保持有效。具體時效邏輯由微信維護，對開發者透明。開發者只需要調用 wx.checkSession 接口檢測當前用戶登錄態是否有效。

登錄態過期后開發者可以再調用 wx.login 獲取新的用戶登錄態。調用成功說明當前 session_key 未過期，調用失敗說明 session_key 已過期。更多使用方法詳見 小程序登錄。

wx.checkSession({
  success () {
    //session_key 未過期，並且在本生命周期一直有效
  },
  fail () {
    // session_key 已經失效，需要重新執行登錄流程
    wx.login() //重新登錄
  }
})

官方文檔： https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

參考文檔：https://www.jianshu.com/p/3dd1f4635fc8