uniapp手机号授权登录

### 如何在 UniApp 中实现手机号授权登录 #### 1. 前置条件 为了实现在 UniApp 开发的小程序中完成手机号授权登录功能，需注意以下几点： - 微信小程序的 **个人开发者账号** 不具备获取用户手机号的权限[^2]。因此，建议使用企业开发者账号或微信官方提供的测试号来开发此功能。 - 需要配置微信开放平台的相关设置，包括绑定服务器域名、启用敏感接口等。 --- #### 2. 实现逻辑概述 以下是完整的实现流程： - 用户进入小程序后，触发用户信息授权。 - 授权成功后跳转到手机号授权页面。 - 获取用户的加密数据并通过服务端解密得到真实手机号。 - 将手机号存储至前端缓存和后台数据库以便后续调用。 --- #### 3. 代码示例 ##### (1) 页面布局与事件绑定 创建一个按钮用于触发动态授权： ```html <view class="container"> <!-- 用户信息授权 --> <button open-type="getUserInfo" @getuserinfo="onGetUserInfo">点击授权</button> <!-- 手机号授权 --> <button v-if="isUserAuthorized" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">手机号授权</button> </view> ``` ##### (2) Vue 方法定义 在 `methods` 中编写处理函数： ```javascript export default { data() { return { isUserAuthorized: false, // 是否已通过用户信息授权 encryptedData: '', // 加密数据 iv: '' // 初始化向量 }; }, methods: { onGetUserInfo(e) { const userInfo = e.detail.userInfo; if (userInfo) { this.isUserAuthorized = true; // 设置标志位为true console.log('用户信息:', userInfo); // 可在此处将用户信息保存到本地缓存 uni.setStorageSync('userInfo', userInfo); } else { console.error('用户拒绝授权'); } }, async onGetPhoneNumber(e) { const { detail } = e; if (!detail.errMsg || !detail.cloudID || !detail.encryptedData || !detail.iv) { console.error('获取手机号失败'); return; } this.encryptedData = detail.encryptedData; this.iv = detail.iv; try { await this.sendToServerForDecryption(); } catch (error) { console.error('发送解密请求失败:', error); } }, sendToServerForDecryption() { return new Promise((resolve, reject) => { uni.request({ url: 'https://your-server-url/decryptPhone', // 替换为实际的服务端地址 method: 'POST', header: { 'content-type': 'application/json' }, data: { encryptedData: this.encryptedData, iv: this.iv, sessionKey: uni.getStorageSync('sessionKey') // 提前获取并存储的会话密钥 }, success(res) { if (res.data.success) { const phoneNumber = res.data.phoneNumber; console.log('解密后的手机号:', phoneNumber); // 存储手机号到本地缓存 uni.setStorageSync('phoneNumber', phoneNumber); resolve(phoneNumber); // 返回解析成功的手机号 } else { reject(new Error('解密失败')); } }, fail(err) { reject(err); } }); }); } } }; ``` --- #### 4. 后台服务端解密逻辑 服务端需要接收来自客户端的数据，并利用微信 API 进行解密操作。以下是基于 Node.js 的简单示例： ```javascript const crypto = require('crypto'); function decryptPhoneNumber(encryptedData, iv, sessionKey) { try { const decipher = crypto.createDecipheriv('aes-128-cbc', Buffer.from(sessionKey, 'base64'), Buffer.from(iv, 'base64')); let decoded = decipher.update(Buffer.from(encryptedData, 'base64')); decoded += decipher.final(); return JSON.parse(decoded.toString()); } catch (err) { throw err; } } module.exports = function(req, res) { const { encryptedData, iv, sessionKey } = req.body; try { const result = decryptPhoneNumber(encryptedData, iv, sessionKey); res.json({ success: true, phoneNumber: result.purePhoneNumber }); // purePhoneNumber 是未带区号的真实号码 } catch (e) { res.status(500).json({ success: false, message: '解密失败' }); } }; ``` --- #### 5. 注意事项 - 客户端和服务端通信时务必采用 HTTPS 协议以保障安全性。 - 解密所需的 `session_key` 应由微信登录接口返回，在首次登录时应妥善保存于服务端。 - 如果涉及支付或其他高安全需求场景，请进一步加强验证机制。 ---