石維峰++黃辰

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

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

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

0 引 言

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

1 掃碼登錄的原理

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

1.1 掃碼登錄的操作過(guò)程

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

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

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

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

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

1.2 掃碼登錄原理分析

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

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

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

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

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

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

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

2 掃碼登錄的實(shí)現(xiàn)過(guò)程

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

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

（2）用戶打開(kāi)并登錄手機(jī)客戶端，掃碼二維碼。

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

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

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

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

3 改 進(jìn)

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

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

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

4 結(jié) 語(yǔ)

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

參考文獻(xiàn)

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

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

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

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

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

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

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

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