前幾天看了極客時間一個二維碼的影片，寫的不錯，這裡總結下
在日常生活中，二維碼出現在很多場景，比如超市支付、系統登入、應用下載等等。瞭解二維碼的原理，可以為技術人員在技術選型時提供新的思路。對於非技術人員呢，除了解惑，還可以引導他更好地辨別生活中遇到的各種二維碼，防止上當受騙。
二維碼，大家再熟悉不過了
購物掃個碼，吃飯掃個碼，坐公交也掃個碼
在掃碼的過程中，大家可能會有疑問：這二維碼安全嗎？會不會洩漏我的個人資訊？更深度的使用者還會考慮：我的系統是不是也可以搞一個二維碼來推廣呢？
這時候就需要了解一下二維碼背後的技術和邏輯了！
二維碼最常用的場景之一就是透過手機端應用掃描PC或者WEB端的二維碼，來登入同一個系統。 比如手機微信掃碼登入PC端微信，手機淘寶掃碼登入PC端淘寶。 那麼就讓我們來看一下，二維碼登入是怎麼操作的！
二維碼登入的本質
二維碼登入本質上也是一種登入認證方式。既然是登入認證，要做的也就兩件事情！
- 告訴系統我是誰
- 向系統證明我是誰
比如賬號密碼登入，賬號就是告訴系統我是誰， 密碼就是向系統證明我是誰; 比如手機驗證碼登入，手機號就是告訴系統我是誰，驗證碼就是向系統證明我是誰;
那麼掃碼登入是怎麼做到這兩件事情的呢？我們一起來考慮一下
手機端應用掃PC端二維碼，手機端確認後，賬號就在PC端登入成功了！這裡，PC端登入的賬號肯定與手機端是同一個賬號。不可能手機端登入的是賬號A，而掃碼登入以後，PC端登入的是賬號B。
所以，第一件事情，告訴系統我是誰，是比較清楚的！
透過掃描二維碼，把手機端的賬號資訊傳遞到PC端，至於是怎麼傳的，我們後面再說
第二件事情，向系統證明我是誰。掃碼登入過程中，使用者並沒有去輸入密碼，也沒有輸入驗證碼，或者其他什麼碼。那是怎麼證明的呢？
有些同學會想到，是不是掃碼過程中，把密碼傳到了PC端呢？ 但這是不可能的。因為那樣太不安全的，客戶端也根本不會去儲存密碼。我們仔細想一下，其實手機端APP它是已經登入過的，就是說手機端是已經透過登入認證。所說只要掃碼確認是這個手機且是這個賬號操作的，其實就能間接證明我誰。
認識二維碼
那麼如何做確認呢？我們後面會詳細說明，在這之前我們需要先認識一下二維碼！ 在認識二維碼之前我們先看一下一維碼！
所謂一維碼，也就是條形碼，超市裡的條形碼–這個相信大家都非常熟悉，條形碼實際上就是一串數字，它上面儲存了商品的序列號。
二維碼其實與條形碼類似，只不過它儲存的不一定是數字，還可以是任何的字串，你可以認為，它就是字串的另外一種表現形式，
在搜尋引擎中搜尋二維碼，你可以找到很多線上生成二維碼的工具網站，這些網站可以提供字串與二維碼之間相互轉換的功能，比如 草料二維碼網站
在左邊的輸入框就可以輸入你的內容，它可以是文字、網址，檔案……..。然後就可以生成代表它們的二維碼
你也可以把二維碼上傳，進行”解碼“，然後就可以解析出二維碼代表的含義
系統認證機制
認識了二維碼，我們瞭解一下移動網際網路下的系統認證機制。
前面我們說過，為了安全，手機端它是不會儲存你的登入密碼的。 但是在日常使用過程中，我們應該會注意到，只有在你的應用下載下來後，第一次登入的時候，才需要進行一個賬號密碼的登入， 那之後呢 即使這個應用程式被殺掉，或者手機重啟，都是不需要再次輸入賬號密碼的，它可以自動登入。
其實這背後就是一套基於token的認證機制，我們來看一下這套機制是怎麼執行的，
- 賬號密碼登入時，客戶端會將裝置資訊一起傳遞給服務端，
- 如果賬號密碼校驗透過，服務端會把賬號與裝置進行一個繫結，存在一個資料結構中，這個資料結構中包含了賬號ID，裝置ID，裝置型別等等
const token = {
acountid:'賬號ID',
deviceid:'登入的裝置ID',
deviceType:'裝置型別，如 iso,android,pc......',
}
複製程式碼然後服務端會生成一個token，用它來對映資料結構，這個token其實就是一串有著特殊意義的字串，它的意義就在於，透過它可以找到對應的賬號與裝置資訊，
- 客戶端得到這個token後，需要進行一個本地儲存，每次訪問系統API都攜帶上token與裝置資訊。
- 服務端就可以透過token找到與它繫結的賬號與裝置資訊，然後把繫結的裝置資訊與客戶端每次傳來的裝置資訊進行比較， 如果相同，那麼校驗透過，返回AP介面響應資料， 如果不同，那就是校驗不透過拒絕訪問
從前面這個流程，我們可以看到，客戶端不會也沒必要儲存你的密碼，相反，它是儲存了token。可能有些同學會想，這個token這麼重要，萬一被別人知道了怎麼辦。實際上，知道了也沒有影響， 因為裝置資訊是唯一的，只要你的裝置資訊別人不知道， 別人拿其他裝置來訪問，驗證也是不透過的。
可以說，客戶端登入的目的，就是獲得屬於自己的token。
那麼在掃碼登入過程中，PC端是怎麼獲得屬於自己的token呢？不可能手機端直接把自己的token給PC端用！token只能屬於某個客戶端私有，其他人或者是其他客戶端是用不了的。在分析這個問題之前，我們有必要先梳理一下，掃描二維碼登入的一般步驟是什麼樣的。這可以幫助我們梳理清楚整個過程，
掃描二維碼登入的一般步驟
大概流程
- 掃碼前，手機端應用是已登入狀態，PC端顯示一個二維碼，等待掃描
- 手機端開啟應用，掃描PC端的二維碼，掃描後，會提示”已掃描，請在手機端點選確認”
- 使用者在手機端點選確認，確認後PC端登入就成功了
可以看到，二維碼在中間有三個狀態， 待掃描，已掃描待確認，已確認。 那麼可以想象
- 二維碼的背後它一定存在一個唯一性的ID，當二維碼生成時，這個ID也一起生成，並且繫結了PC端的裝置資訊
- 手機去掃描這個二維碼
- 二維碼切換為 已掃描待確認狀態， 此時就會將賬號資訊與這個ID繫結
- 當手機端確認登入時，它就會生成PC端用於登入的token，並返回給PC端
好了，到這裡，基本思路就已經清晰了，接下來我們把整個過程再具體化一下
二維碼準備
按二維碼不同狀態來看， 首先是等待掃描狀態，使用者開啟PC端，切換到二維碼登入介面時。
- PC端向服務端發起請求，告訴服務端，我要生成使用者登入的二維碼，並且把PC端裝置資訊也傳遞給服務端
- 服務端收到請求後，它生成二維碼ID，並將二維碼ID與PC端裝置資訊進行繫結
- 然後把二維碼ID返回給PC端
- PC端收到二維碼ID後，生成二維碼(二維碼中肯定包含了ID)
- 為了及時知道二維碼的狀態，客戶端在展現二維碼後，PC端不斷的輪詢服務端，比如每隔一秒就輪詢一次，請求服務端告訴當前二維碼的狀態及相關資訊
二維碼已經準好了，接下來就是掃描狀態
掃描狀態切換
- 使用者用手機去掃描PC端的二維碼，透過二維碼內容取到其中的二維碼ID
- 再呼叫服務端API將移動端的身份資訊與二維碼ID一起傳送給服務端
- 服務端接收到後，它可以將身份資訊與二維碼ID進行繫結，生成臨時token。然後返回給手機端
- 因為PC端一直在輪詢二維碼狀態，所以這時候二維碼狀態發生了改變，它就可以在介面上把二維碼狀態更新為已掃描
那麼為什麼需要返回給手機端一個臨時token呢？臨時token與token一樣，它也是一種身份憑證，不同的地方在於它只能用一次，用過就失效。
在第三步驟中返回臨時token，為的就是手機端在下一步操作時，可以用它作為憑證。以此確保掃碼，登入兩步操作是同一部手機端發出的，
狀態確認
最後就是狀態的確認了。
- 手機端在接收到臨時token後會彈出確認登入介面，使用者點選確認時，手機端攜帶臨時token用來呼叫服務端的介面，告訴服務端，我已經確認
- 服務端收到確認後，根據二維碼ID繫結的裝置資訊與賬號資訊，生成使用者PC端登入的token
- 這時候PC端的輪詢介面，它就可以得知二維碼的狀態已經變成了”已確認”。並且從服務端可以獲取到使用者登入的token
- 到這裡，登入就成功了，後端PC端就可以用token去訪問服務端的資源了
掃碼動作的基礎流程都講完了，有些細節還沒有深入介紹，
比如二維碼的內容是什麼？
- 可以是二維碼ID
- 可以是包含二維碼ID的一個url地址
在掃碼確認這一步，使用者取消了怎麼處理？ 這些細節都留給大家思考
總結
我們從登陸的本質觸發，探索二維碼掃碼登入是如何做到的
- 告訴系統我是誰
- 向系統證明我誰
在這個過程中，我們先簡單講了兩個前提知識，
- 一個是二維碼原理，
- 一個是基於token的認證機制。
然後我們以二維碼狀態為軸，分析了這背後的邏輯: 透過token認證機制與二維碼狀態變化來實現掃碼登入.
需要指出的是，前面的講的登入流程，它適用於同一個系統的PC端，WEB端，移動端。
平時我們還有另外一種場景也比較常見，那就是透過第三方應用來掃碼登入，比如極客時間/掘金 都可以選擇微信/QQ等掃碼登入，那麼這種透過第三方應用掃碼登入又是什麼原理呢？
感興趣的同學可以思考研究一下，歡迎在評論區留下你的見解。
轉載：
juejin.cn/post/6940976355097985032
本作品採用《CC 協議》，轉載必須註明作者和本文連結