微信扫描二维码登录网页是什么原理，前后两个事件是如何联系的？(转)

1. 每打开一次微信网页版页面的时候会随机生成一个含有唯一uid的二维码，每次刷新页面都会不一样（这个可以保证一个uid只可以绑定一个账号和密码，如果一个uid可以绑定多个账号和密码，那么很可能你的电脑会登陆别人的微信哦）；

2. 当用户使用登陆后的微信扫描该二维码的时候，会将这个id和手机上的微信账号及密码绑定，并上传到微信网页版服务器；

3. 微信网页版页面每隔1秒或2秒会get请求该id对应的微信账号及密码，如果id绑定上了微信账号和密码，那么就可以请求到账号和密码，就可以自动登陆了。

1. 在网页生成这个二维码的时候，网页就开始用ajax长轮询，对服务器请求这个UID的扫描记录，如果没有，在特定时长后（目前是27秒左右）会接到状态码408，表示应该继续下一次请求，如果接到201，那么就进入第3步
2. 什么时候有201呢，微信客户端一旦扫描了这个二维码，就会向解出来的网址发起请求，通知扫描成功（当然这个网址做了来源验证）。服务器一接收到这个请求，就从当前的查询长连接里面立即把201返回过去（如果一直没有请求，那么会在30秒内把408返回去，这就是1里面提到的两个状态码的由来）
3. 得到状态码201后，通知服务器，客户端由此也进入一个新的页面（就是那个要你点确认的按钮），原理跟上一步相同（长轮询）。这个时候你只要点击确认，服务器就开始给该客户端的用户进行自动登录，并把用户信息在这一步通过当前的某个上行的长轮询给返回出去。当然返回的方式不再是什么状态码了，而是header里面的Set-Cookie，咋就内容其实也相当于状态码：0OKxxxx
4. 这个时候浏览器就可以成功地用微信认可的任何一种认证方式（通过返回的skey和cookie里面的信息）来请求用户数据了。

1. 首先，扫描二维码只得到字符串而不是网址，避免了鉴权网址外泄
2. 其次，浏览器是能用web socket来和服务器进行通讯的，避免了长轮询（微信是考虑到中国用户的浏览器不支持ws的居多吧。这里可以顺便介绍一下微软的signalR方案，它可以根据客户端浏览器的支持情况进行自动从ws降到long pool，微信团信应该是看到这个需求没多大的意义，干脆直接用最原始的实现吧，毕竟不是做一个库）
3. 更多细节我就懒得跟踪了，哪天自己也有同样的需求再研究吧

附加说一个，腾讯很好，让https://wx.qq.com采用了TLS1.2，TLS1.2可以抵御BEAST等早先TLS版本中出现的弱点

1. 打开微信网页版微信网页版，在浏览器生成二维码，二维码中包含登录信息和服务端给它生成了一个唯一标识码UUID，同时服务端监听服务端登录请求；
   html：
   https://login.weixin.qq.com/qrcode/3aea191f78ec42?t=webwx">
   jslogin.js：
   window.QRLogin.code = 200; window.QRLogin.uuid = "3aea191f78ec42";
2. 在客户端使用扫一扫登录网页版时，此时uid已经登录且有访问授权码access_token信息
3. 扫描网页的二维码，获取到服务器生成的UUID，然后将access_token及UUID发送给服务端
4. 服务端验证通过后，生成登录授权码并且通知网页端
5. 网页端获得授权码后即可向服务器申请用户登录信息，完成登录

在电脑上使用微信时，你可能已经发现微信不提供传统的账号密码登陆，取而代之的是通过扫描二维码进行登陆。今天就要研究下次登陆方式微信时如何实现的？

1、每次用户打开PC端登陆请求，系统返回一个唯一的uid，并将uid的信息绘制成二维码返回给用户。这里的uid一定是唯一的，否则就会造成你登陆了其他用户的账号或者其他用户登陆你的账号。

2、当用户使用登陆后的微信扫描该二维码的时候，会将这个uid和手机上的微信账号及密码产生的token进行绑定，并上传到http://login.weixin.qq.com/。

