小程序获取手机号完整流程 弹出框获取电话号码

小程序获取手机号完整流程 弹出框获取电话号码

1️⃣ 前提条件
- 使用微信小程序
- 小程序已注册并通过审核
- 后端可存储 session_key

2️⃣ 小程序端按钮
<button 
  type="default" 
  open-type="getPhoneNumber" 
  @getphonenumber="decryptPhoneNumber"
>
  获取手机号
</button>

3️⃣ 点击按钮事件处理
decryptPhoneNumber(event) {
  if (event.detail.errMsg === 'getPhoneNumber:ok') {
    const { encryptedData, iv } = event.detail;
    // 发送给后端解密
  } else {
    console.log('用户拒绝授权手机号');
  }
}

4️⃣ 前端请求后端解密
wx.request({
  url: '/api/decrypt-phone',
  method: 'POST',
  data: { encryptedData, iv },
  success(res) {
    console.log('手机号绑定成功:', res.data.phoneNumber);
  }
})

5️⃣ 后端解密流程（Node.js 示例）
const crypto = require('crypto');

function decryptPhoneData(encryptedData, iv, sessionKey) {
  const decipher = crypto.createDecipheriv(
    'aes-128-cbc',
    Buffer.from(sessionKey, 'base64'),
    Buffer.from(iv, 'base64')
  );
  decipher.setAutoPadding(true);
  let decoded = decipher.update(encryptedData, 'base64', 'utf8');
  decoded += decipher.final('utf8');
  return JSON.parse(decoded);
}

6️⃣ 前端显示手机号
this.phoneNumber = res.data.phoneNumber;
console.log('绑定的手机号:', this.phoneNumber);

7️⃣ 全流程概览
点击按钮 -> 弹窗授权 -> 前端获取 encryptedData + iv
-> 发送给后端 -> 后端解密 -> 返回真实手机号
-> 前端显示