某跳动面试官：说说微信扫码登陆背后的实现原理？

引言

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

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

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

直到今天，又收到了一份“新”的感谢信后，我忽然回想到了这个问题，想了想，这个问题不能一直丢着无论，我不去学习，固然不会天然就明白其中原理，下面咱们一块儿来探讨一下吧。git

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

基本技术原理

扫码登陆功能究竟是什么样的？

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

扫码登陆时的界面效果以下：redis

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

二维码是怎么出现的？

首先，用户打开网站的登陆首页的时候，浏览器就会向对应网页服务器发送获取登陆二维码的请求，服务器收到请求后，会随机生成一个 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的键值对中。

网站后台接收到code，代表微信开发平台赞成数据请求
网站后台根据code参数，再加上AppID和AppSecret请求微信开发平台换取 access_token
微信开发平台验证参数，并返回 access_token
网站后台收到 access_token 后便可进行参数分析得到用户帐号数据

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

AppID：应用惟一标识，在微信开放平台提交应用审核经过后得到
AppSecret：应用密钥，在微信开放平台提交应用审核经过后得到
code：受权临时票据，第三方经过code进行获取access_token的时候须要用到，code的超时时间为10分钟，一个code只能成功换取一次access_token 即失效。code的临时性和一次性保障了微信受权登陆的安全性。
access_token：用户受权第三方应用发起接口调用的凭证

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

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

整个过程流程图

本文参考

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

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

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

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

最后

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

往期精选：

小狮子前端の笔记仓库

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

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

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

学如逆水行舟，不进则退
复制代码