仿微信掃碼登錄系統的實現與改進

石維峰++黃辰

摘 要：網頁版微信剛剛問世時，其獨特的登錄模式就吸引了無數人的眼光，無需輸入用戶名和密碼，只需通過手機客戶端掃一掃便能輕松一鍵登錄。時至今日，不止微信，微博、淘寶乃至其他各種應用，絕大部分都已具有了掃碼登錄功能。文中在介紹掃碼登錄的原理及系統實現的基礎上，還對現有掃碼登錄模式做了一些簡單改進。

關鍵詞：二維碼；掃碼登錄；HTTP；WebSocket

中圖分類號：TP316 文獻標識碼：A 文章編號：2095-1302（2016）12-00-02

0 引 言

掃碼登錄作為一種新的登錄方式，它不僅更為便捷，其不需再次輸入用戶信息直接掃碼登錄的方式更意味著減少了賬戶泄密的風險，相比傳統登錄方式而言更加安全。同時，登錄方式的改變也必將影響到我們生活的點點滴滴，時至今日，掃碼登錄已經走進了千家萬戶。

1 掃碼登錄的原理

掃碼登錄的基本原理是手機客戶端掃描二維碼并從中解析出數據，然后把數據發送給服務器，服務器收到手機客戶端發送來的數據后，對數據進行驗證匹配，瀏覽器根據服務器的響應進行相應操作。我們以網頁版微信為例，借助瀏覽器調試工具，簡略介紹掃碼登錄的實現原理。

1.1 掃碼登錄的操作過程

掃碼登錄的操作過程分為如下幾步：

（1）打開瀏覽器，在地址欄輸入https：//wx.qq.com/。

（2）登錄微信手機客戶端，點擊“掃一掃”，掃描網頁上的二維碼。

（3）瀏覽器與手機客戶端界面幾乎同時跳轉，手機客戶端跳轉到網頁版微信登錄確認界面，電腦上顯示出用戶頭像并提示掃描成功。

（4）手機客戶端點擊“確認登錄”，網頁跳轉到用戶的微信操作界面。

1.2 掃碼登錄原理分析

每次打開微信網頁版時，網頁都會生成一個二維碼，雖然二維碼的外觀相似，但每個二維碼里攜帶的信息均不相同，且具有一個全局唯一的身份標識符，以確定頁面的身份并保證登錄用戶的唯一性。我們連續三次刷新微信登錄界面，使用二維碼解析工具解析網頁上的二維碼，得到的解析結果如下：

https：//login.weixin.qq.com/l/oaRRaUdeBw==

https：//login.weixin.qq.com/l/IaCQ2k3D-g==

https：//login.weixin.qq.com/l/wbnZahDs-w==

由此可以證實我們的推測，每次生成的網頁標識符是唯一的，由此網頁身份也就確定下來。

頁面除了每次生成一個唯一的隨機ID外，還會每隔一定時間就請求服務器來確定該二維碼的掃描狀態，判斷用戶是否進行了掃碼登錄操作。打開瀏覽器的調試工具，我們可以獲得圖1所示的信息。

由圖1可以簡單推斷出頁面的請求周期大約為27 s。當手機客戶端掃碼二維碼時，把得到的ID信息與登錄該手機客戶端的賬號信息綁定，并將該綁定信息上傳給服務器。當頁面查詢到服務器上該ID對應的掃描狀態發生變化時，獲取該ID對應的相關數據，然后頁面跳轉，這樣用戶就可以進行后續操作了。

2 掃碼登錄的實現過程

掃碼登錄的實現過程分為如下幾步：

（1）用戶訪問頁面時，服務器會生成一個全局唯一的ID，并將該信息保存到頁面的二維碼中。

（2）用戶打開并登錄手機客戶端，掃碼二維碼。

（3）手機客戶端將掃描到的二維碼中的信息和登錄該客戶端的用戶信息發送到服務器。

（4）服務器收到手機客戶端發過來的信息后建立相應的映射關系。

（5）當頁面請求到本頁面對應的ID掃描狀態改變時，從服務器中取出相應的數據并加載至頁面。

完成上述五個步驟之后，掃碼登錄基本實現，其業務流程如圖2所示。

3 改 進

在分析掃碼登錄的基本原理時可以發現，以微信為代表的掃碼登錄采用HTTP請求的方式來感知頁面的掃描狀態。每隔一定時間就發起一次HTTP GET請求，一直持續到頁面的掃描狀態發生變化。這樣的處理方式雖然簡單便捷，但當頁面的掃描狀態長時間未發生變化時，會有大量HTTP請求出現，不僅會造成帶寬浪費，還在一定程度上影響到系統的性能。不僅如此，假如請求周期設計不合理，頁面往往不能及時響應用戶的掃碼操作，造成操作失敗，嚴重影響用戶體驗。傳統HTTP請求響應交互圖如圖3所示。

既然頁面主動感知自己的掃描狀態如此困難，那么是否可以由服務器主動通知頁面它的掃描狀態已發生變化呢？答案是肯定的，傳統的HTTP請求僅能實現單向通信，即頁面向服務器發起請求獲取數據，而不能由服務器主動將數據傳遞給頁面。但在HTML5時代，利用WebSocket技術可以輕松實現這個操作。WebSocket請求響應交互圖如圖4所示。

通過WebSocket技術可以更好地優化掃碼登錄流程。當服務器接收到手機客戶端發過來的掃描數據時，無需等待下一次頁面請求便可直接將數據推送到頁面，推動頁面進行后續操作，實現真正意義上的同步跳轉。改進后的掃碼登錄流程如圖5所示。

4 結 語

總體而言，在掃碼登錄時，瀏覽器獲得一個獨一無二的全局性臨時身份標識符，手機客戶端通過掃描二維碼獲取該標識符，并將該標識符與登錄用戶形成的映射關系發送到服務器，服務器接收到手機端發送的數據后通知瀏覽器展示相應信息，并進行隨后的交互過程。隨著科學技術的發展，登錄方式的改變在給人們帶來更加安全便捷的生活體驗的同時，也逐漸改變著人們的生活習慣。相信在不久的未來，隨著各種新技術的應用，我們的明天會更好。

參考文獻

[1] W. Richard Stevens. TCP/IP詳解[M].北京：機械工業出版社，2011.

[2]古爾利.HTTP權威指南[M].北京：人民郵電出版社，2012.

[3]上野·宣.圖解HTTP[M].北京：人民郵電出版社，2014.

[4] Vanessa Wang， Frank Salim. HTML5 WebSocket權威指南[M].北京：機械工業出版社，2014.

[5]郭芝源，李臻，李維龍.基于二維碼的停車場反向尋車系統設計[J].物聯網技術，2015，5（10）：42-43.

[6]楊成，徐藝，鄒永杰，等.基于二維碼的微圖書館系統[J].物聯網技術，2016，6（10）：118-120.

[7]孫曉晨.基于二維碼的景區電子票務系統的設計[D].青島：山東科技大學，2015.

[8]朱明祥，張介.成品件煙連箱問題分析與掃碼系統改進[A].云南省煙草學會學術年會優秀論文集，2015.