微信掃碼登陸網頁實現原理

掃碼登陸操做過程

• 瀏覽器輸入：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的二維碼後，從長鏈接中得到客戶端上報給服務器的賬號信息進行展現。並在客戶端點擊確認後，得到服務器授信的令牌，進行隨後的信息交互過程。 在超時、網絡斷開、其餘設備上登陸後，此前得到的令牌或丟失、或失效，對受權過程造成有效的安全防禦。