摘要：东隅已逝，桑榆非晚。 —王勃-

由于学校的毕设又是经典的XXX系统，免不了要做一套用户管理，而传统的账号密码登录操作麻烦，毫无新意，所以决定尝试一下为自己的系统搭配微信扫码登录系统。
项目地址：CTS毕设系统

1.准备工作

1.一个VUE前端
2.一个Websocket服务器
3.一个微信小程序

2.二维码从何而来

要解决这个问题，我们首先要明确我们的扫码工具，由于这里使用微信扫码，那么只能从微信下手。
在了解到微信的开发API后，笔者初步决定从微信公众号下手，而由于从公众号平台获取二维码图片需要微信认证，也就是无法以个人身份使用，遂弃之。
进一步翻阅文档后，发现微信小程序开放了可以获取带参数二维码的接口，于是从此下手。

2.1获取二维码

在确定好工具后，我们先去申请一个微信小程序，这里不再赘述。
翻开微信小程序的开发文档后，我们可以看到这样一个接口：

根据文档说明很快可以获取一张带参数的二维码图片，参数的作用后文在做叙述。

2.2二维码展示

二维码有了，我们需要将其展示在我们的网站上供用户去扫描使用，此处不去详细介绍如何展示，只提供几个笔者的思路：
1.直接在前端发起GET请求获取，这样比较简单方便，但是会将你的微信鉴权信息直接展示在前端中，缺乏安全性。
2.在后端服务器获取再将图片传递给前端，这样会比较安全也符合一般软件开发流程。 笔者因为届时持有一个服务器，所以是将图片上传至一个文件存储系统中，在通过一个URL链接将图片加载至前端页面上。

3.小程序与web页面

在开发时，不难发现小程序页面与web页面是两个独立的个体，那么就会出现这样一个问题：
假设此时A与B同时打开了我们的网站准备扫码登录，当用户A扫描了二维码而用户B还未扫码时，我们如何控制此时做出反应的前端页面是A打开的页面，而并非B打开的页面时。
可以看出来，这里我们需要在微信小程序和前端页面之间做一个双向绑定，此时便需要一个websocket服务器来完成双方之间的通信与绑定。

3.1.双向绑定

上文提到，我们的二维码是可以携带参数，那么此时这个参数便是我们做文章的入口，直接说思路： 在用户登录前端页面，进行获取登录二维码的操作后，同时我们前端作为客户端连接websocket服务器，并在websocket服务器中生成一个唯一ID作为标识。这个标识将作为我们的参数加入二维码中。 这样，在用户扫描二维码进入小程序中后，我们就可以从小程序中读取到这个唯一标识，那么我们再将用户的微信个人信息发送到以这个对应ID的socket客户端便完成了信息的传递。

4.总体思路图