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

背景：taro3 + vue3

手机号授权步骤：

1. 开放平台控制台 -> 开发设置 配置 【接口内容加密方式】
   

2. 开放平台控制台 -> 产品绑定 绑定【获取会员手机号】，并申请权限
   
   

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');
    },
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

注意！！！这里有个坑！！！
按照上面的代码，原生是没有问题，但是taro3 + vue3下，点击授权框的【同意】后没有任何反应，onGetAuthorize不执行!!! 但是onAuthError是执行的

反复测试后，抱着死马当活马医的心态把 @getAuthorize 改成了 @getauthorize, 居然可以了

用户授权基础信息
同样的要产品绑定，button的scope=‘userInfo’, 再调用my.getOpenUserInfo() 获取到信息