toFrankie / blog

种一棵树,最好的时间是十年前。其次,是现在。
20 stars 1 forks source link

支付宝小程序获取用户手机号 #302

Open toFrankie opened 1 year ago

toFrankie commented 1 year ago

记录下支付宝小程序获取会员手机号的踩坑过程。

使用限制

配置工作

前端工作

my.getPhoneNumber 是获取支付宝用户绑定的手机号 API。因为需要用户主动触发才能发起获取手机号,所以该功能不由 API 直接调用,需用 button 组件 的点击来触发。

<button
  open-type="getAuthorize"
  scope="phoneNumber"
  onGetAuthorize="getPhoneNumber"
  onError="getPhoneNumberError"
>
  获取手机号码
</button>
Page({
  /**
   * 获取手机号码,用户点击并同意回调函数
   *
   * @param {object} e 授权成功回调信息 { type: 'getAuthorize', target, currentTarget, timeStamp }
   */
  async getPhoneNumber(e) {
    my.getPhoneNumber({
      success: res => {
        // 获取到支付宝服务器返回的加密数据
        // 其中 response 为 JSON 字符串,结构为:'{"response":"xxxxx","sign":"xxx"}'
        const { respone, ariverRpcTraceId } = res

        // 将加密数据传给后端,结合签名算法和AES密钥进行解密获取手机号
        my.request({
          url: '后端服务端 URL',
          data: respone,
          success: res => {
            // 解密成功返回
          },
          fail: err => {
            console.warn('my.request fail: ', err)
          }
        })
      },
      fail: err => {
        console.warn('my.getPhoneNumber fail: ', err)
      }
    })
  },

  /**
   * 获取手机号异常,包括用户拒绝和系统异常
   * @param {object} e 授权失败回调信息
   */
  getPhoneNumberError(e) {
    console.warn('getPhoneNumberError fail: ', e)
    // 异常信息如下:
    // {
    //   type: 'error',
    //   timeStamp: 1610937854940,
    //   target: {
    //     targetDataset: {},
    //     tagName: 'button',
    //     dataset: {}
    //   },
    //   currentTarget: {
    //     tagName: 'button',
    //     dataset: {}
    //   },
    //   detail: {
    //     errorMessage: '用户取消授权',
    //     type: 'getAuthorize'
    //   }
    // }
  }
})

后端解密

由于对后端不是很了解,具体看内容加密指引

常见问题

  1. 调用 my.getPhoneNumber(),报错 isv.insufficient-isv-permissions(ISV 权限不足)
    {
    "code":"40006",
    "msg":"Insufficient Permissions",
    "subCode":"isv.insufficient-isv-permissions",
    "subMsg":"ISV权限不足,建议在开发者中心检查对应功能是否已经添加,解决办法详见:https://docs.open.alipay.com/common/isverror"
    }

    原因可能是,没有添加“获取会员手机号”功能包或者没有“申请用户信息”。 解决方法:

  2. 小程序开发管理后台能力列表中,点击添加能力
  3. 添加获取会员手机号功能包;
  4. 点击用户信息申请;(这一步不能忽略)
  5. 申请权限中申请用户手机号;
  6. 填写申请原因、使用场景等信息,提交申请,等待审核。

关于添加了相关能力之后,没有“用户信息申请”的入口,可以看这里

我就遇到过这个坑,是小程序一些基础信息未设置,完善信息保存之后,入口就出来了。

相关链接