二維碼掃碼登錄原理,其實(shí)比你想的要簡(jiǎn)單的多
胖虎和朋友原創(chuàng)的視頻教程有興趣的可以看看 ：
（文末附課程大綱）
??2024 最新，Java成神之路，架構(gòu)視頻（點(diǎn)擊查看）
??超全技術(shù)棧的Java入門+進(jìn)階+實(shí)戰(zhàn)！（點(diǎn)擊查看）
今天分享的是一位讀者在去年秋招面試抖音被提問(wèn)的一個(gè)問(wèn)題，剛好刷到一篇不錯(cuò)的文章解答這個(gè)問(wèn)題，分享一下。
PS：這個(gè)問(wèn)題在面試中還是比較常見(jiàn)的，阿里、騰訊、用友、京東、小紅書(shū)等中大廠的面試都問(wèn)過(guò)這個(gè)問(wèn)題
下面是正文。
前幾天看了極客時(shí)間一個(gè)二維碼的視頻[1]，寫的不錯(cuò)，這里總結(jié)下。
在日常生活中，二維碼出現(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è)人信息？更深度的用戶還會(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)看一下，二維碼登錄是怎么操作的！
1
二維碼登錄的本質(zhì)
- 告訴系統(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ò)程中，用戶并沒(méi)有去輸入密碼，也沒(méi)有輸入驗(yàn)證碼，或者其他什么碼。那是怎么證明的呢？
有些同學(xué)會(huì)想到，是不是掃碼過(guò)程中，把密碼傳到了 PC 端呢？但這是不可能的。因?yàn)槟菢犹话踩模蛻舳艘哺静粫?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í)。
2
認(rèn)識(shí)二維碼
所謂一維碼，也就是條形碼，超市里的條形碼--這個(gè)相信大家都非常熟悉，條形碼實(shí)際上就是一串?dāng)?shù)字，它上面存儲(chǔ)了商品的序列號(hào)。
二維碼其實(shí)與條形碼類似，只不過(guò)它存儲(chǔ)的不一定是數(shù)字，還可以是任何的字符串，你可以認(rèn)為，它就是字符串的另外一種表現(xiàn)形式，
在搜索引擎中搜索二維碼，你可以找到很多在線生成二維碼的工具網(wǎng)站，這些網(wǎng)站可以提供字符串與二維碼之間相互轉(zhuǎn)換的功能，比如 草料二維碼網(wǎng)站[2]
在左邊的輸入框就可以輸入你的內(nèi)容，它可以是文本、網(wǎng)址，文件........。然后就可以生成代表它們的二維碼。
你也可以把二維碼上傳，進(jìn)行”解碼“，然后就可以解析出二維碼代表的含義
3
系統(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í)，客戶端會(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è)備類型等等
const token = {
acountid:'賬號(hào)ID',
deviceid:'登錄的設(shè)備ID',
deviceType:'設(shè)備類型，如 iso,android,pc......',
}
然后服務(wù)端會(huì)生成一個(gè) token，用它來(lái)映射數(shù)據(jù)結(jié)構(gòu)，這個(gè) token 其實(shí)就是一串有著特殊意義的字符串，它的意義就在于，通過(guò)它可以找到對(duì)應(yīng)的賬號(hào)與設(shè)備信息。
- 客戶端得到這個(gè) token 后，需要進(jìn)行一個(gè)本地保存，每次訪問(wèn)系統(tǒng) API 都攜帶上 token 與設(shè)備信息。
- 服務(wù)端就可以通過(guò) token 找到與它綁定的賬號(hào)與設(shè)備信息，然后把綁定的設(shè)備信息與客戶端每次傳來(lái)的設(shè)備信息進(jìn)行比較， 如果相同，那么校驗(yàn)通過(guò)，返回 AP 接口響應(yīng)數(shù)據(jù)， 如果不同，那就是校驗(yàn)不通過(guò)拒絕訪問(wèn)。
從前面這個(gè)流程，我們可以看到，客戶端不會(huì)也沒(méi)必要保存你的密碼，相反，它是保存了 token。可能有些同學(xué)會(huì)想，這個(gè) token 這么重要，萬(wàn)一被別人知道了怎么辦。實(shí)際上，知道了也沒(méi)有影響， 因?yàn)樵O(shè)備信息是唯一的，只要你的設(shè)備信息別人不知道， 別人拿其他設(shè)備來(lái)訪問(wèn)，驗(yàn)證也是不通過(guò)的。
可以說(shuō)，客戶端登錄的目的，就是獲得屬于自己的 token。
那么在掃碼登錄過(guò)程中，PC 端是怎么獲得屬于自己的 token 呢？不可能手機(jī)端直接把自己的 token 給 PC 端用！token 只能屬于某個(gè)客戶端私有，其他人或者是其他客戶端是用不了的。在分析這個(gè)問(wèn)題之前，我們有必要先梳理一下，掃描二維碼登錄的一般步驟是什么樣的。這可以幫助我們梳理清楚整個(gè)過(guò)程，
4
掃描二維碼登錄的一般步驟
- 掃碼前，手機(jī)端應(yīng)用是已登錄狀態(tài)，PC 端顯示一個(gè)二維碼，等待掃描
- 手機(jī)端打開(kāi)應(yīng)用，掃描 PC 端的二維碼，掃描后，會(huì)提示"已掃描，請(qǐng)?jiān)谑謾C(jī)端點(diǎn)擊確認(rèn)"
- 用戶在手機(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)，用戶打開(kāi) PC 端，切換到二維碼登錄界面時(shí)。
- PC 端向服務(wù)端發(fā)起請(qǐng)求，告訴服務(wù)端，我要生成用戶登錄的二維碼，并且把 PC 端設(shè)備信息也傳遞給服務(wù)端
- 服務(wù)端收到請(qǐng)求后，它生成二維碼 ID，并將二維碼 ID 與 PC 端設(shè)備信息進(jìn)行綁定
- 然后把二維碼 ID 返回給 PC 端
- PC 端收到二維碼 ID 后，生成二維碼(二維碼中肯定包含了 ID)
- 為了及時(shí)知道二維碼的狀態(tài)，客戶端在展現(xiàn)二維碼后，PC 端不斷的輪詢服務(wù)端，比如每隔一秒就輪詢一次，請(qǐng)求服務(wù)端告訴當(dāng)前二維碼的狀態(tài)及相關(guān)信息
二維碼已經(jīng)準(zhǔn)好了，接下來(lái)就是掃描狀態(tài)
掃描狀態(tài)切換
- 用戶用手機(jī)去掃描 PC 端的二維碼，通過(guò)二維碼內(nèi)容取到其中的二維碼 ID
- 再調(diào)用服務(wù)端 API 將移動(dòng)端的身份信息與二維碼 ID 一起發(fā)送給服務(wù)端
- 服務(wù)端接收到后，它可以將身份信息與二維碼 ID 進(jìn)行綁定，生成臨時(shí) token。然后返回給手機(jī)端
- 因?yàn)?PC 端一直在輪詢二維碼狀態(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)登錄界面，用戶點(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)信息，生成用戶 PC 端登錄的 token
- 這時(shí)候 PC 端的輪詢接口，它就可以得知二維碼的狀態(tài)已經(jīng)變成了"已確認(rèn)"。并且從服務(wù)端可以獲取到用戶登錄的 token
- 到這里，登錄就成功了，后端 PC 端就可以用 token 去訪問(wèn)服務(wù)端的資源了
掃碼動(dòng)作的基礎(chǔ)流程都講完了，有些細(xì)節(jié)還沒(méi)有深入介紹，
比如二維碼的內(nèi)容是什么？
- 可以是二維碼 ID
- 可以是包含二維碼 ID 的一個(gè) url 地址
在掃碼確認(rèn)這一步，用戶取消了怎么處理？這些細(xì)節(jié)都留給大家思考
5
總結(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)端。
平時(shí)我們還有另外一種場(chǎng)景也比較常見(jiàn)，那就是通過(guò)第三方應(yīng)用來(lái)掃碼登錄，比如極客時(shí)間/掘金 都可以選擇微信/QQ 等掃碼登錄，那么這種通過(guò)第三方應(yīng)用掃碼登錄又是什么原理呢？
來(lái)源：juejin.cn/post/6940976355097985032
胖虎聯(lián)合兩位大佬朋友，一位是知名培訓(xùn)機(jī)構(gòu)講師和科大訊飛架構(gòu)，聯(lián)合打造了 《Java架構(gòu)師成長(zhǎng)之路》 的視頻教程。完全對(duì)標(biāo)外面2萬(wàn)左右的培訓(xùn)課程。
除了基本的視頻教程之外，還提供了超詳細(xì)的課堂筆記，以及源碼等資料包..
課程階段：
- Java核心 提升閱讀源碼的內(nèi)功心法
- 深入講解企業(yè)開(kāi)發(fā)必備技術(shù)棧，夯實(shí)基礎(chǔ)，為跳槽加薪增加籌碼
- 分布式架構(gòu)設(shè)計(jì)方法論。為學(xué)習(xí)分布式微服務(wù)做鋪墊
- 學(xué)習(xí)NetFilx公司產(chǎn)品，如Eureka、Hystrix、Zuul、Feign、Ribbon等，以及學(xué)習(xí)Spring Cloud Alibabba體系
- 微服務(wù)架構(gòu)下的性能優(yōu)化
- 中間件源碼剖析
- 元原生以及虛擬化技術(shù)
- 從0開(kāi)始，項(xiàng)目實(shí)戰(zhàn) SpringCloud Alibaba電商項(xiàng)目
點(diǎn)擊下方超鏈接查看詳情 （或者點(diǎn)擊文末閱讀原文）：
(點(diǎn)擊查看) 2024年，最新Java架構(gòu)師成長(zhǎng)之路 視頻教程！
以下是課程大綱，大家可以雙擊打開(kāi)原圖查看
評(píng)論
圖片
表情