微信、淘宝类扫码登录是怎么实现的？

微信、淘宝类扫码登录是怎么实现的？

今天我们就来说说目前比较流行的扫码登录的实现原理。

需求介绍

首先介绍一下什么是扫码登录。 现在，大多数学生的手机上都安装了QQ、淘宝、天猫等软件。 开发这些应用程序的公司都有相应的网站。

为了让用户在使用其网站时更加方便、安全地登录。 这些公司提供允许您通过扫描手机登录的服务。 网页登录效果如下：

很多朋友可能会觉得很神奇，网页上只显示一个二维码，怎么知道是哪部手机扫描了二维码并登录了呢？ 而且，登录完成后，还可以直接将用户信息显示给用户，这实在是太神奇了。

原理解释

网页+服务器

接下来是这个服务的具体实现。 首先简单说一下原理：当用户打开网站登录页面时，向浏览器服务器发送请求，获取登录二维码。 服务器收到请求后，随机生成一个uuid，将这个id作为键值存储在redis服务器中，并设置一个过期时间。 过期后，用户登录时需要刷新并重新获取二维码。

同时将此键值与我们公司的验证字符串结合起来，通过二维码生成接口（二维码生成，网上有很多现成的接口和源码，将此处不再介绍。）然后，将二维码图片和uuid返回给用户浏览器。

浏览器获取到二维码和uuid后，每秒都会向浏览器发送请求是否登录成功。 请求中携带uuid作为当前页面的标识。 这里有些学生会感到惊讶。 服务器只在redis中保存一个uuid作为键值。 怎么会有用户id信息呢？

这里确实会有用户id信息，是手机服务器存储在redis中的。 具体操作如下：

移动端+服务器

也就是说，浏览器获取到二维码后，会在网页上显示该二维码，并提醒用户：请拿出手机，打开扫描登录。用户拿出手机手机扫描二维码获取验证信息和uuid（扫描二维码获取字符串的功能网上也有很多demo，这里就不详细介绍了）。

由于移动端已经登录，所以在移动端访问服务器时，参数中会携带一个用户的token，移动端服务器可以解析为用户的（这里取值是从token中取出的，而不是从token中取出的）直接从移动端传过来，为了安全，直接传的可能会被拦截修改，token经过加密，被修改的风险会小很多）。

手机以解析出的数据和用户token为参数，向服务器发送验证登录请求（这里的服务器是手机服务器，手机服务器与web服务器不是同一台服务器）。 服务器收到请求后，首先比较参数中的验证信息，判断是否为用户登录请求接口。 如果是，则向移动终端返回确认消息。

移动端收到返回后，会向用户显示登录确认框（防止用户误操作，使登录更加人性化）。

用户确认进行登录操作后，手机再次发送请求。 服务器拿到uuid和用户的值后，将用户的值存储在redis中以uuid为键的键值对中。

登陆成功

然后，当浏览器再次发送请求时，浏览器端服务器可以获得用户ID，并调用login方法生成浏览器端token，当浏览器再次发送请求时，将返回用户信息浏览器服务器，登录成功。

之所以在这里存储用户id而不是直接存储用户信息，是因为手机上的用户信息不一定和浏览器上的用户信息完全一样。

登录示意图如下：