uniapp+SpringBoot实现微信小程序手机号一键登录全流程（附前后端代码及详细解释）

实现微信小程序手机号一键登录的全流程涉及前端（uni-app）和后端（Spring Boot）的协同工作。这个过程主要包括以下几个步骤：用户授权、获取手机号码、后端验证与生成Token、前端存储Token。下面我将分步骤详细介绍，并提供简化版的示例代码。

1. 前端（uni-app）准备

步骤1：导入微信SDK

在uni-app项目中，需要使用微信的SDK来处理用户授权和获取手机号。

• main.js 中引入微信SDK：

import wxlogin from '@/common/wxlogin.js'; // 自定义的微信登录模块
Vue.prototype.$wxlogin = wxlogin;

步骤2：用户授权并获取手机号

在需要实现一键登录的页面中，调用微信的login和getPhoneNumber接口。

methods: {
    async wxGetPhoneNumber(e) {
        const { encryptedData, iv } = e.detail;
        const code = await this.$wxlogin.login(); // 获取登录凭证code
        const result = await this.$wxlogin.getPhoneNumber({
            code,
            encryptedData,
            iv
        }); // 发送code、encryptedData、iv到后端换取手机号
        console.log('后端返回的手机号:', result);
    }
}

2. 后端（Spring Boot）准备

步骤1：添加依赖

确保你的Spring Boot项目中包含了处理HTTP请求、JSON数据解析等基本依赖。还需要添加微信相关的API调用库，如wechat-api或直接使用HTTP客户端调用微信开放平台的接口。

步骤2：实现登录接口

创建一个Controller来处理登录逻辑，主要分为两步：使用code换取session_key和openid，然后利用session_key解密手机号。

@RestController
public class LoginController {

    @PostMapping("/loginByPhone")
    public ResponseEntity<String> loginByPhone(@RequestBody PhoneNumberRequest request) {
        // 1. 使用code从微信服务器换取session_key和openid
        String openid = wechatService.getOpenId(request.getCode());
        
        // 2. 解密encryptedData得到手机号
        String phoneNumber = wechatService.decryptPhoneNumber(request.getEncryptedData(), request.getIv(), sessionKey);
        
        // 3. 验证并创建用户会话，生成JWT Token
        String token = authService.generateToken(openid, phoneNumber);
        
        return ResponseEntity.ok(token);
    }
}

3. 完整流程解释

1. 前端授权：用户在小程序中点击一键登录按钮，小程序发起wx.login()获取到code。
2. 前端获取手机号：通过wx.getPhoneNumber接口获取加密的手机号encryptedData和iv。
3. 前端发送请求：将code、encryptedData、iv一并发送给后端。
4. 后端处理：
   • 使用code调用微信接口换取用户的openid和session_key。
   • 利用session_key解密encryptedData得到手机号。
   • 根据手机号查找或创建用户，然后生成JWT Token作为登录凭证返回给前端。
5. 前端存储Token：将后端返回的Token保存在本地（如uni-app的StorageSync），用于后续接口请求的身份验证。

注意事项

• 确保前后端通信安全，使用HTTPS。
• 处理好异常情况，如code失效、解密失败等。
• 注意保护用户隐私，不要明文存储或传输手机号等敏感信息。
• 以上代码仅为示意，实际开发中需要根据具体需求和微信官方文档进行调整。

希望这个流程和代码示例对你有所帮助！如果有更详细的代码实现需求，请参考微信官方文档和Spring Boot相关教程进行深入学习。