二維碼登錄背后的技術(shù)和邏輯解析

在日常生活中，二維碼出現(xiàn)在很多場(chǎng)景，比如超市支付、系統(tǒng)登錄、應(yīng)用下載等等。了解二維碼的原理，可以為技術(shù)人員在技術(shù)選型時(shí)提供新的思路。對(duì)于非技術(shù)人員呢，除了解惑，還可以引導(dǎo)他更好地辨別生活中遇到的各種二維碼，防止上當(dāng)受騙。

二維碼，大家再熟悉不過(guò)了

購(gòu)物掃個(gè)碼，吃飯掃個(gè)碼，坐公交也掃個(gè)碼

在掃碼的過(guò)程中，大家可能會(huì)有疑問(wèn)：這二維碼安全嗎？會(huì)不會(huì)泄漏我的個(gè)人信息？更深度的用戶(hù)還會(huì)考慮：我的系統(tǒng)是不是也可以搞一個(gè)二維碼來(lái)推廣呢？

這時(shí)候就需要了解一下二維碼背后的技術(shù)和邏輯了！

二維碼最常用的場(chǎng)景之一就是通過(guò)手機(jī)端應(yīng)用掃描PC或者WEB端的二維碼，來(lái)登錄同一個(gè)系統(tǒng)。比如手機(jī)微信掃碼登錄PC端微信，手機(jī)淘寶掃碼登錄PC端淘寶。那么就讓我們來(lái)看一下，二維碼登錄是怎么操作的！

二維碼登錄的本質(zhì)

二維碼登錄本質(zhì)上也是一種登錄認(rèn)證方式。既然是登錄認(rèn)證，要做的也就兩件事情！

告訴系統(tǒng)我是誰(shuí)

向系統(tǒng)證明我是誰(shuí)

比如賬號(hào)密碼登錄，賬號(hào)就是告訴系統(tǒng)我是誰(shuí)， 密碼就是向系統(tǒng)證明我是誰(shuí); 比如手機(jī)驗(yàn)證碼登錄，手機(jī)號(hào)就是告訴系統(tǒng)我是誰(shuí)，驗(yàn)證碼就是向系統(tǒng)證明我是誰(shuí);

那么掃碼登錄是怎么做到這兩件事情的呢？我們一起來(lái)考慮一下

手機(jī)端應(yīng)用掃PC端二維碼，手機(jī)端確認(rèn)后，賬號(hào)就在PC端登錄成功了！這里，PC端登錄的賬號(hào)肯定與手機(jī)端是同一個(gè)賬號(hào)。不可能手機(jī)端登錄的是賬號(hào)A，而掃碼登錄以后，PC端登錄的是賬號(hào)B。

所以，第一件事情，告訴系統(tǒng)我是誰(shuí)，是比較清楚的！

通過(guò)掃描二維碼，把手機(jī)端的賬號(hào)信息傳遞到PC端，至于是怎么傳的，我們后面再說(shuō)

第二件事情，向系統(tǒng)證明我是誰(shuí)。掃碼登錄過(guò)程中，用戶(hù)并沒(méi)有去輸入密碼，也沒(méi)有輸入驗(yàn)證碼，或者其他什么碼。那是怎么證明的呢？

有些同學(xué)會(huì)想到，是不是掃碼過(guò)程中，把密碼傳到了PC端呢？但這是不可能的。因?yàn)槟菢犹话踩?，客?hù)端也根本不會(huì)去存儲(chǔ)密碼。我們仔細(xì)想一下，其實(shí)手機(jī)端APP它是已經(jīng)登錄過(guò)的，就是說(shuō)手機(jī)端是已經(jīng)通過(guò)登錄認(rèn)證。所說(shuō)只要掃碼確認(rèn)是這個(gè)手機(jī)且是這個(gè)賬號(hào)操作的，其實(shí)就能間接證明我誰(shuí)。

認(rèn)識(shí)二維碼

那么如何做確認(rèn)呢？我們后面會(huì)詳細(xì)說(shuō)明，在這之前我們需要先認(rèn)識(shí)一下二維碼！在認(rèn)識(shí)二維碼之前我們先看一下一維碼！

所謂一維碼，也就是條形碼，超市里的條形碼--這個(gè)相信大家都非常熟悉，條形碼實(shí)際上就是一串?dāng)?shù)字，它上面存儲(chǔ)了商品的序列號(hào)。

二維碼其實(shí)與條形碼類(lèi)似，只不過(guò)它存儲(chǔ)的不一定是數(shù)字，還可以是任何的字符串，你可以認(rèn)為，它就是字符串的另外一種表現(xiàn)形式，

在搜索引擎中搜索二維碼，你可以找到很多在線(xiàn)生成二維碼的工具網(wǎng)站，這些網(wǎng)站可以提供字符串與二維碼之間相互轉(zhuǎn)換的功能，比如 草料二維碼網(wǎng)站：https://cli.im/

在左邊的輸入框就可以輸入你的內(nèi)容，它可以是文本、網(wǎng)址，文件........。然后就可以生成代表它們的二維碼

