微信小程序授权登录、授权手机号

sherlockkid7
1,279 阅读2分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

前言

最近写了一个小程序项目，原本只做用户授权登录，但是现在微信官方禁止小程序通过wx.getUserProfile 接口获取用户真正的头像和昵称，用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”，为了区分用户，因此又做了授权获取用户手机号。总结一下实现过程以及遇到的问题。

授权登录逻辑及具体实现

image.png

  1. 调用 wx.login() 获取 临时登录凭证code（只能使用一次） ，存储到本地，并设为全局变量
// 在全局app.js文件中，如果不存在用户token，就调用登录方法
login(){
    // 登录
    wx.login({
      success: res => {
        console.log(res)
        // code存缓存，用于之后的请求
        wx.setStorageSync('loginCode', res.code)
        this.globalData.code = res.code;
      }
    })
},

  1. 在需要登录的页面，点击登录按钮，通过调用接口 wx.getUserProfile 获取用户信息，该接口接口会同时返回 rawData、signature、iv、encryptedData，将这些数据和临时登录凭证code回传到开发者服务器。服务端进行验证或者注册之后返回token，表示登录成功，前端存储返回的用户信息和token

    授权用户信息接口返回数据的说明：

    image.png

    // 在需要登录页面的js文件中，调用 wx.getUserProfile 接口
wx.getUserProfile({
  desc: '授权登录',
  success: res => {
    console.log(res)
    if (res.errMsg == 'getUserProfile:ok') {
      // 登录信息传给后台
      $api.userLogin({
          code: app.globalData.code,
          rawData: res.rawData,
          signature: res.signature,
          iv: res.iv,
          encryptedData: res.encryptedData
        })
        .then(res => {
          //请求成功，缓存用户信息,同步全局变量
          ...
        })
        .catch(err => {
          //请求失败
          console.log(err)
        })
    }
  }
})

  2. 授权手机号

目前微信小程序需要用户主动触发才能发起获取手机号接口，需用 button 组件的点击来触发（新版本接口不再需要提前调用wx.login进行登录）。

使用方法： 将 button 组件 open-type 的值设置为 getPhoneNumber，当用户点击并同意之后，可以通过 bindgetphonenumber 事件回调获取到动态令牌code，然后把code传到开发者后台（后台调用微信后台提供的 phonenumber.getPhoneNumber 接口，消费code来换取用户手机号），返回用户手机号。

<button class="loginBtn"  open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">确定</button>

getPhoneNumber(e) {
    if (e.detail.errMsg === "getPhoneNumber:ok") {
      // 同意授权绑定手机号  
      $api.getPhoneNumber({
          code: e.detail.code,
        })
        .then(res => {
          //请求成功
          this.setData({
            phone: res.data.phone,
          })
        })
        .catch(err => {
          //请求失败
        })
    
    } else if (e.detail.errMsg === "getPhoneNumber:fail user deny") {
      //拒绝授权绑定手机号
    }
},

注：

  1. 每个code有效期为5分钟，且只能消费一次
  2. getPhoneNumber 返回的 code 与 wx.login 返回的 code 作用是不一样的，不能混用。

问题：点击登录按钮，需要同时授权用户信息和手机号，因为都需要主动触发（产生点击事件）后才可调用，因此把登录的bindtap 的回调事件绑定在授权手机号的 button 组件上

<button class="loginBtn" bindtap="login" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">确定</button>
avatar
文章
阅读
粉丝