手机扫码登录实现原理「建议收藏」

全栈程序员-用户IM • 2022年4月18日下午2:40 • 未分类

大家好，又见面了，我是你们的朋友全栈君。

最近接到一个需求，要求用手机扫码实现用户登录，这是近几年比较流行的登录方式。这样确实是实现用户体验至上，操作简单，方便实用。拿到需求之后，我与后端大哥商量后，敲定了具体的实施方案。其实重要的还是要弄懂他实现的原理。

需求：用户至上的体验效果，手机扫码同步登录状态

很多企业在开发自己app的同时会推出网页版，为了登录操作更方便、更安全。企业会选用手机扫一扫，实现用户登录。神奇的是。为什么网页只显示一个二维码就可以实现用户登录？这个二维码是固定的吗？怎么给用户分配的id？怎么能把手机上的登录信息同步到网页上？
例如：淘宝、京东这些，如何做到扫一扫授权就能登录成功，并实现用户信息同步的。

在这里插入图片描述
下面我们介绍一下手机扫码登录的实现原理，用到的服务器要有2台，手机端服务器和网页端服务器不是同一台服务器。

网页端与服务器

用户打开一个网站的登录页面==>此时浏览器会向服务器发送一个请求，这个请求用来获取登录的二维码==>服务器收到请求后,随机生成一个uuid，并将这个uuid作为key值存储在redis中，同时设置一个过期时间，过期后，用户的界面就会显示“需要重新获取二维码”。同时也将这个key值与本公司的验证字符串绑定在一起，然后将这些生成一个随机的二维码（网上有很多二维码生成器的接口和源码，可以直接调用）==>将二维码和用户的uuid一起返回给浏览器。

前端开发获取到这个这个二维码和uuid==>每隔一秒向浏览器发送一次登录是否成功的请求，请求中携带有uuid作为当前页面的标识符。

这里有一个问题：服务器只存了一个随机的uuid在redis中，那么用户的id的信息怎么会显示出来。其实这个用户的id信息是由手机服务器存在redis中的。这也就为什么要俩台服务器的原因。

手机端与服务器

刚刚我们说了，浏览拿到二维码并且展示在页面上。这个时候前端可以给定一个提示信息。请用手机扫一扫登录。用户拿到手机扫描二维码，就可以得到一个验证信息和一个uuid(扫描二维码获取字符串的这个案例网上也能找到很多)，由于手机端已经进行过登录操作，后端也记录了用户信息，所以在访问手机端服务器的时候，参数中已经携带用户的token，手机端服务器就可以解析用户的uesrid（注意：这里从token中取值而不是手机端直接传userid是为了安全，直接传userid可能会被截获和修改，token是加密的，被修改的风险会小很多）。手机端将解析到的数据和用户token一起作为参数，向服务器发送验证登录请求（这里的服务器是手机服务器，手机端的服务器跟网页端服务器不是同一台服务器）。服务器收到请求后，首先对比参数中的验证信息，确定是否为用户登录请求接口。如果是，返回一个确认信息给手机端。

手机端收到返回后，将登录确认框显示给用户（防止用户误操作，同时使登录更加人性化）。用户在手机上确认是进行的登录操作后，手机再次发送请求。服务器拿到uuId和userId后，将用户的userid作为value值存入redis中以uuid作为key的键值对中。