仿微信掃碼登錄系統(tǒng)的實現(xiàn)與改進

石維峰++黃辰

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

關(guān)鍵詞：二維碼；掃碼登錄；HTTP；WebSocket

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

0 引 言

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

1 掃碼登錄的原理

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

1.1 掃碼登錄的操作過程

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

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

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

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

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

1.2 掃碼登錄原理分析

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

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

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

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

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

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

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

2 掃碼登錄的實現(xiàn)過程

掃碼登錄的實現(xiàn)過程分為如下幾步：

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

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

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

（4）服務(wù)器收到手機客戶端發(fā)過來的信息后建立相應(yīng)的映射關(guān)系。

（5）當(dāng)頁面請求到本頁面對應(yīng)的ID掃描狀態(tài)改變時，從服務(wù)器中取出相應(yīng)的數(shù)據(jù)并加載至頁面。

完成上述五個步驟之后，掃碼登錄基本實現(xiàn)，其業(yè)務(wù)流程如圖2所示。

3 改 進

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

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

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

4 結(jié) 語

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

參考文獻

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

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

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

[4] Vanessa Wang， Frank Salim. HTML5 WebSocket權(quán)威指南[M].北京：機械工業(yè)出版社，2014.

[5]郭芝源，李臻，李維龍.基于二維碼的停車場反向?qū)ぼ囅到y(tǒng)設(shè)計[J].物聯(lián)網(wǎng)技術(shù)，2015，5（10）：42-43.

[6]楊成，徐藝，鄒永杰，等.基于二維碼的微圖書館系統(tǒng)[J].物聯(lián)網(wǎng)技術(shù)，2016，6（10）：118-120.

[7]孫曉晨.基于二維碼的景區(qū)電子票務(wù)系統(tǒng)的設(shè)計[D].青島：山東科技大學(xué)，2015.

[8]朱明祥，張介.成品件煙連箱問題分析與掃碼系統(tǒng)改進[A].云南省煙草學(xué)會學(xué)術(shù)年會優(yōu)秀論文集，2015.