微信小程序获取手机号授权

简介

微信小程序获取用户手机号是常见的业务需求。本文介绍如何通过微信官方 API 获取用户手机号授权。

实现步骤

1. 在 WXML 中添加按钮

使用 open-type="getPhoneNumber" 属性来触发手机号授权。

<button 
  open-type="getPhoneNumber" 
  bindgetphonenumber="getPhoneNumber" 
  class="btnPhone {{mobile != '' ? 'btnPhoneActive' : ''}}">
  获取手机号
</button>

2. 在 JS 中处理授权逻辑

Page({
  data: {
    mobile: ''
  },

  /**
   * 获取手机号授权
   */
  getPhoneNumber: function(e) {
    console.log(e);
    
    // 检查用户是否点击拒绝
    if (e.detail.errMsg === 'getPhoneNumber:user deny') {
      wx.showToast({
        title: '用户拒绝授权',
        icon: 'none'
      });
      return;
    }

    const ivObj = e.detail.iv;
    const telObj = e.detail.encryptedData;
    const that = this;

    // 执行 Login 获取 code
    wx.login({
      success: res => {
        console.log('code:', res.code);

        // 将 code、encryptedData、iv 传给服务器解密
        requestApi.userGetMobile({
          vcode: res.code,
          encryptedData: telObj,
          iv: ivObj
        }).then(res => {
          console.log("获取手机号成功", res);
          console.log("手机号:", res.data.data.phoneNumber);

          // 保存手机号信息
          that.setData({
            mobile: res.data.data.phoneNumber,
            openid: res.data.data.openid,
            unionid: res.data.data.unionid
          });

          // 执行后续业务逻辑
          that.postInfo();

          // 提示用户
          wx.showToast({
            title: '获取手机号成功!',
            icon: 'success',
            duration: 1500
          });
        }).catch(err => {
          console.error("获取手机号失败", err);
          wx.showToast({
            title: '获取手机号失败',
            icon: 'none'
          });
        });
      },
      fail: err => {
        console.error("登录失败", err);
        wx.showToast({
          title: '登录失败',
          icon: 'none'
        });
      }
    });
  },

  /**
   * 提交用户信息到服务器
   */
  postInfo: function() {
    // 执行你的业务逻辑
    console.log('提交用户信息');
  }
});

注意事项

服务端解密：获取到的手机号是加密的，需要在服务端使用 session_key 进行解密
用户授权：用户可能会拒绝授权，需要做好异常处理
安全性：不要将 session_key 暴露在前端
时效性：session_key 有时效性，需要及时使用

服务端解密示例（Node.js）

const WXBizDataCrypt = require('./WXBizDataCrypt');

// appId 和 sessionKey 从微信接口获取
const appId = 'your-app-id';
const sessionKey = 'your-session-key';
const encryptedData = req.body.encryptedData;
const iv = req.body.iv;

const pc = new WXBizDataCrypt(appId, sessionKey);
const data = pc.decryptData(encryptedData, iv);

console.log('解密后的数据:', data);
// 输出示例：
// {
//   phoneNumber: "13800138000",
//   purePhoneNumber: "13800138000",
//   countryCode: "86",
//   watermark: { ... }
// }

参考文档

微信小程序官方文档 - 获取手机号