计算机软件技术总结 计算机软件技术总结
/ 75浏览

UNI-APP 获取用户手机号授权与服务器端处理指南

　　在 UNI-APP 中，获取用户手机号的流程通常涉及到微信小程序的授权机制。以下是实现步骤：

1. 配置小程序权限

　　首先，确保在微信小程序的管理后台已经开启了获取用户手机号的权限。

2. 使用 button​ 组件

　　在 UNI-APP 中，你可以使用 button​ 组件来触发获取用户手机号的操作。button​ 组件需要设置 open-type​ 为 getPhoneNumber​，并绑定 @getphonenumber​ 事件。

<template>
  <view>
    <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
  </view>
</template>

<script>
export default {
  methods: {
    async getPhoneNumber(e) {
      if (e.detail.errMsg === 'getPhoneNumber:ok') {
        // 用户点击了允许授权
        const { code } = e.detail;
    
        // 将 code 发送到服务器，服务器通过 code 获取用户手机号
        const res = await this.$http.post('/api/getPhoneNumber', { code });
    
        if (res.data.success) {
          const phoneNumber = res.data.phoneNumber;
          console.log('用户手机号:', phoneNumber);
        } else {
          console.error('获取手机号失败:', res.data.message);
        }
      } else {
        // 用户点击了拒绝授权
        console.error('用户拒绝授权');
      }
    }
  }
}
</script>

3. 服务器端处理

　　在服务器端，你需要使用微信提供的 API 来通过 code​ 获取用户的手机号。具体步骤如下：

  1. 获取 ​access_token​​：首先，你需要通过小程序的 appid​ 和 secret​ 获取 access_token​。

    GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

  2. 获取用户手机号：使用 access_token​ 和 code​ 来获取用户的手机号。

    POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN

    请求体：

    {
  "code": "CODE_FROM_CLIENT"
}

    响应示例：

    {
  "errcode": 0,
  "errmsg": "ok",
  "phone_info": {
    "phoneNumber": "12345678901",
    "purePhoneNumber": "12345678901",
    "countryCode": "86",
    "watermark": {
      "timestamp": 1630000000,
      "appid": "wx1234567890abcdef"
    }
  }
}

4. 处理响应

　　服务器端获取到手机号后，将其返回给前端，前端再进行相应的处理。

注意事项

  • 安全性：手机号是敏感信息，确保在传输和存储过程中进行加密处理。
  • 用户隐私：获取用户手机号需要用户明确授权，确保在用户同意的情况下进行获取。

　　通过以上步骤，你可以在 UNI-APP 中实现获取用户手机号的功能。

shenhuanjie