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

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

获取用户授权的基本流程

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

获取用户手机号

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

<!-- 在wxml文件中 -->
<button open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber">获取手机号</button>

// 在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 是从客户端获取的加密数据和初始向量。
解密后可以获取用户的手机号。

头像获取方案

使用<button>组件触发头像选择

<button open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
  选择头像
</button>

事件处理函数

Page({
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail
    this.setData({
      avatarUrl
    })
  }
})

昵称获取方案

使用<input>组件收集用户昵称

<input 
  type="nickname" 
  placeholder="请输入昵称"
  bindblur="onNickNameInput"
/>

事件处理函数

Page({
  onNickNameInput(e) {
    const nickName = e.detail.value
    this.setData({
      nickName
    })
  }
})

注意事项

需要基础库2.21.2及以上版本，旧版本基础库获取用户信息的API只支持到2.27，之后的都无法获取到用户信息了。
必须通过用户主动触发事件获取

用户拒绝授权处理方案：

// app.json 配置
{
  "permission": {
    "scope.userAvatar": {
      "desc": "用于完善会员资料"
    }
  }
}

完整示例

<view class="container">
  <button 
    open-type="chooseAvatar"
    bindchooseavatar="onChooseAvatar"
    class="avatar-btn"
  >
    <image 
      src="{{avatarUrl || '/default-avatar.png'}}" 
      class="avatar"
    />
  </button>

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