这个问题我是在今年8月份的时候被问到过，当时一脸懵，当面试官一提出这个问题，我当场回答这个没接触过，可能不知道。面试官笑了笑：这是一个设计题，如果你原本就会的话，我就不会要你来设计了。

我：（苦笑...）凭借三寸不烂之舌和面试官讨论了起来，说完之后信心满满，但结果反手就收到了一份正式地感谢信。

当时，面试官问你还有什么想要问我的吗？ 我请教了这个问题，面试官回答说，你其实也猜到了一点，但是我想要的那个逻辑你没理清楚，然后吧啦吧啦引导了一下，告知可以待会学习一下，这个也挺多人讨论的。

直到今天，又收到了一份“新”的感谢信后，我突然回想到了这个问题，想了想，这个问题不能一直丢着不管，我不去学习，当然不会自然就明白其中原理，下面我们一起来探讨一下吧。

如若有帮助到您，请一键三连，当然，本文表述有问题的地方，欢迎读者指正，也是一个学习的过程，谢谢~

现在大部分手机上都装有微信、qq和淘宝这一类的软件。而这些app都有他们相对应的网页端。为了让用户在使用他们的网页时登录更加方便和安全，使用手机扫一扫就可以登录的服务，就显得自然而然了。

扫码登录时的界面效果如下：

那么，此时问题来了，我们访问某个网页，这个网页怎么就出现了这个二维码呢？有了这个二维码了，它怎么知道是我扫的，还是其它人扫的呢？好神奇啊！当时面试完之后，我就有这个疑惑，下文我们逐一解答。

首先，用户打开网站的登录首页的时候，浏览器就会向对应网页服务器发送获取登录二维码的请求，服务器收到请求后，会随机生成一个 uuid，将这个 uuid 作为key值存入redis服务器，同时设置一个过期时间，一旦过期后，用户登录二维码需要进行刷新重新获取。

同时，将这个key值和公司的验证字符串合在一起，通过二维码生成接口，生成一个二维码的图片。然后，将二维码图片和 uuid 一起返回给用户浏览器。

例如，对于某个登录的网页（我打开的是力扣的微信登录地址），我们习惯性地打开了浏览器的开发者工具，我发现当我在登录页面停滞一小会（大概30秒样子），请求链接会不断发生变化，如下图所示：

其中就有一个字段 uuid，伴随着链接的更新而自增变化。这就很好解释了上文，服务器端会通过这个 uuid 调用相关接口来返回给浏览器一个二维码。

所以，二维码是谁生成的呢？别急，继续分析：

当用户打开网站后，网站后台根据微信 OAuth2.0 协议向微信开发平台请求授权登录，并传递事先在微信开发平台中审核通过的 AppID 和 AppSecrect 等参数

微信开发平台对AppID等参数进行验证，并向网站后台返回二维码

网站后台将二维码传送至网站前端进行显示

原来，还有微信开发平台参与，由它来生成我们的二维码，OK，我们接着下一个问题的思考。

上文我们了解到了二维码的生成，并且在将 uuid 作为key值存入redis服务器，那么只有这个 key 值，哪里来的用户相关信息呢？带着这个思考，继续探讨吧。

上文我们获取了网页二维码，现在来到了用户扫这个二维码的时候了，当用户拿出手机扫描二维码，就可以得到一个验证信息和一个 uuid。由于手机端已经进行过了登录，在访问手机端的服务器的时候，参数中都会携带一个用户的token，手机端服务器可以从中解析到用户的 userId（这里从token中取值而不是手机端直接传userid是为了安全，直接传userid可能会被截获和修改，token是加密的，被修改的风险会小很多）。

手机端将解析到的数据与微信账号绑定，向微信开发平台发送登录验证请求，微信开发平台验证绑定数据，调用网站后台的回调接口，发送授权临时票据 code ，如果授权成功，返回一个确认信息给手机端。

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

这里，我们就拿到了用户的相关信息了。

整个过程从网站后台向微信开发平台请求授权登录开始，最终目的是为了获得 access_token。

在获得了 access_token 后就可以解析用户的一些基本信息，包括头像、用户名、性别、城市等。这样一来，整个微信扫描登录的过程就完成了。

冷血之心的博客：微信扫码登录原理解析

乔戈里：阿里面试官：分别说说微信和淘宝扫码登录背后的实现原理？

微信扫码登录的几秒钟里，到底发生了什么

感谢以上大佬的文章，尊重劳动成果，特此提出原本链接。

文章产出不易，还望各位小伙伴们支持一波！

往期精选：

小狮子前端の笔记仓库

leetcode-javascript：LeetCode 力扣的 JavaScript 解题仓库，前端刷题路线（思维导图）

小伙伴们可以在Issues中提交自己的解题代码，🤝 欢迎Contributing，可打卡刷题，Give a ⭐️ if this project helped you!

访问超逸の博客，方便小伙伴阅读玩耍~