[技术博客] 小程序扫码登录网页端原理

作者：雨飞

一、问题引入

在设计用于管理社团信息的网页端时，我们需要解决的一个问题是怎样让社团管理员很方便地登录到管理平台中去。出于提高用户体验角度的考虑，我们的小程序在用户第一次登录时，只需要微信授权获得身份信息，就可以自动完成注册和登录流程，用户无需手动输入密码或创建新的账号，一切都是与微信绑定的。这种做法固然方便，但缺点在于登录流程和微信环境高度绑定，脱离微信环境之后再想获取并验证用户的身份信息就比较困难。

最后我们选择了在网页端设置小程序扫码登录，用户只需要打开我们的小程序，在“我的”页面中点击“扫描二维码”，便可以自动登录到网页端社团数据管理平台。在实现这个功能的过程中，我们遇到了一些问题，这些问题在经历了一段时间的学习研究之后得以解决，我们觉得有必要在此把解决问题的过程记录下来，作为技术博客。因此有了这篇文章。

二、几个难题

1. 网页端是怎么知道哪个用户扫描的二维码？

这是很多人在第一次看到”扫码登录“这种登录方式时的第一反应。的确，这个过程看起来有点神奇，网页上只是显示了一个二维码而已，为什么小程序扫码之后，网页端就知道是哪个用户扫描的二维码呢？如果我们要自己去实现这个功能的话，也必然面临着同样的问题。

2. 小程序扫码，扫出来的是什么东西？

第二个问题实际上是由第一个问题引出的。既然网页端不需要任何额外信息就能知道是哪个用户扫描的二维码，那么二维码里就必然包含着对识别用户身份至关重要的信息。这里面的信息具体有哪些内容？这也是我们着重要解决的事情。

3. 小程序扫到二维码以后，做了什么事情，怎么和网页端通讯的？

从用户体验的角度来看，小程序扫码登录是一件十分自然的事情：网页端显示二维码，小程序扫码，网页端便可以正常登录。然而小程序扫码之后，网页端怎么知道小程序已经扫码了？小程序是如何把自身存储的用户信息发送给网页端的？只有解决这些问题，扫码登录的流程才可以说是被真正打通。

三、解决方案

1. 至关重要的uuid

uuid（通用唯一识别码）是解决以上难题的关键。其实扫码登录的根本难题在于如何在小程序和网页端之间共享用户的身份信息，因此势必需要一个识别码来进行网页端和小程序的通信绑定。

后端服务器对外提供一个接口，网页端每次访问这个接口，都会获得一个全局唯一的uuid。网页端获取uuid之后，将其转换为二维码展示在页面上，二维码包含且只包含这个uuid。

我们使用了qrcode.react作为网页端生成二维码的组件。

2. 用户信息与uuid的绑定

后端服务器生成uuid之后，便会将这个uuid存入redis缓存中。小程序扫描到带有uuid信息的二维码，获得用户身份信息之后，访问服务器的另一个接口，将用户信息和uuid一起发送给后端。后端把身份信息与刚刚存入redis的uuid绑定在一起，由此完成用户信息和uuid（也即二维码）的绑定。

3. 网页端轮询uuid，直至获取到用户身份信息

网页端知道，在未来的某一时刻，小程序会把当前登录用户的身份信息和uuid绑定在一起，因此网页端只需要不断轮询后端服务器，并把自己的uuid作为参数，就可以知道uuid是否已经绑定了用户信息。如果还未绑定，则等待直至uuid失效；如果已绑定，就使用该身份信息登录。至此，扫码登录的流程全部打通。

四、一些技术细节

1. redis在存储uuid时，出于安全考虑，必须设置过期时间
2. 网页端轮询时，需要注意轮询时间间隔，避免对服务器造成过大压力
3. uuid一旦与用户身份信息绑定，一次使用后则需失效，否则会带来安全隐患