原文地址：http://blogread.cn/it/article/7472?f=wb
前天参加了腾讯的一个面试，面试官除了提到前端的一些基础问题，还问了不少前端安全方面的知识，以及一些实际应用的设计思路。整个面试过程中，面试官不断地抛问题，而且很多问题都是点到为止。对于一些比较难的问题，也没有任何提示，回答对错也不告诉你，更不会跟你讲解这个问题到底是如何解决的！难道是为了节省面试时间吗？面试中，问了这么一道题：“微信手机客户端扫面二维码实现网页登录原理是什么？”。当时，答得比较乱。问题本身还是挺有意思的，于是今天好好研究了下！
一. 扫码登录操作过程
- 浏览器输入：https://wx.qq.com/?lang=zh_CN
- 手机登录微信，利用“扫一扫”功能扫描网页上的二维码
- 手机扫描成功后，提示“登录网页版微信”；网页上显示“成功扫描 请在手机点击确认以登录”
- 手机端点击“登录网页版微信”，网页跳转到用户的微信操作界面
整个扫码登录的操作过程还是挺简单的，而且交互地实时性比较好，如果网络不是非常阻塞，整个过程还是非常快的。
二. 扫码登录原理
扫码登录大概的思路是：微信手机客户端从网页二维码里面得到一些信息，然后发送给网页微信的服务器，网页服务器验证信息并响应。下面，我们借助火狐浏览器提供的Firebug工具看看，到底是怎么一回事儿吧！
-
每次打开微信网页版的时候，都会生成一个含有唯一uid的二维码，而且每次刷新后都会改变。这样可以保证一个uid只可以绑定一个账号和密码，确定登录用户的唯一性。可以通过手机上的UC浏览器提供的扫码功能查看二维码里面的信息，但并不会自动打开该地址。我刷新三次，扫描结果如下，其中最后面那串数字就是uid：
https://login.weixin.qq.com/l/48e24d66bdbc4f
https://login.weixin.qq.com/l/0787fb4fa7ad4c
https://login.weixin.qq.com/l/92781a4a7f1c47
通过查看网页源码，这个页面在加载完毕时，已经把很多登录后才需要的相关资源都预先加载进来了，所以登录用户得到确认后展示用户信息的速度很快。
-
除了返回唯一的uid，实际上打开这个页面的时候，浏览器跟服务器还创建了一个长连接，请求uid的扫描记录。如果没有，在特定时长后(目前是27秒左右)会接到状态码408(请求超时)，表示应该继续下一次请求；如果接到状态码201(服务器创建新资源成功)，表示客户端扫描了该二维码。
请求超时：返回408
http://ww2.sinaimg.cn/mw1024/621f4ed4jw1f3odp55fz8j20sg02v3zf.jpg
扫码成功：返回201
http://ww2.sinaimg.cn/mw1024/621f4ed4jw1f3odp5b6yjj20sg03e0tw.jpg
长轮询代码结构：
function _poll(_asUUID) {
$.ajax({
type: "GET",
url: "https://login." + _sBaseHost + "/cgi-bin/mmwebwx-bin/login?uuid=" + _asUUID + "&tip=" + show_tip,
dataType: "script",
cache: false,
timeout: _nAjaxTimeout,
success: function(data, textStatus, jqXHR) {
switch (_aoWin.code) {
case 200:
// ....
break;
case 201:
// ....
break;
case 408:
// ....
break;
case 400:
case 500:
// ....
break;
}
},
error: function(jqXHR, textStatus, errorThrown) {
// ....
}
});
}
- 当用户使用登录后的微信扫描二维码的时候，会将uid和手机微信产生的token进行绑定，并上传到服务器。这个时候，浏览器通过长轮询查询到uid扫描记录，立即得到201响应码，然后通知服务器，客户端由此也进入一个新的页面(就是那个要你点确认的按钮)。在客户端点击确认后，获得服务器授信的令牌，进行随后的信息交互过程。
三.结语
总的来说，微信扫码登录核心过程应该是这样的：浏览器获得一个唯一的、临时的uid，通过长连接等待客户端扫描带有此uid的二维码后，从长连接中获得客户端上报给服务器的帐号信息进行展示。并在客户端点击确认后，获得服务器授信的令牌，进行随后的信息交互过程。 在超时、网络断开、其他设备上登录后，此前获得的令牌或丢失、或失效，对授权过程形成有效的安全防护。
网友评论