我的刷题小网站是如何实现微信扫码登录的（附源码哟）

有伙伴询问方才，问方才的个人网站是如何实现关注公众号注册登录的。

那今天方才给大家分享下，个人网站如何集成微信公众号实现注册登录的功能()。

先简单看下效果，在网页端提供公众号二维码，用户扫码关注后，对话框发送666即可获得登录验证码，完成微信公众号关注登录功能。

image-20250620213203844

实现原理

实现原理是比较简单的，本质是基于微信提供的开放接口，获取用户在当前公众号下的唯一标识，即OpenID，从而完成用户的注册或者快速登录（ps：接口地址：微信公众号接口地址，使用两个接口，接受普通消息+被动回复用户消息）。

交互时序图如下：

ps：这个时序图是course帮我生成的，哈哈，附上提示词，供大家参考：

帮我绘制时序图，描述如下：
对象：
用户
方才coding-学习网站
微信服务端

交互：
1. 用户访问方才coding，点击登录，扫码关注方才的公众号；
2. 用户在微信公众号发送666关键字，微信服务端携带用户openId将消息推送到方才coding服务端；
3. 服务端随机生成当前未被使用的验证码，缓存验证，key：验证码，Value：用户的openId，并将验证码回复给用户；
4. 用户在pc端输入验证码，服务端从缓存中获取，基于用户的openId注册或登录；

其他方案

上面的方案，用户需要输入两次，需要先在公众号后台回复666，然后在pc端输入验证码，体验会差点，那能否优化呢？

其实是可以的，只需要实现一种服务端推送消息至客户端的机制即可（或者说客户端定时获取最新消息也行）。

时序图如下：

这个方案的不同点，在于需要实现服务端和客户端的主动通信，方式有3种：

1. 1. 基于WebSocket，好处能实现服务端和客户端的实时双工通信，缺点是技术复杂度高；
2. 2. 基于Server-Sent Events (SSE)，能实现服务端主动向客户端推送消息（只能是单向的），能满足该场景，技术复杂度也低；
3. 3. 最后一个是AJAX 轮询，由客户端起一个定时任务，主动定时请求服务端，获取最新消息，实现是最简单的，当然对性能有损耗，不适合海量用户的场景。

方才的实现就偷懒了下，哈哈，需要用户输入两次，但技术方案上也是最简单、性能最好的。

相关的源码方才都是开源了的（开源地址：https://gitee.com/fangcaicoding/fangcai-coding-blog），从 WechatController开始阅读即可：

image-20250620222425161