uniapp 获取微信手机号

### 如何在 UniApp 中获取微信小程序用户的手机号并通过 Java 进行解密 #### 获取用户手机号的整体流程 为了实现 UniApp 微信小程序中用户手机号的授权以及后端解密功能，可以按照以下逻辑完成： 1. **前端部分 (UniApp)** 在 UniApp 的页面上添加一个 `open-type="getPhoneNumber"` 的按钮组件。当用户点击该按钮时触发回调函数，并将加密数据发送至后端。 2. **后端部分 (Spring Boot)** 后端接收到前端传递的数据后，利用微信开放平台提供的 API 和秘钥对加密数据进行解密，从而获得用户的手机号。 --- #### 前端代码示例 (UniApp) 以下是 UniApp 页面中的 HTML 结构和 JavaScript 方法实现： ```html <view class="action-btn"> <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true" class="login-btn cu-btn block bg-blue lg round"> 获取手机号登录 </button> </view> ``` 对应的 Vue.js 方法如下： ```javascript export default { methods: { getPhoneNumber(e) { if (!e.detail.errMsg || e.detail.errMsg !== 'getPhoneNumber:ok') { console.error('用户拒绝提供手机号'); return; } const encryptedData = e.detail.encryptedData; // 加密数据 const iv = e.detail.iv; // 初始化向量 this.$http.post('/api/decryptPhone', { // 调用后端接口 encryptedData, iv }).then(res => { console.log('解密后的手机号:', res.data.phoneNumber); }).catch(err => { console.error('解密失败:', err); }); } } } ``` 上述代码实现了用户点击按钮后，从前端收集加密数据 (`encryptedData` 和 `iv`) 并将其发送给后端的功能[^3]。 --- #### 后端代码示例 (Spring Boot) ##### Controller 层 创建一个用于接收前端请求并调用服务层的方法： ```java @RestController @RequestMapping("/api") public class PhoneController { private final PhoneService phoneService; public PhoneController(PhoneService phoneService) { this.phoneService = phoneService; } @PostMapping("/decryptPhone") public ResponseEntity<Map<String, Object>> decryptPhone(@RequestBody Map<String, String> request) throws Exception { String encryptedData = request.get("encryptedData"); String iv = request.get("iv"); Map<String, Object> result = phoneService.decryptPhone(encryptedData, iv); return new ResponseEntity<>(result, HttpStatus.OK); } } ``` ##### Service 层 定义业务逻辑的服务类，负责实际的解密操作： ```java @Service public class PhoneService { private static final String APP_ID = "your_app_id"; // 替换为自己的 AppId private static final String SECRET_KEY = "your_secret"; // 替换为自己的 SecretKey /** * 解密手机号 */ public Map<String, Object> decryptPhone(String encryptedData, String iv) throws Exception { Session session = getSession(); // 获取会话信息 WeChatDecryptUtil util = new WeChatDecryptUtil( session.getSessionKey(), encryptedData, iv ); return util.decrypt(); } /** * 获取会话信息（模拟） */ private Session getSession() { // 实际项目中应从 Redis 或数据库读取 sesson_key return new Session("example_session_key"); } } class Session { private String sessionKey; public Session(String sessionKey) { this.sessionKey = sessionKey; } public String getSessionKey() { return sessionKey; } } ``` ##### 工具类 (WeChatDecryptUtil) 编写工具类来处理具体的 AES 解密过程： ```java import javax.crypto.Cipher; import javax.crypto.spec.IvParameterSpec; import javax.crypto.spec.SecretKeySpec; import java.nio.charset.StandardCharsets; import java.util.Base64; public class WeChatDecryptUtil { private final String sessionKey; private final String encryptedData; private final String iv; public WeChatDecryptUtil(String sessionKey, String encryptedData, String iv) { this.sessionKey = sessionKey; this.encryptedData = encryptedData; this.iv = iv; } public Map<String, Object> decrypt() throws Exception { byte[] decodedSessionKey = Base64.getUrlDecoder().decode(sessionKey); byte[] decodedEncryptedData = Base64.getUrlDecoder().decode(encryptedData); byte[] decodedIv = Base64.getUrlDecoder().decode(iv); Cipher cipher = Cipher.getInstance("AES/CBC/PKCS7Padding"); SecretKeySpec keySpec = new SecretKeySpec(decodedSessionKey, "AES"); IvParameterSpec ivSpec = new IvParameterSpec(decodedIv); cipher.init(Cipher.DECRYPT_MODE, keySpec, ivSpec); byte[] decryptedBytes = cipher.doFinal(decodedEncryptedData); String decryptedString = new String(decryptedBytes, StandardCharsets.UTF_8); ObjectMapper objectMapper = new ObjectMapper(); return objectMapper.readValue(decryptedString, Map.class); // 返回 JSON 数据 } } ``` 以上代码展示了如何通过 Spring Boot 对来自前端的加密数据进行解密，并提取其中的手机号等敏感信息[^1]。 --- #### 注意事项 - 需要确保 `session_key` 是有效的，并且与当前用户的登录状态一致。 - 如果使用的是正式环境，则需注意微信平台对于手机号验证次数的限制。 - 所有的通信建议采用 HTTPS 协议以保障安全性。 --- ###

### 实现 UniApp 应用中微信登录并获取用户手机号 #### 准备工作 为了在 UniApp 中集成微信登录并获取用户的手机号码，需先完成必要的准备工作。这包括配置微信公众平台的相关设置以及安装所需的插件。 - 配置微信公众平台的应用信息，如 AppID 和 AppSecret。 - 安装 `uni-id` 插件或其他支持微信登录的第三方插件[^1]。 #### 调用微信授权接口 通过调用 `wx.login()` 方法获得临时登录凭证 code，并将其发送至开发者服务器以换取 session_key 及 openid。随后可利用这些数据进一步操作。 ```javascript // 登录 - 获取用户登录态 wx.login() uni.login({ provider: 'weixin', success: function (loginRes) { console.log('Login Success', loginRes); // 将 code 发送到后端交换 openId 等信息 uni.request({ url: 'https://yourserver.com/exchangeCodeForOpenid',// 后端地址 method: "POST", data: { js_code: loginRes.code }, success(res){ console.log("Exchange Result:", res.data); } }); } }); ``` #### 获取用户同意后的手机号 当用户点击按钮触发事件时，应显示提示框请求访问电话号码权限。如果用户授予，则可通过 API 接口获取加密过的手机号；之后再由服务端解密得到真实号码[^2]。 ```html <button @click="getPhoneNumber">点击获取手机号</button> ``` ```javascript methods: { getPhoneNumber(e) { const iv = e.detail.iv; const encryptedData = e.detail.encryptedData; if (!iv || !encryptedData) return; // 用户拒绝提供手机号 uni.request({ url: 'https://yourserver.com/decryptPhoneNum',// 解密接口 URL method: "POST", data: { iv, encryptedData }, success(res){ console.log("Decrypted Phone Number:", res.data.phoneNumber); } }); } } ``` #### 处理后端逻辑 后端接收到前端传递过来的数据后，使用官方提供的算法对接收的信息进行解密处理，从而提取出真实的手机号码[^4]。