引言

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

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

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


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

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

基本技术原理

扫码登录功能到底是什么样的?

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

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

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

二维码是怎么出现的?

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

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

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

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

所以,二维码是谁生成的呢?别急,继续分析:

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

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

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

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

怎么知道是我扫了这个二维码?

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

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

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

手机端收到返回后,将登录确认框显示给用户(防止用户误操作,同时使登录更加人性化)。用户确认是进行的登录操作后,手机再次发送请求。服务器拿到 uuIduserId 后,将用户的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!

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

学如逆水行舟,不进则退