http://justcoding.iteye.com/blog/2213661

掃碼登入操作過程

• 手機登入微信，利用“掃一掃”功能掃描網頁上的二維碼
• 手機掃描成功後，提示“登入網頁版微信”；網頁上顯示“成功掃描 請在手機點選確認以登入”
• 手機端點選“登入網頁版微信”，網頁跳轉到使用者的微信操作介面

整個掃碼登入的操作過程還是挺簡單的，而且互動地實時性比較好，如果網路不是非常阻塞，整個過程還是非常快的。

掃碼登入原理

掃碼登入大概的思路是：微信手機客戶端從網頁二維碼裡面得到一些資訊，然後傳送給網頁微信的伺服器，網頁伺服器驗證資訊並響應。下面，我們藉助火狐瀏覽器提供的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

長輪詢程式碼結構：

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. }  

3.當用戶使用登入後的微信掃描二維碼的時候，會將uid和手機微信產生的token進行繫結，並上傳到伺服器。這個時候，瀏覽器通過長輪詢查詢到uid掃描記錄，立即得到201響應碼，然後通知伺服器，客戶端由此也進入一個新的頁面（就是那個要你點確認的按鈕）。在客戶端點選確認後，獲得伺服器授信的令牌，進行隨後的資訊互動過程。

結語

總的來說，微信掃碼登入核心過程應該是這樣的：瀏覽器獲得一個唯一的、臨時的uid，通過長連線等待客戶端掃描帶有此uid的二維碼後，從長連線中獲得客戶端上報給伺服器的帳號資訊進行展示。並在客戶端點選確認後，獲得伺服器授信的令牌，進行隨後的資訊互動過程。 在超時、網路斷開、其他裝置上登入後，此前獲得的令牌或丟失、或失效，對授權過程形成有效的安全防護。

參考