微信小程序 wx.getUserProfile 使用示例 (替代wx.getUserInfo)

点击查看 wx.getUserProfile 和 wx.getUserInfo 的区别

使用背景

  • 微信官方阉割了 wx.getUserInfo 接口,前端需要使用新的接口 wx.getUserProfile 替代
  • 由于 wx.getUserProfile 接口返回的加密数据中,不再包含 openIdunionId,因此后端只能通过前端 wx.login后 拿到的 code 去换取
  • 由于 wx.login 的时效性限制,code换取回 openIdunionId之后,若用户不调用 wx.getUserProfile 授权获取用户信息,openIdunionId存储在前端或者后端都是有点多此一举的,并且若前端存储,在接口中给后端也是不安全的。

因此同时调起 wx.loginwx.getUserProfile

  • wx.login 返回的code 和 wx.getUserProfile 返回的 userInfo、encryptedData 等,一次性传给后端,换回小程序登录态token
  • 实际使用时,由于wx.getUserProfile 必须在点击事件中触发,所以就在点击事件中使用 Promise.all

具体代码如下

  
  // 获取code、userInfo等信息
  getUserProfile () {
    var p1 = new Promise((resolve, reject) => {
      wx.login({
        success: res => {
          // 这里也可以选择性返回需要的字段
          resolve(res)
        }
      })
    })
    var p2 = new Promise((resolve, reject) => {
      wx.getUserProfile({
        desc: '用于完善会员资料',
        success: res => {
          // 这里也可以选择性返回需要的字段
          resolve(res)
        }
      })
    })
    // 同时执行p1和p2,并在它们都完成后执行then
    Promise.all([p1, p2]).then((results) => {
      // results是一个长度为2的数组,放置着p1、p2的resolve
      this.handleUserInfo({
            // 这里也可以选择性返回需要的字段
          ...results[0],
          ...results[1]
      })
    })
  },
  // 组织好后端需要的字段,并调用接口
  handleUserInfo (data) {
      const { code, encryptedData, userInfo, iv, rawData, signature, cloudID } = data
      const params = {
        userInfo,
        // ....
      }
      // 调用接口维护本地登录态
  }
这样就结束啦~

你可能感兴趣的