3、WEB通过JS不断的向后端发起请求，查询有没有关于uid的登陆记录(uid和token是否存在于服务器上)。实现代码可以从微信页面获取：

    function _poll(_asUUID) {
        var _self = arguments.callee,
            _nTime = 0;
        _sCurUUId = _asUUID;
    _logInPage("_poll Request Start, time: " + new Date().getTime());
    _nTime = new Date().getTime();
    $.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) {
        _logInPage("_poll Request Success, code: " + window.code + ", time: " + (new Date().getTime() - _nTime) + "ms");
        switch (_aoWin.code) {
        case 200:
            _sSecondRequestTime = new Date().getTime() - _sSecondRequestTime;
            _logInPage("Second Request Success, time: " + _sSecondRequestTime + "ms");
            clearTimeout(_oResetTimeout);

            $.get(_aoWin.redirect_uri + "&fun=new", function(msg) {
                _logInPage("new func reponse, reponseMsg: " + msg);
                _reportNow("new func reponse, reponseMsg: " + msg);
                var code = msg.match(/<script>(.*)<\/script>/);
                if(code){
                    eval(code[1]);
                }else{
                    $("#container").show();
                    $("#login_container").hide();
                }
            });

            _reportNow("/cgi-bin/mmwebwx-bin/login, Second Request Success, uuid: " + _asUUID + ", time: " + _sSecondRequestTime + "ms");
            break;

        case 201:
            clearTimeout(_oResetTimeout);
            show_tip = 0;
            $('.errorMsg').hide();
            $('.normlDesc').hide();
            $('.successMsg').show();
            _logInPage("First Request Success");
            _reportNow("/cgi-bin/mmwebwx-bin/login, First Request Success, uuid: " + _asUUID);
​
//                setTimeout(function(){

_logInPage("Second Request Start");

_reportNow("/cgi-bin/mmwebwx-bin/login, Second Request Start, uuid: " + _asUUID);
                _sSecondRequestTime = new Date().getTime();

                _nAjaxTimeout = 5 * 1000;
                _self(_asUUID);
​
//                }, 500);

break;
        case 408:
            setTimeout(function(){
                _self(_asUUID);
            }, 500);
            break;

        case 400:
        case 500:
            _reset();
            _afterLoadWebMMDo(function(){
                _aoWin.Log.d("500, Login Poll Svr Exception");
            });
            break;
        }
    },
    error: function(jqXHR, textStatus, errorThrown) {
        if (textStatus == 'timeout') {
            setTimeout(function(){
                _self(_asUUID);
            }, 500);
        } else {
            setTimeout(function(){
                _self(_asUUID);
            }, 5000);

            _logInPage("_poll Request Error:" + textStatus);
            _afterLoadWebMMDo(function(){
                _aoWin.Log.e("Login Poll Error:" + textStatus);
            });
        }
    }
    });
}
​
​

网页客户端每500毫秒就向服务器发起ssl请求，请求当前二维码的登陆信息，如果返回结果201，则说明已经获取扫描二维码终端相同的账号登陆授权，当返回其他结果时，将在500毫秒之后重新发起请求。

类似微信登陆场景应用场景还是很多，比如通过二维码进行设备间的授权。比如使用手机遥控 装有android系统的电视盒等。

看着答案最后就变成讨论到底是长连接还是轮询的问题，然后就偏了，其实具体用什么技术在这里不是特别重要（长连接也好、Server-Sent Event也好、WebSocket也好、轮询也好，这些都只是途径），提主想知道的是这两个事件是怎么联系的。

表面上的步骤如下：

1. [电脑] 打开http://wx.qq.com，得到二维码
2. [手机] 点开扫一扫，扫描PC端二维码，并且扫描成功
3. [电脑] 提示扫描成功，[手机] 询问是否确认登陆
4. [手机] 确认登陆（如果不确认登陆么，[电脑]就还是那样）
5. [电脑] 跳转

其实对应的内部机制差不多是这样的：

1. 电脑请求网页后，微信服务器生成一个唯一的ID（这里是UUID）给客户端网页，客户端定时发起向微信服务器的连接（这里类似于轮询），微信服务器保持这个连接（这里类似于长连接），保持一段时间（大概27秒）返回一个“还没人扫码”的标识，于是客户端再开连接
2. 手机微信扫码并解码，解码出来是一个URL也好，是一段文本也好，总之这段东西匹配了手机微信登陆网页版的要求，于是手机微信带着解码出来的信息去请求微信服务器。这里就已经达到了特定微信账号和某个特定网页相关联的目的
3. 电脑这里微信服务器马上在长连接中返回“有人扫码了”的表示并结束连接，网页提示扫描成功，然后打开长连接等待确认登陆的标识；手机这里么则根据二维码的信息打开对应网页确认登陆
4. 后面其实和前面一样了，手机微信确认登陆的其实就是请求服务器说这个可以登录了，然后服务器给网页的长连接中返回可以登录的标识并结束长连接，然后跳转到消息网页

就算是单一的长连接也是可以的，流程差不多；就算是轮询又怎么样呢（当然服务器开销会大总所周知），大不了就是等到某一条请求下来发现是“有人扫码”然后接下去某一个请求下来是”确认登陆“而已。

这个流程其实是主要的，至于用什么技术是次要的，用什么技术只是手段而已，假设微信这个网页登陆是出现在5年后，那微信肯定会去用标准化的WebSocket。真要讨论的话，微信最后那个还可以不跳转，做成单网页的，这就没有什么讨论的意义了。

以下是我的分析结果，供大家参考，不正确的地方望指正。

用户打开网页版微信: 微信网页版，微信为用户生成了一张包含uuid的二维码,然后前台向后台发送轮询请求，查询此uuid是否已被绑定上登录签名。但如果uuid尚未绑定登录签名，后台不回立即返回结果，而是会阻塞30秒左右，在30秒内仍未扫描成功，后台会返回一个结果码。结果码的值为408，代表微信客户端尚未扫描。

• 发送轮询请求,判断uuid是否绑定了用户的登陆签名

• 如果30秒内用户未扫码，uuid未绑定用户的登陆签名，则后台返回结果码 window.code=408

• 微信客户端请求信息

• 扫码成功界面

• 确认登陆后的网页响应信息

--------------------------------------------------------------------------文毕------------------------------------------------------------

微信自身的扫码登陆功能，也可以通过开放接口，供第三方网站或应用使用。集成微信扫码登陆功能，详见我的上一篇文章二维码登陆。如果不想开发代码，可以到我的个人网站:http://it.maerdym.cn/mm_mishu/.查看已完成的微信扫码登陆功能。近期我会开发微信扫码登陆插件，供大家使用。