小程序登录、获取用户信息、手机号

小程序登录(非腾讯云服务)

登录流程时序

图片.png

说明:
1、小程序调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。

2、服务器调用 code2Session 接口,换取 用户唯一标识 OpenID会话密钥 session_key 以及UnionID

注意:

1、临时登录凭证 code (有效期五分钟)只能使用一次

获取用户信息

API更新: 授权请求 wx.authorize({scope: "scope.userInfo"}),不会弹出授权窗口,需要使用 <button open-type="getUserInfo"/>
说明:

  • 首次获取,必须点击button 弹出授权窗口获取用户信息:
<!-- 需要使用 button 来授权登录 -->
<button
  wx:if="{{canIUse}}"
  open-type="getUserInfo"
  bindgetuserinfo="bindGetUserInfo"
>
  授权登录
</button>
  bindGetUserInfo(res) {
    console.log(res.detail.userInfo)
  }
 // 查看是否授权
    wx.getSetting({
      success(res) {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称
              wx.getUserInfo({
                success(res) {
                  const userInfo = res.userInfo
                  const nickName = userInfo.nickName
                  const avatarUrl = userInfo.avatarUrl
                  const gender = userInfo.gender // 性别 0:未知、1:男、2:女
                  const province = userInfo.province
                  const city = userInfo.city
                  const country = userInfo.country
                }
              })
        }
      }
    })
if (wx.canIUse('button.open-type.getUserInfo')){
// 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          console.log(res.userInfo)
        }
      })
}

获取用户手机号

获取微信用户绑定的手机号,需先调用wx.login接口。

因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">绑定手机号</button> 组件的点击来触发。

注意:目前该接口针对非个人开发者,且完成了认证的小程序开放(不包含海外主体)。需谨慎使用,若用户举报较多或被发现在不必要场景下使用,微信有权永久回收该小程序的该接口权限。

使用方法

需要将 <button> 组件 open-type 的值设置为 getPhoneNumber,当用户点击并同意之后,可以通过 bindgetphonenumber 事件回调获取到微信服务器返回的加密数据, 然后在第三方服务端结合 session_key 以及 app_id 进行解密获取手机号。

注意

在回调中调用 wx.login 登录,可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey,导致解密失败。建议开发者提前进行 login;或者在回调中先使用 checkSession 进行登录态检查,避免 login 刷新登录态。
代码示例

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

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

})

encryptedData 解密后为以下 JSON 结构,详见加密数据解密算法

{
  "phoneNumber": "13580006666",     用户绑定的手机号(国外手机号会有区号)
  "purePhoneNumber": "13580006666",    没有区号的手机号
  "countryCode": "86",   区号
  "watermark": {
    "appid": "APPID",
    "timestamp": TIMESTAMP
  }
}

推荐阅读更多精彩内容