引 言

掃碼登錄作為一種新的登錄方式，它不僅更為便捷，其不需再次輸入用戶信息直接掃碼登錄的方式更意味著減少了賬戶泄密的風(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) 打開瀏覽器，在地址欄輸入 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 掃碼登錄原理分析

每次打開微信網(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)行了掃碼登錄操作。打開瀏覽器的調(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) 用戶打開并登錄手機(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è)面。

40 物聯(lián)網(wǎng)技術(shù) 2016年 / 第12期

完成上述五個(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ì)更好。