你也可以把二維碼上傳，進(jìn)行”解碼“，然后就可以解析出二維碼代表的含義

系統(tǒng)認(rèn)證機(jī)制

認(rèn)識(shí)了二維碼，我們了解一下移動(dòng)互聯(lián)網(wǎng)下的系統(tǒng)認(rèn)證機(jī)制。

前面我們說(shuō)過(guò)，為了安全，手機(jī)端它是不會(huì)存儲(chǔ)你的登錄密碼的。但是在日常使用過(guò)程中，我們應(yīng)該會(huì)注意到，只有在你的應(yīng)用下載下來(lái)后，第一次登錄的時(shí)候，才需要進(jìn)行一個(gè)賬號(hào)密碼的登錄， 那之后呢 即使這個(gè)應(yīng)用進(jìn)程被殺掉，或者手機(jī)重啟，都是不需要再次輸入賬號(hào)密碼的，它可以自動(dòng)登錄。

其實(shí)這背后就是一套基于token的認(rèn)證機(jī)制，我們來(lái)看一下這套機(jī)制是怎么運(yùn)行的，

賬號(hào)密碼登錄時(shí)，客戶(hù)端會(huì)將設(shè)備信息一起傳遞給服務(wù)端，

如果賬號(hào)密碼校驗(yàn)通過(guò)，服務(wù)端會(huì)把賬號(hào)與設(shè)備進(jìn)行一個(gè)綁定，存在一個(gè)數(shù)據(jù)結(jié)構(gòu)中，這個(gè)數(shù)據(jù)結(jié)構(gòu)中包含了賬號(hào)ID，設(shè)備ID，設(shè)備類(lèi)型等等

?

?

const?token?=?{
??acountid:'賬號(hào)ID',
??deviceid:'登錄的設(shè)備ID',
??deviceType:'設(shè)備類(lèi)型，如?iso,android,pc......',
}

?

?

然后服務(wù)端會(huì)生成一個(gè)token，用它來(lái)映射數(shù)據(jù)結(jié)構(gòu)，這個(gè)token其實(shí)就是一串有著特殊意義的字符串，它的意義就在于，通過(guò)它可以找到對(duì)應(yīng)的賬號(hào)與設(shè)備信息，

客戶(hù)端得到這個(gè)token后，需要進(jìn)行一個(gè)本地保存，每次訪(fǎng)問(wèn)系統(tǒng)API都攜帶上token與設(shè)備信息。

服務(wù)端就可以通過(guò)token找到與它綁定的賬號(hào)與設(shè)備信息，然后把綁定的設(shè)備信息與客戶(hù)端每次傳來(lái)的設(shè)備信息進(jìn)行比較， 如果相同，那么校驗(yàn)通過(guò)，返回AP接口響應(yīng)數(shù)據(jù)， 如果不同，那就是校驗(yàn)不通過(guò)拒絕訪(fǎng)問(wèn)

從前面這個(gè)流程，我們可以看到，客戶(hù)端不會(huì)也沒(méi)必要保存你的密碼，相反，它是保存了token。可能有些同學(xué)會(huì)想，這個(gè)token這么重要，萬(wàn)一被別人知道了怎么辦。實(shí)際上，知道了也沒(méi)有影響， 因?yàn)樵O(shè)備信息是唯一的，只要你的設(shè)備信息別人不知道， 別人拿其他設(shè)備來(lái)訪(fǎng)問(wèn)，驗(yàn)證也是不通過(guò)的。

可以說(shuō)，客戶(hù)端登錄的目的，就是獲得屬于自己的token。

那么在掃碼登錄過(guò)程中，PC端是怎么獲得屬于自己的token呢？不可能手機(jī)端直接把自己的token給PC端用！token只能屬于某個(gè)客戶(hù)端私有，其他人或者是其他客戶(hù)端是用不了的。在分析這個(gè)問(wèn)題之前，我們有必要先梳理一下，掃描二維碼登錄的一般步驟是什么樣的。這可以幫助我們梳理清楚整個(gè)過(guò)程，

掃描二維碼登錄的一般步驟

大概流程

掃碼前，手機(jī)端應(yīng)用是已登錄狀態(tài)，PC端顯示一個(gè)二維碼，等待掃描

手機(jī)端打開(kāi)應(yīng)用，掃描PC端的二維碼，掃描后，會(huì)提示"已掃描，請(qǐng)?jiān)谑謾C(jī)端點(diǎn)擊確認(rèn)"

用戶(hù)在手機(jī)端點(diǎn)擊確認(rèn)，確認(rèn)后PC端登錄就成功了

可以看到，二維碼在中間有三個(gè)狀態(tài)， 待掃描，已掃描待確認(rèn)，已確認(rèn)。那么可以想象

二維碼的背后它一定存在一個(gè)唯一性的ID，當(dāng)二維碼生成時(shí)，這個(gè)ID也一起生成，并且綁定了PC端的設(shè)備信息

