微信扫码登录详细教程

一、注册开放平台账户

1、 打开微信开放平台https://open.weixin.qq.com/，点击注册

2、填写个人/企业信息注册

二、网站应用申请

1、注册审核通过后，登录微信开放平台。点击【管理中心】-【网站应用】-【创建网站应用】，注意事项：

• 《网站信息登记表扫描件》需要下载盖章。
• 需要准备【网站应用图片】，公司UI提供即可。（如果域名和注册主体不一致，需要补充授权书）
• 授权回调域：微信开放平台授权回调域名不需要带协议，二级域名即可。例如：www.xxx.com。在后续代码配置的回调地址中，必须在此域名下！

2、网站应用审核通过后，记录AppID和AppSecret信息。

三、网站应用代码集成（VUE3 + SpringBoot）

1、开发参考文档：

• https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

这里提供了两种方式，本次采用 将微信登录二维码内嵌到自己页面，官方文档摘要：

为了满足网站更定制化的需求，我们还提供了第二种获取code的方式，支持网站将微信登录二维码内嵌到自己页面中，用户使用微信扫码授权后通过JS将code返回给网站。 JS微信登录主要用途：网站希望用户在网站内就能完成登录，无需跳转到微信域下登录后再返回，提升微信登录的流畅性与成功率。

2、登录流程图如下：

2.1、账户与微信绑定

2.2、微信扫码登录

3、功能实现

3.1、账户中心微信绑定代码

3.1.1 效果图

3.1.2 前端代码实现

参考：https://github.com/jeecgboot/jeecgboot-vue3

3.1.3 后端代码实现

参考：https://github.com/jeecgboot/jeecg-boot

3.2、登录页代码

3.2.1 前端代码实现

参考：https://github.com/jeecgboot/jeecgboot-vue3

3.2.2 后端代码实现

参考：https://github.com/jeecgboot/jeecg-boot

代码仅供参考，细节根据具体业务调整