taro3 支付宝小程序 -- 授权手机号和用户信息

背景:taro3 + vue3

手机号授权步骤:

  1. 开放平台控制台 -> 开发设置 配置 【接口内容加密方式】
    taro3 支付宝小程序 -- 授权手机号和用户信息_第1张图片

  2. 开放平台控制台 -> 产品绑定 绑定【获取会员手机号】,并申请权限
    taro3 支付宝小程序 -- 授权手机号和用户信息_第2张图片
    taro3 支付宝小程序 -- 授权手机号和用户信息_第3张图片

  3. 用户授权 :授权行为通过 button 组件 的 点击 动作来触发

  4. 解密和验签 —>后端小伙伴的工作

具体文档: 支付宝获取手机号官方文档传送门

用户授权手机号 — 官方文档如下

<button
  a:if="{{canIUseAuthButton}}"
  open-type="getAuthorize"
  onGetAuthorize="onGetAuthorize"  // taro3下用@getAuthorize
  onError="onAuthError" // taro3下用@error
  scope='phoneNumber'
>
  授权手机号
</button>

onGetAuthorize(res) {
  my.getPhoneNumber({
    success: (res) => {
      let encryptedData = res.response;
      my.request({
        url: '你的后端服务端',
        data: encryptedData,
      });
    },
    fail: (res) => {
      console.log(res);
      console.log('getPhoneNumber_fail');
    },
  });
}

注意!!!这里有个坑!!!
按照上面的代码,原生是没有问题,但是taro3 + vue3下,点击授权框的【同意】后没有任何反应,onGetAuthorize不执行!!! 但是onAuthError是执行的
taro3 支付宝小程序 -- 授权手机号和用户信息_第4张图片
反复测试后,抱着死马当活马医的心态把 @getAuthorize 改成了 @getauthorize, 居然可以了
在这里插入图片描述
用户授权基础信息
同样的要产品绑定,button的scope=‘userInfo’, 再调用my.getOpenUserInfo() 获取到信息

你可能感兴趣的:(#,taroUiVue3,小程序,小程序,支付宝)