编辑 | blame | 历史 | 原始文档

微信授权功能使用说明

功能概述

本功能实现了在评价页面中获取微信用户的OpenId、头像、昵称等信息,提升用户体验。

实现的功能

1. 微信授权URL生成

  • 后端接口:GET /evaluation/wechat/authurl
  • 功能:生成微信网页授权URL,使用snsapi_userinfo权限获取用户基本信息

2. 微信用户信息获取

  • 后端接口:GET /evaluation/wechat/userinfo
  • 功能:通过授权码获取微信用户信息,包括:
  • OpenId:用户唯一标识
  • 昵称:用户微信昵称
  • 头像:用户微信头像URL
  • 性别、省份、城市、国家等基本信息

3. 前端自动授权流程

  • 检测微信浏览器环境
  • 自动跳转到微信授权页面
  • 授权成功后自动获取用户信息
  • 自动填充用户昵称到姓名字段

配置要求

1. 微信公众平台配置

application.yml中配置微信AppID和AppSecret:
yaml wechat: appId: your_wechat_appid appSecret: your_wechat_appsecret

2. 微信公众平台网页授权域名配置

需要在微信公众平台后台配置授权回调域名,例如:
- yourdomain.com

使用流程

1. 用户访问评价页面

  • 在微信浏览器中打开评价页面
  • 系统自动检测微信环境

2. 微信授权

  • 如果用户未授权,显示"微信一键登录"按钮
  • 点击按钮跳转到微信授权页面
  • 用户确认授权后返回评价页面

3. 信息自动填充

  • 授权成功后自动获取用户信息
  • 自动填充昵称到姓名字段
  • 显示用户头像和授权状态

4. 手动输入手机号

  • 由于微信网页授权无法直接获取手机号
  • 用户需要手动输入手机号
  • 系统会显示提示信息说明原因

技术实现

后端实现

  1. WechatUtils工具类:封装微信API调用
  2. EvaluationController:提供微信授权相关接口
  3. 网页授权流程:使用OAuth2.0标准流程

前端实现

  1. 自动检测微信环境:通过User-Agent判断
  2. 授权URL生成:动态构建回调地址
  3. 用户信息展示:美观的UI展示授权状态
  4. 错误处理:完善的错误提示和降级方案

注意事项

1. 手机号获取限制

  • 微信网页授权无法直接获取用户手机号
  • 如需获取手机号,需要:
  • 使用微信小程序的getPhoneNumber接口
  • 或使用微信开放平台的手机号快速验证组件

2. 授权域名配置

  • 必须在微信公众平台配置正确的授权回调域名
  • 域名必须与实际访问域名一致

3. HTTPS要求

  • 生产环境必须使用HTTPS协议
  • 微信授权要求安全连接

4. 用户体验优化

  • 提供手动输入选项作为降级方案
  • 清晰的提示信息说明授权状态
  • 响应式设计适配移动端

扩展功能

1. 微信小程序集成

如需在小程序中使用,可以:
- 使用wx.getUserProfile获取用户信息
- 使用wx.getPhoneNumber获取手机号

2. 微信开放平台集成

如需获取更多信息,可以:
- 申请微信开放平台账号
- 使用手机号快速验证组件
- 获取UnionID进行多平台用户统一

测试建议

  1. 功能测试
  • 在微信浏览器中测试完整授权流程
  • 测试授权成功和失败的情况
  • 测试非微信浏览器的降级方案
  1. 兼容性测试
  • 测试不同版本的微信浏览器
  • 测试不同设备的显示效果
  • 测试网络异常情况
  1. 安全性测试
  • 验证授权码的有效性
  • 测试恶意请求的处理
  • 验证用户信息的完整性