手機(jī)去掃描這個(gè)二維碼

二維碼切換為 已掃描待確認(rèn)狀態(tài)， 此時(shí)就會(huì)將賬號(hào)信息與這個(gè)ID綁定

當(dāng)手機(jī)端確認(rèn)登錄時(shí)，它就會(huì)生成PC端用于登錄的token，并返回給PC端

好了，到這里，基本思路就已經(jīng)清晰了，接下來(lái)我們把整個(gè)過(guò)程再具體化一下

二維碼準(zhǔn)備

按二維碼不同狀態(tài)來(lái)看， 首先是等待掃描狀態(tài)，用戶(hù)打開(kāi)PC端，切換到二維碼登錄界面時(shí)。

PC端向服務(wù)端發(fā)起請(qǐng)求，告訴服務(wù)端，我要生成用戶(hù)登錄的二維碼，并且把PC端設(shè)備信息也傳遞給服務(wù)端

服務(wù)端收到請(qǐng)求后，它生成二維碼ID，并將二維碼ID與PC端設(shè)備信息進(jìn)行綁定

然后把二維碼ID返回給PC端

PC端收到二維碼ID后，生成二維碼(二維碼中肯定包含了ID)

為了及時(shí)知道二維碼的狀態(tài)，客戶(hù)端在展現(xiàn)二維碼后，PC端不斷的輪詢(xún)服務(wù)端，比如每隔一秒就輪詢(xún)一次，請(qǐng)求服務(wù)端告訴當(dāng)前二維碼的狀態(tài)及相關(guān)信息

二維碼已經(jīng)準(zhǔn)好了，接下來(lái)就是掃描狀態(tài)

掃描狀態(tài)切換

用戶(hù)用手機(jī)去掃描PC端的二維碼，通過(guò)二維碼內(nèi)容取到其中的二維碼ID

再調(diào)用服務(wù)端API將移動(dòng)端的身份信息與二維碼ID一起發(fā)送給服務(wù)端

服務(wù)端接收到后，它可以將身份信息與二維碼ID進(jìn)行綁定，生成臨時(shí)token。然后返回給手機(jī)端

因?yàn)镻C端一直在輪詢(xún)二維碼狀態(tài)，所以這時(shí)候二維碼狀態(tài)發(fā)生了改變，它就可以在界面上把二維碼狀態(tài)更新為已掃描

那么為什么需要返回給手機(jī)端一個(gè)臨時(shí)token呢？臨時(shí)token與token一樣，它也是一種身份憑證，不同的地方在于它只能用一次，用過(guò)就失效。

在第三步驟中返回臨時(shí)token，為的就是手機(jī)端在下一步操作時(shí)，可以用它作為憑證。以此確保掃碼，登錄兩步操作是同一部手機(jī)端發(fā)出的，

狀態(tài)確認(rèn)

最后就是狀態(tài)的確認(rèn)了。

手機(jī)端在接收到臨時(shí)token后會(huì)彈出確認(rèn)登錄界面，用戶(hù)點(diǎn)擊確認(rèn)時(shí)，手機(jī)端攜帶臨時(shí)token用來(lái)調(diào)用服務(wù)端的接口，告訴服務(wù)端，我已經(jīng)確認(rèn)

服務(wù)端收到確認(rèn)后，根據(jù)二維碼ID綁定的設(shè)備信息與賬號(hào)信息，生成用戶(hù)PC端登錄的token

這時(shí)候PC端的輪詢(xún)接口，它就可以得知二維碼的狀態(tài)已經(jīng)變成了"已確認(rèn)"。并且從服務(wù)端可以獲取到用戶(hù)登錄的token

到這里，登錄就成功了，后端PC端就可以用token去訪(fǎng)問(wèn)服務(wù)端的資源了

掃碼動(dòng)作的基礎(chǔ)流程都講完了，有些細(xì)節(jié)還沒(méi)有深入介紹，

比如二維碼的內(nèi)容是什么？

可以是二維碼ID

可以是包含二維碼ID的一個(gè)url地址

在掃碼確認(rèn)這一步，用戶(hù)取消了怎么處理？這些細(xì)節(jié)都留給大家思考

總結(jié)

我們從登陸的本質(zhì)出發(fā)，探索二維碼掃碼登錄是如何做到的

告訴系統(tǒng)我是誰(shuí)

向系統(tǒng)證明我誰(shuí)

在這個(gè)過(guò)程中，我們先簡(jiǎn)單講了兩個(gè)前提知識(shí)，

一個(gè)是二維碼原理，

一個(gè)是基于token的認(rèn)證機(jī)制。

然后我們以二維碼狀態(tài)為軸，分析了這背后的邏輯: 通過(guò)token認(rèn)證機(jī)制與二維碼狀態(tài)變化來(lái)實(shí)現(xiàn)掃碼登錄.

需要指出的是，前面的講的登錄流程，它適用于同一個(gè)系統(tǒng)的PC端，WEB端，移動(dòng)端。

編輯：黃飛

?