经常浏览网站的小伙伴们可能发现了，许多网站都支持微信扫码的方式登录。那么微信扫码登录的工作原理和流程到底是怎么样的呢？本文将从一个公众号初学者的角度，分析并实现网站接入微信扫码登录的功能。本站的扫码登录功能就是基于此改进实现的。

1.分析原理

要实现网站的微信扫码自动登录功能，首先需要的肯定是二维码，那么二维码如何能够区分每一个扫码用户的身份呢？这里肯定是采用带有参数的二维码。进入登录界面首先使用特定参数生成二维码，并展示给用户，用户通过此二维码扫码关注公众号时，公众号服务器会收到一个事件推送消息，其中就有二维码的参数值。那么现在的问题就是如何生成带有参数的二维码，如何在微信服务器上接收二维码的参数值，以及如何反馈给网站说明用户已经扫码。

2.参考文档

生成带有参数的二维码
接收事件推送
通过以上官方文档我们已经解决了前两个问题，那么最后一个问题就是如何在网站上得知用户是否扫码。我这里提供一种简单的解决思路：在公众号服务器接收到用户扫码的事件后，可以将二维码的ticket作为键，用户的openid作为值存储在redis中。然后前端通过轮询的方式像服务器请求redis是否存在当前的ticket值，如果存在则能拿到对应用户的openid，即微信用户的唯一标识，随后编写登录注册的规则。

3.获取access_token

需要在微信公众平台将自己服务器的ip地址放入白名单。

export const getStableAccessToken=async (): Promise<object>=>{
	try{
		let url='https://api.weixin.qq.com/cgi-bin/stable_token';
		const res=await api.mx_post(url,{
			grant_type:'client_credential',  // 固定写法
			appid,  // 公众号appid
			secret,  // 公众号secret
		})
		return res;
	}catch(e){
		throw new ErrorPlus('获取access_token失败')
	}
} 

4.生成带有参数的二维码

5.公众号服务器接收ticket

当前端用户扫码二维码，公众号服务器就会收到一个事件消息。
这里同样用到往期文章提到的co-wechat模块处理事件消息：

import wechat from 'co-wechat';
const wechat_server=async (message:any,ctx:Context)=>{
	  	const {Ticket,FromUserName} = message;
	  	// 微信输入信息就是这个 message
		if(Ticket){  // 如果有场景码 则表示是扫码事件
		    await redis.set(Ticket,FromUserName,'EX',2*60);  // 存入redis
			if(message.Event==='SCAN'){
				return '扫码登录成功！'  // 提示用户信息
			}
		}
}
router.all('/wechat',wechat(wx_config).middleware(wechat_server));

6.js轮询检查