1. 程式人生 > >聊一聊二維碼掃描登入原理

聊一聊二維碼掃描登入原理

掃二維碼登入現在比較常見,比如微信、支付寶等 PC 端登入,並且好像每款 APP 都支援掃碼登入,不搞個掃碼登入都不好意思。作為技術人員,不知道您對這背後的實現邏輯是否敢興趣,反正我是一直都對這背後實現好奇。最近剛好看到一個關於掃碼登入原理的視訊,於是就整理出來了這篇文章,希望對您有所幫助。 本文共三個主題: - 什麼是二維碼。 - 移動端基於 token 的認證機制。 - 二維碼掃碼登入的原理。 ### 1、什麼是二維碼 > 二維碼又稱二維條碼,常見的二維碼為QR Code,QR全稱Quick Response,是一個近幾年來移動裝置上超流行的一種編碼方式,它比傳統的Bar Code條形碼能存更多的資訊,也能表示更多的資料型別。----來自百度百科 在商品上,一般都會有條形碼,條形碼也稱為一維碼,條形碼只能表示一串數字。二維碼要比條形碼豐富很多,可以儲存數字、字串、圖片、檔案等,比如我們可以把 `www.baidu.com` 儲存在二維碼中,掃碼二維碼我們就可以獲取到百度的地址。 可能用文字說起來還是比較難理解,您可以百度:草料二維碼,一款二維碼生成和解析工具,玩一玩你就知道二維碼是個啥了。 ![圖片描述](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcxLnN5Y2RuLmltb29jLmNvbS81ZTgzNTMxNDAwMDFmMjY4MDI0MDAyNDAucG5n?x-oss-process=image/format,png) ### 2、移動端基於 token 的認證機制 在瞭解掃碼登入原理之前,有必要先了解移動端基於 token 的認證機制,對理解掃碼登入原理還是非常有幫助的。基於 token 的認證機制跟我們常用的賬號密碼認證方式有較大的不同,安全係數比賬號密碼要高,如果每次驗證都傳入賬號密碼,那麼被劫持的概率就變大了。 基於 token 的認證機制流程圖,如下圖所示: ![基於token的認證機制](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcxLnN5Y2RuLmltb29jLmNvbS81ZTgzMGNlMzAwMDFkNTk1MDY0MzA0NjcucG5n?x-oss-process=image/format,png) 基於 token 的認證機制,只有在第一次使用需要輸入賬號密碼,後續使用將不在輸入賬號密碼。**其實在登陸的時候不僅傳入賬號、密碼,還傳入了手機的裝置資訊。在服務端驗證賬號、密碼正確後,服務端會做兩件事**。 第一,將賬號與裝置關聯起來,在某種意義上,裝置資訊就代表著賬號。 第二,生成一個 token 令牌,並且在 token 與賬號、裝置關聯,類似於key/value,token 作為 key ,賬號、裝置資訊作為value,持久化在磁碟上。 將 token 返回給移動端,移動端將 token 存入在本地,往後移動端都通過 token 訪問服務端 API ,當然除了 token 之外,還需要攜帶裝置資訊,因為 token 可能會被劫持。帶上裝置資訊之後,就算 token 被劫持也沒有關係,因為裝置資訊是唯一的。 這就是基於 token 的認證機制,將賬號密碼換成了 token、裝置資訊,從而提高了安全係數,可別小看這個 token ,token 是身份憑證,在掃碼登入的時候也會用到。 ### 3、二維碼掃碼登入的原理 好了,知道了移動端基於 token 的認證機制後,接下來就進入我們的主題:二維碼掃碼登陸的原理。先上二維碼掃碼登入的流程圖: ![掃碼登入全流程](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcxLnN5Y2RuLmltb29jLmNvbS81ZTgyZmFmMDAwMDE2NWI1MDk1NjA5MzYucG5n?x-oss-process=image/format,png) 掃碼登入可以分為三個階段:**待掃描、已掃描待確認、已確認**。我們就一一來看看這三個階段。 **1、待掃描階段** 待掃描階段也就是流程圖中 1~5 階段,即生成二維碼階段,這個階段跟移動端沒有關係,是 PC 端跟服務端的互動過程。 ![待掃描的二維碼](https://img-blog.csdnimg.cn/20200401085020789.png#pic_center) 首先 PC 端攜帶裝置資訊想服務端發起生成二維碼請求,服務端會生成唯一的二維碼 ID,你可以理解為 UUID,並且將 二維碼 ID 跟 PC 裝置資訊關聯起來,這跟移動端登入有點相似。 PC 端接受到二維碼 ID 之後,將二維碼 ID 以二維碼的形式展示,等待移動端掃碼。此時在 PC 端會啟動一個定時器,輪詢查詢二維碼的狀態。**如果移動端未掃描的話,那麼一段時間後二維碼將會失效。** **2、已掃描待確認階段** 流程圖中第 6 ~ 10 階段,我們在 PC 端登入微信時,手機掃碼後,PC 端的二維碼會變成已掃碼,請在手機端確認。這個階段是移動端跟服務端互動的過程。 ![待確認的二維碼](https://img-blog.csdnimg.cn/20200401085127141.png#pic_center) 首先移動端掃描二維碼,獲取二維碼 ID,**然後將手機端登入的資訊憑證(token)和 二維碼 ID 作為引數傳送給服務端**,此時的手機一定是登入的,不存在沒登入的情況。 服務端接受請求後,會將 token 與二維碼 ID 關聯,為什麼需要關聯呢?你想想,我們使用微信時,移動端退出, PC 端是不是也需要退出,這個關聯就有點把子作用了。然後會**生成一個一次性 token,這個 token 會返回給移動端,一次性 token 用作確認時候的憑證**。 PC 端的定時器,會輪詢到二維碼的狀態已經發生變化,會將 PC 端的二維碼更新為已掃描,請確認。 **3、已確認** 流程圖中的 第 11 ~ 15 步驟,這是掃碼登入的最後階段,移動端攜帶上一步驟中獲取的臨時 token ,確認登入,**服務端校對完成後,會更新二維碼狀態,並且給 PC 端生成一個正式的 token ,後續 PC 端就是持有這個 token 訪問服務端**。 ![手機端確認狀態](https://img-blog.csdnimg.cn/20200401085357927.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o2OTQ2NDQwMzI=,size_16,color_FFFFFF,t_70#pic_center) PC 端的定時器,輪詢到了二維碼狀態為登入狀態,並且會獲取到了生成的 token ,完成登入,後續訪問都基於 token 完成。 在伺服器端會跟手機端一樣,維護著 token 跟二維碼、PC 裝置資訊、賬號等資訊。 到此,二維碼掃描登入原理就差不多了,二維碼掃描登入在原理上不難理解,跟 OAuth2.0 有一絲的相似之處,但是實現起來可能就比較複雜。 希望此文對您的學習或者工作有所幫助。同時希望您在評論區聊聊您的掃碼登入工作經歷,祝好。 ### 最後 > 目前網際網路上很多大佬都有二維碼掃描登入原理相關文章,如有雷同,請多多包涵了。原創不易,碼字不易,還希望大家多多支援。若文中有所錯誤之處,還望提出,謝謝。 ![網際網路平頭哥](https://user-gold-cdn.xitu.io/2020/2/1/16fffec0e10797f6?w=900&h=500&f=png&s=1727