微信扫码登陆网页实现原理

扫码登陆操做过程

• 浏览器输入：https://wx.qq.com/?lang=zh_CN
• 手机登陆微信，利用“扫一扫”功能扫描网页上的二维码
• 手机扫描成功后，提示“登陆网页版微信”；网页上显示“成功扫描 请在手机点击确认以登陆”
• 手机端点击“登陆网页版微信”，网页跳转到用户的微信操做界面

整个扫码登陆的操做过程仍是挺简单的，并且交互地实时性比较好，若是网络不是很是阻塞，整个过程仍是很是快的。

 

扫码登陆原理

扫码登陆大概的思路是：微信手机客户端从网页二维码里面获得一些信息，而后发送给网页微信的服务器，网页服务器验证信息并响应。下面，咱们借助火狐浏览器提供的Firebug工具看看，究竟是怎么一回事儿吧！

 

1.每次打开微信网页版的时候，都会生成一个含有惟一uid的二维码，并且每次刷新后都会改变。这样能够保证一个uid只能够绑定一个帐号和密码，肯定登陆用户的惟一性。能够经过手机上的UC浏览器提供的扫码功能查看二维码里面的信息，但并不会自动打开该地址。我刷新三次，扫描结果以下，其中最后面那串数字就是uid：

1） https://login.weixin.qq.com/l/48e24d66bdbc4f
2） https://login.weixin.qq.com/l/0787fb4fa7ad4c
3） https://login.weixin.qq.com/l/92781a4a7f1c47

经过查看网页源码，这个页面在加载完毕时，已经把不少登陆后才须要的相关资源都预先加载进来了，因此登陆用户获得确认后展现用户信息的速度很快。

 

2.除了返回惟一的uid，实际上打开这个页面的时候，浏览器跟服务器还建立了一个长链接，请求uid的扫描记录。若是没有，在特定时长后（目前是27秒左右）会接到状态码408（请求超时），表示应该继续下一次请求；若是接到状态码201（服务器建立新资源成功），表示客户端扫描了该二维码。

 

请求超时：返回408

 

扫码成功：返回201

 

长轮询代码结构：

Js代码

 

1. function _poll(_asUUID) {  
2.   // ....  
3.   $.ajax({  
4.     type: "GET",  
5.     url: "https://login." + _sBaseHost + "/cgi-bin/mmwebwx-bin/login?uuid=" + _asUUID + "&tip=" + show_tip,  
6.     dataType: "script",  
7.     cache: false,  
8.     timeout: _nAjaxTimeout,  
9.     success: function(data, textStatus, jqXHR) {  
10.       switch (_aoWin.code) {  
11.       case 200:  
12.         // ....  
13.         break;  
14.       case 201:  
15.         // ....  
16.         break;  
17.       case 408:  
18.         // ....  
19.         break;  
20.       case 400:  
21.       case 500:  
22.         // ....  
23.         break;  
24.       }  
25.     },  
26.     error: function(jqXHR, textStatus, errorThrown) {  
27.         // ....  
28.     }  
29.   });  
30. }  

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) {
              // ....
          }
        });
      }

 

3.当用户使用登陆后的微信扫描二维码的时候，会将uid和手机微信产生的token进行绑定，并上传到服务器。这个时候，浏览器经过长轮询查询到uid扫描记录，当即获得201响应码，而后通知服务器，客户端由此也进入一个新的页面（就是那个要你点确认的按钮）。在客户端点击确认后，得到服务器授信的令牌，进行随后的信息交互过程。

 

结语

总的来讲，微信扫码登陆核心过程应该是这样的：浏览器得到一个惟一的、临时的uid，经过长链接等待客户端扫描带有此uid的二维码后，从长链接中得到客户端上报给服务器的账号信息进行展现。并在客户端点击确认后，得到服务器授信的令牌，进行随后的信息交互过程。 在超时、网络断开、其余设备上登陆后，此前得到的令牌或丢失、或失效，对受权过程造成有效的安全防御。