uni-app(前端) + Spring Boot(后端) 获取微信小程序用户的唯一标识(openid 和 unionid)的完整实现方案,包含详细的代码和注释_uniapp获取微信openid
以下是 uni-app(前端) + Spring Boot(后端) 获取微信小程序用户的唯一标识(openid
和 unionid
)的完整实现方案,包含详细的代码和注释。
✅ 一、前端:uni-app 获取 code
📄 文件路径:pages/login/login.vue
export default { methods: { async weChatLogin() { try { // 调用微信登录接口,获取临时登录凭证 code const [err, res] = await uni.login({ provider: \'weixin\', // 微信登录 }); if (err) { uni.showToast({ title: \'登录失败\', icon: \'none\' }); console.error(\'登录失败:\', err); return; } const code = res.code; console.log(\'获取到的登录凭证 code:\', code); // 将 code 发送到后端服务 const response = await uni.request({ url: \'https://yourdomain.com/api/wechat/login\', // 替换为你的后端地址 method: \'POST\', data: { code, }, }); const { openid, unionid } = response.data; console.log(\'获取到的用户标识:\', { openid, unionid }); uni.showToast({ title: \'登录成功\' }); // TODO: 可以将 openid 存入本地缓存或跳转页面 } catch (e) { uni.showToast({ title: \'系统异常\', icon: \'none\' }); console.error(\'发生异常:\', e); } }, },};.login-container { padding: 20px;}
✅ 二、后端:Spring Boot 接收 code
并请求微信服务器
📁 项目结构建议:
com.example.wechatdemo├── controller│ └── WeChatController.java├── service│ └── WeChatService.java├── config│ └── WeChatConfig.java└── dto └── WeChatResponse.java
📄 1. 配置类:WeChatConfig.java
@Component@Configurationpublic class WeChatConfig { // 微信小程序 AppID(在微信公众平台申请) @Value(\"${wechat.appid}\") private String appId; // 微信小程序 AppSecret(在微信公众平台申请) @Value(\"${wechat.secret}\") private String appSecret; // 微信登录凭证校验接口 URL public static final String LOGIN_URL = \"https://api.weixin.qq.com/sns/jscode2session\"; public String getAppId() { return appId; } public String getAppSecret() { return appSecret; }}
💡 在
application.yml
中配置:
wechat: appid: your_appid_here secret: your_appsecret_here
📄 2. 响应对象:WeChatResponse.java
@Data@NoArgsConstructor@AllArgsConstructorpublic class WeChatResponse { private String openid; // 用户唯一标识 private String unionid; // 跨应用统一标识(需绑定开放平台) private String session_key; // 会话密钥 private Integer errcode; // 错误码 private String errmsg; // 错误信息}
📄 3. 服务类:WeChatService.java
@Servicepublic class WeChatService { @Autowired private RestTemplate restTemplate; @Autowired private WeChatConfig weChatConfig; /** * 根据 code 获取微信用户的 openid 和 unionid */ public WeChatResponse getWeChatUserInfo(String code) { String url = String.format(\"%s?appid=%s&secret=%s&js_code=%s&grant_type=authorization_code\", WeChatConfig.LOGIN_URL, weChatConfig.getAppId(), weChatConfig.getAppSecret(), code); ResponseEntity<String> responseEntity = restTemplate.getForEntity(url, String.class); String responseBody = responseEntity.getBody(); ObjectMapper mapper = new ObjectMapper(); try { return mapper.readValue(responseBody, WeChatResponse.class); } catch (Exception e) { throw new RuntimeException(\"解析微信返回数据失败\", e); } }}
📄 4. 控制器类:WeChatController.java
@RestController@RequestMapping(\"/api/wechat\")public class WeChatController { @Autowired private WeChatService weChatService; /** * 接收前端传来的 code,并返回微信用户信息 */ @PostMapping(\"/login\") public ResponseEntity<?> login(@RequestBody Map<String, String> payload) { String code = payload.get(\"code\"); if (code == null || code.isEmpty()) { return ResponseEntity.badRequest().body(Map.of(\"error\", \"缺少登录凭证\")); } WeChatResponse response = weChatService.getWeChatUserInfo(code); if (response.getErrcode() != null && response.getErrcode() != 0) { return ResponseEntity.status(500).body(Map.of(\"error\", response.getErrmsg())); } return ResponseEntity.ok() .body(Map.of( \"openid\", response.getOpenid(), \"unionid\", response.getUnionid() )); }}
📊 三、总结对比表
uni.login()
code
code
到后端jscode2session
openid
和 unionid
openid
unionid
🧭 四、注意事项
code
的时效性session_key
不能暴露给前端,用于后续加密解密操作✅ 最佳实践建议
- 前端使用
uni.getUserProfile
获取用户昵称头像等公开信息 - 使用
uni.login()
获取code
,并由后端换取openid
/unionid
- 不要在前端直接调用微信的
jscode2session
接口 - 后端验证
openid
是否已存在数据库,进行登录或注册逻辑
如需进一步实现 解密用户敏感数据(如手机号) 或 JWT 登录态管理,请继续提问,我可以为你提供完整扩展方案。