微信小程序如何获取用户手机号？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

在微信小程序中，获取用户手机号需要通过微信提供的 button 组件，并设置 open-type 为 getPhoneNumber。用户点击按钮后，会触发 getPhoneNumber 事件，开发者可以通过该事件的回调函数获取到加密的用户手机号数据。然后，开发者需要将加密数据发送到自己的服务器，通过微信提供的接口解密，最终获取用户的手机号。

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

// www.javascriptcn.com code example
Page({
  getPhoneNumber(e) {
    if (e.detail.errMsg === "getPhoneNumber:ok") {
      const encryptedData = e.detail.encryptedData;
      const iv = e.detail.iv;
      // 将 encryptedData 和 iv 发送到服务器解密
      wx.request({
        url: 'https://your-server-url.com/decrypt-phone',
        method: 'POST',
        data: {
          encryptedData: encryptedData,
          iv: iv
        },
        success(res) {
          const phoneNumber = res.data.phoneNumber;
          console.log('用户手机号:', phoneNumber);
        }
      });
    } else {
      console.log('用户拒绝授权');
    }
  }
});

本题详细解读

1. 获取用户手机号的流程

微信小程序获取用户手机号的流程分为以下几个步骤：

前端触发授权：通过 button 组件设置 open-type="getPhoneNumber"，用户点击按钮后触发授权。
获取加密数据：用户授权后，会触发 getPhoneNumber 事件，事件对象 e.detail 中包含 encryptedData 和 iv 两个字段，分别表示加密的用户数据和初始向量。
服务器解密：前端将 encryptedData 和 iv 发送到开发者服务器，服务器通过微信提供的解密接口解密数据，获取用户的手机号。

2. 前端代码实现

在前端代码中，首先需要在 wxml 文件中定义一个 button 组件，并设置 open-type="getPhoneNumber"，同时绑定 bindgetphonenumber 事件。

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

在 js 文件中，定义 getPhoneNumber 方法，处理用户授权后的回调。如果用户授权成功，可以通过 e.detail.encryptedData 和 e.detail.iv 获取加密数据，并将其发送到服务器进行解密。

// www.javascriptcn.com code example
Page({
  getPhoneNumber(e) {
    if (e.detail.errMsg === "getPhoneNumber:ok") {
      const encryptedData = e.detail.encryptedData;
      const iv = e.detail.iv;
      // 将 encryptedData 和 iv 发送到服务器解密
      wx.request({
        url: 'https://your-server-url.com/decrypt-phone',
        method: 'POST',
        data: {
          encryptedData: encryptedData,
          iv: iv
        },
        success(res) {
          const phoneNumber = res.data.phoneNumber;
          console.log('用户手机号:', phoneNumber);
        }
      });
    } else {
      console.log('用户拒绝授权');
    }
  }
});

3. 服务器端解密

服务器端需要使用微信提供的解密接口来解密 encryptedData 和 iv。解密过程需要使用小程序的 session_key，该 session_key 是通过用户登录时获取的。

解密接口的 URL 为：https://api.weixin.qq.com/cgi-bin/component/api_get_phone_number

服务器端代码示例（以 Node.js 为例）：

// www.javascriptcn.com code example
const crypto = require('crypto');
const axios = require('axios');

function decryptPhoneNumber(sessionKey, encryptedData, iv) {
  const sessionKeyBuffer = Buffer.from(sessionKey, 'base64');
  const encryptedDataBuffer = Buffer.from(encryptedData, 'base64');
  const ivBuffer = Buffer.from(iv, 'base64');

  const decipher = crypto.createDecipheriv('aes-128-cbc', sessionKeyBuffer, ivBuffer);
  let decoded = decipher.update(encryptedDataBuffer, 'binary', 'utf8');
  decoded += decipher.final('utf8');

  return JSON.parse(decoded).phoneNumber;
}

app.post('/decrypt-phone', (req, res) => {
  const { encryptedData, iv } = req.body;
  const sessionKey = 'your-session-key'; // 从缓存或数据库中获取 sessionKey

  const phoneNumber = decryptPhoneNumber(sessionKey, encryptedData, iv);
  res.json({ phoneNumber });
});

4. 注意事项

用户授权：获取用户手机号需要用户主动授权，如果用户拒绝授权，则无法获取手机号。
session_key 的安全性：session_key 是解密用户数据的关键，必须妥善保管，避免泄露。
服务器解密：解密操作必须在服务器端进行，前端无法直接解密用户手机号数据。