怎么实现微信扫码登录

最近在给企业健康管理系统做一个微信扫码登录的功能，借此机会总结下微信登录这个技术点。

网站应用微信登录是基于 OAuth2.0 协议标准构建的。OAuth 协议规范了五种授权模式，Authorization Code、PKCE、Client CreDentials、Device Code 和 Refresh Token。微信目前只支持 authorization_code 模式。

微信网站应用接入基础知识

第一步需要先到微信开放平台注册一个开发者账号，并创建一个微信登录网站应用，然后获得AppID 和 AppSecret。

微信的authorization_code模式：

1. 发起微信授权登录请求

// 请求格式
https://open.weixin.qq.com/connect/oauth2/authorize
?appid=xxx
&redirect_uri=xx-server-api
&response_type=code
&scope=snsapi_userinfo
&state=xxx
&connect_redirect=1#wechat_redirect

2. 用户扫码授权之后，微信会重定向到回调地址并且给予一个临时票据code;
3. 后端拿code 、AppID和AppSecret通过 API 换取access_token;
4. 通过access_token进行接口调用，换取用户基本信息
5. 根据用户信息中的 openId 查询是否已经和系统用户绑定

流程图：

关于 state 参数：

state参数： state 参数会在用户授权成功后和code一起携带给 redirect URL。主要用来做 CSRF 防范。

redirect_url?code=CODE&state=STATE

关于 code:
Code 的超时时间为 10 分钟，一个 code 只能成功换取一个 access_token 即失效。

关于展示形式

微信登录有两种展示形式，一种是弹窗打开登录二维码,另一种是将二维码嵌套在自己网页内。

我们的设计

交互流程

前端工作流程：

1、二维码展示，请求/wechat/qrcode 地址获取二维码地址，返回的参数有 state 字段（重要）。

Note:后端生成一个 uuid state，并存储在 Redis 中用来检测用户的扫码状态

2、在当前二维码页面轮询/wechat/qrcode/status/{state} 接口，判断是否已授权、未绑定、已绑定三种状态。

1）未授权，继续轮询

2）已授权已绑定，根据/wechat/qrcode/status/{state} 接口返回的租户、登录凭证，调用登录接口/login/wechat。

3）已授权未绑定，进去用户绑定微信流程

> 用户绑定微信流程
请求/wechat/bind/sms/send 接口，发送用户绑定微信的验证码
请求/wechat/bind 接口，绑定用户。
根据/wechat/bind 接口返回的租户、凭证信息，调用登录接口/login/wechat。

参考文档

网站应用微信登录开发指南

博客原文

iloveu.xyz/2023/04/25/…