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

引 言

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

1 掃碼登錄的原理

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

1.1 掃碼登錄的操作過程

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

(1) 打開瀏覽器，在地址欄輸入 https://wx.qq.com/。

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

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

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

1.2 掃碼登錄原理分析

每次打開微信網(wǎng)頁版時(shí)，網(wǎng)頁都會生成一個(gè)二維碼，雖然二維碼的外觀相似，但每個(gè)二維碼里攜帶的信息均不相同， 且具有一個(gè)全局唯一的身份標(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==

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

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

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

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

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

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

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

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

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

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

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

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

3 改 進(jìn)

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

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

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

4 結(jié) 語

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