（轉）微信掃碼登錄網頁實現原理

掃碼登錄操作過程

• 瀏覽器輸入：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

 

長輪詢代碼結構：

      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的二維碼后，從長連接中獲得客戶端上報給服務器的帳號信息進行展示。並在客戶端點擊確認后，獲得服務器授信的令牌，進行隨后的信息交互過程。 在超時、網絡斷開、其他設備上登錄后，此前獲得的令牌或丟失、或失效，對授權過程形成有效的安全防護。

 

參考

• 微信掃描二維碼登錄網頁是什么原理，前后兩個事件是如何聯系的？

源自：http://www.chenjunxyf.me/wei-xin-sao-miao-er-wei-ma-deng-lu-wang-ye-yuan-li/

 

justcode.ikeepstudying.com