如何接入微信公众号做网站的登录认证

type

status

date

slug

summary

背景

在做自己网站的时候，在国内做登录授权往往需要接入微信相关的登录授权，在这篇文章统一介绍如何接入微信相关的登录授权的流程。

整体流程

对于整个用户的登录流程，可以分为下面几个角色：

用户

Frontend：前端服务

Backend：后端服务

微信官方

上面的流程图介绍了整个授权登录的总体流程，整个流程始于「用户打开登录页面」，结束于「前端页面获取到 access_token，并且保存到前端服务中」，这样就完成了整个用户的登录授权流程，后续对于后端接口的请求，都可以携带 access_token 进行访问，后端再根据请求中的 access_token 进行权限校验的操作。

部分细节

1、微信官方返回的 ticket 以及二维码是怎么样的？

每个二维码可以关联一个唯一的 ticket，相当于这个 ticket 是二维码的身份信息。

ticket 示例：`gQE88DwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAyMkxJTjlUanJlSUUxTXNaQXhCYzIAAgTEOuRlAwRYAgAA`

二维码返回示例：返回一个微信官方的二维码的地址，与 ticket 是一一对应，例如：`https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQE88DwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAyMkxJTjlUanJlSUUxTXNaQXhCYzIAAgTEOuRlAwRYAgAA`

注意：该二维码是一定时间内有效。

2、如果成功扫码二维码后，会触发 [微信官方] —> [配置的回调接口] 的回调，正确解析回调接口的消息，会得到如下消息：

重要参数说明：

FromUserName: 来自于哪一个用户。

Event: "SCAN"，表示当前是扫码事件。对于微信公众号做登录授权比较重要的是：

SCAN: 扫码事件。
subscribe: 订阅公众号。
unsubscribe: 取消订阅。

EventKey：这里是后端服务创建可以根据不同的场景，生成二维码埋入的参数。如果你需要判断用户扫码的场景，那么可以设置不同的 EventKey，微信官方在调用你的回调接口。

Ticket：对应的二维码 Ticket。

3、如何绑定用户扫码行为和 access_token 的对应关系？

具体流程如下，

【前端】用户扫码的二维码，有一个唯一标识 [ticket]。当前端展示该 ticket 的二维码后，就可以一直轮询请求后端的用户扫码结果接口，请求获取 access_token，比如请求接口为 /auth，请求参数为 ticket。

【微信回调】微信在收到用户的扫码确认后，会请求在微信管理后台配置的回调接口，比如：`https://zouying.work/wechat/callback` 接口地址。

【后端】后端服务在接收到微信的回调响应后，就可以给当前用户（FromUserName）生成一个 access_token，并且与 Ticket 进行关连。

当前端携带 ticket 请求后端服务时，则可以返回对应的 access_token。