网站导航
> 技术文档 > uni-app微信小程序一键授权登录最新版文档全流程揭秘_hbuilder x小程序手机号一键登录

uni-app微信小程序一键授权登录最新版文档全流程揭秘_hbuilder x小程序手机号一键登录

网友: 技术文档 2025-07-30 11:47:35

最近做了一个产品展示的微信小程序，用的很火的极客开发工具hbuilderx，实现了微信一键登录授权，授权获取手机号，头像，昵称的功能，刚好记录一下。我自己主要是做Android开发的，前后端都会，后端用的若依的二开的java语言。

获取用户授权的基本流程

在开发微信小程序时，获取用户的手机号、头像和昵称需要用户授权。微信小程序提供了相应的API来实现这些功能。以下是实现这些功能的基本流程和代码示例。需要注意的是目前微信小程序文档中规定：获取用户头像和昵称必须提供用户交互动作获取，获取手机号必须提供用户授权按钮事件获取。

获取用户手机号

获取用户手机号需要使用 button 组件的 open-type 属性，并绑定 getPhoneNumber 事件。

 
// 在js文件中Page({ onGetPhoneNumber(e) { if (e.detail.errMsg === \'getPhoneNumber:ok\') { const encryptedData = e.detail.encryptedData; const iv = e.detail.iv; console.log(\'加密数据:\', encryptedData); console.log(\'初始向量:\', iv); // 将 encryptedData 和 iv 发送到服务器进行解密 } else { console.error(\'获取手机号失败:\', e.detail.errMsg); } }});

代码说明：

  • open-type=\"getPhoneNumber\" 是 button 组件的属性，用于触发获取手机号的操作。
  • bindgetphonenumber 是绑定的事件，当用户点击按钮并授权后触发。
  • e.detail.encryptedData 和 e.detail.iv 是加密的数据和初始向量，需要发送到服务器进行解密。
  • 服务器解密后可以获取用户的手机号。

服务器端解密手机号

在服务器端，需要使用微信提供的解密算法来解密 encryptedData 和 iv，以获取用户的手机号。

import javax.crypto.Cipher;import javax.crypto.spec.SecretKeySpec;import java.util.Base64;public class AESDecryptor { private static final String ALGORITHM = \"AES\"; private static final String TRANSFORMATION = \"AES/ECB/PKCS5Padding\"; public static String decrypt(String encryptedText, String secretKey) throws Exception { SecretKeySpec secretKeySpec = new SecretKeySpec(secretKey.getBytes(), ALGORITHM); Cipher cipher = Cipher.getInstance(TRANSFORMATION); cipher.init(Cipher.DECRYPT_MODE, secretKeySpec); byte[] decryptedBytes = cipher.doFinal(Base64.getDecoder().decode(encryptedText)); return new String(decryptedBytes); } public static void main(String[] args) { try { String encryptedPhoneNumber = \"加密后的手机号Base64字符串\"; String secretKey = \"16字节的密钥\"; String decryptedPhoneNumber = decrypt(encryptedPhoneNumber, secretKey); System.out.println(\"解密后的手机号: \" + decryptedPhoneNumber); } catch (Exception e) { e.printStackTrace(); } }}

代码说明：

  • decrypt_phone_number 函数用于解密微信小程序返回的加密数据。
  • session_key 是用户的会话密钥，可以通过 wx.login 获取。
  • encrypted_data 和 iv 是从客户端获取的加密数据和初始向量。
  • 解密后可以获取用户的手机号。

头像获取方案

  1. 使用
  2. 事件处理函数 
    Page({ onChooseAvatar(e) { const { avatarUrl } = e.detail this.setData({ avatarUrl }) }})

    昵称获取方案

  3. 使用组件收集用户昵称
  4. 事件处理函数 
    Page({ onNickNameInput(e) { const nickName = e.detail.value this.setData({ nickName }) }})

    注意事项

  5. 需要基础库2.21.2及以上版本，旧版本基础库获取用户信息的API只支持到2.27，之后的都无法获取到用户信息了。
  6. 必须通过用户主动触发事件获取
  7. 用户拒绝授权处理方案： 
    // app.json 配置{ \"permission\": { \"scope.userAvatar\": { \"desc\": \"用于完善会员资料\" } }}

    完整示例

    ​​​​​​​

  8. ​​​​​​​
  <input type=\"nickname\" placeholder=\"请输入昵称\" value=\"{{nickName}}\" bindblur=\"onNickNameInput\" class=\"nickname-input\" />

总结

通过以上步骤，可以在微信小程序中实现获取用户授权并获取用户的手机号、头像和昵称。客户端代码负责获取用户授权和加密数据，服务器端代码负责解密数据并获取用户的手机号。

网络标签：

相关问题