某跳動面試官：說說微信掃碼登陸背後的實現原理？

引言

這個問題我是在今年8月份的時候被問到過，當時一臉懵，當面試官一提出這個問題，我當場回答這個沒接觸過，可能不知道。面試官笑了笑：這是一個設計題，若是你本來就會的話，我就不會要你來設計了。javascript

我：（苦笑...）憑藉三寸不爛之舌和麪試官討論了起來，說完以後信心滿滿，但結果反手就收到了一份正式地感謝信。前端

當時，面試官問你還有什麼想要問個人嗎？我請教了這個問題，面試官回答說，你其實也猜到了一點，可是我想要的那個邏輯你沒理清楚，而後吧啦吧啦引導了一下，告知能夠待會學習一下，這個也挺多人討論的。java

直到今天，又收到了一份「新」的感謝信後，我忽然回想到了這個問題，想了想，這個問題不能一直丟着無論，我不去學習，固然不會天然就明白其中原理，下面咱們一塊兒來探討一下吧。git

如如有幫助到您，請一鍵三連，固然，本文表述有問題的地方，歡迎讀者指正，也是一個學習的過程，謝謝~github

基本技術原理

掃碼登陸功能究竟是什麼樣的？

如今大部分手機上都裝有微信、qq和淘寶這一類的軟件。而這些app都有他們相對應的網頁端。爲了讓用戶在使用他們的網頁時登陸更加方便和安全，使用手機掃一掃就能夠登陸的服務，就顯得天然而然了。面試

掃碼登陸時的界面效果以下：redis

那麼，此時問題來了，咱們訪問某個網頁，這個網頁怎麼就出現了這個二維碼呢？有了這個二維碼了，它怎麼知道是我掃的，仍是其它人掃的呢？好神奇啊！當時面試完以後，我就有這個疑惑，下文咱們逐一解答。瀏覽器

二維碼是怎麼出現的？

首先，用戶打開網站的登陸首頁的時候，瀏覽器就會向對應網頁服務器發送獲取登陸二維碼的請求，服務器收到請求後，會隨機生成一個 uuid，將這個 uuid 做爲key值存入redis服務器，同時設置一個過時時間，一旦過時後，用戶登陸二維碼須要進行刷新從新獲取。安全

同時，將這個key值和公司的驗證字符串合在一塊兒，經過二維碼生成接口，生成一個二維碼的圖片。而後，將二維碼圖片和 uuid 一塊兒返回給用戶瀏覽器。服務器

例如，對於某個登陸的網頁（我打開的是力扣的微信登陸地址），咱們習慣性地打開了瀏覽器的開發者工具，我發現當我在登陸頁面停滯一小會（大概30秒樣子），請求連接會不斷髮生變化，以下圖所示：

其中就有一個字段 uuid，伴隨着連接的更新而自增變化。這就很好解釋了上文，服務器端會經過這個 uuid 調用相關接口來返回給瀏覽器一個二維碼。

因此，二維碼是誰生成的呢？別急，繼續分析：

當用戶打開網站後，網站後臺根據微信 OAuth2.0 協議向微信開發平臺請求受權登陸，並傳遞事先在微信開發平臺中審覈經過的 AppID 和 AppSecrect 等參數
微信開發平臺對AppID等參數進行驗證，並向網站後臺返回二維碼
網站後臺將二維碼傳送至網站前端進行顯示

原來，還有微信開發平臺參與，由它來生成咱們的二維碼，OK，咱們接着下一個問題的思考。

怎麼知道是我掃了這個二維碼？

上文咱們瞭解到了二維碼的生成，而且在將 uuid 做爲key值存入redis服務器，那麼只有這個 key 值，哪裏來的用戶相關信息呢？帶着這個思考，繼續探討吧。

上文咱們獲取了網頁二維碼，如今來到了用戶掃這個二維碼的時候了，當用戶拿出手機掃描二維碼，就能夠獲得一個驗證信息和一個 uuid。因爲手機端已經進行過了登陸，在訪問手機端的服務器的時候，參數中都會攜帶一個用戶的token，手機端服務器能夠從中解析到用戶的 userId（這裏從token中取值而不是手機端直接傳userid是爲了安全，直接傳userid可能會被截獲和修改，token是加密的，被修改的風險會小不少）。

手機端將解析到的數據與微信帳號綁定，向微信開發平臺發送登陸驗證請求，微信開發平臺驗證綁定數據，調用網站後臺的回調接口，發送受權臨時票據 code ，若是受權成功，返回一個確認信息給手機端。

手機端收到返回後，將登陸確認框顯示給用戶（防止用戶誤操做，同時使登陸更加人性化）。用戶確認是進行的登陸操做後，手機再次發送請求。服務器拿到 uuId 和 userId 後，將用戶的userid做爲value值存入redis中以uuid做爲key的鍵值對中。

網站後臺接收到code，代表微信開發平臺贊成數據請求
網站後臺根據code參數，再加上AppID和AppSecret請求微信開發平臺換取 access_token
微信開發平臺驗證參數，並返回 access_token
網站後臺收到 access_token 後便可進行參數分析得到用戶帳號數據

這裏，咱們就拿到了用戶的相關信息了。

AppID：應用惟一標識，在微信開放平臺提交應用審覈經過後得到
AppSecret：應用密鑰，在微信開放平臺提交應用審覈經過後得到
code：受權臨時票據，第三方經過code進行獲取access_token的時候須要用到，code的超時時間爲10分鐘，一個code只能成功換取一次access_token 即失效。code的臨時性和一次性保障了微信受權登陸的安全性。
access_token：用戶受權第三方應用發起接口調用的憑證

整個過程從網站後臺向微信開發平臺請求受權登陸開始，最終目的是爲了得到 access_token。

在得到了 access_token 後就能夠解析用戶的一些基本信息，包括頭像、用戶名、性別、城市等。這樣一來，整個微信掃描登陸的過程就完成了。

整個過程流程圖

本文參考

冷血之心的博客：微信掃碼登陸原理解析

喬戈裏：阿里面試官：分別說說微信和淘寶掃碼登陸背後的實現原理？

微信掃碼登陸的幾秒鐘裏，到底發生了什麼

感謝以上大佬的文章，尊重勞動成果，特此提出本來連接。

最後

文章產出不易，還望各位小夥伴們支持一波！

往期精選：

小獅子前端の筆記倉庫

leetcode-javascript：LeetCode 力扣的 JavaScript 解題倉庫，前端刷題路線（思惟導圖）

小夥伴們能夠在Issues中提交本身的解題代碼，🤝 歡迎Contributing，可打卡刷題，Give a ⭐️ if this project helped you!

訪問超逸の博客，方便小夥伴閱讀玩耍~

學如逆水行舟，不進則退
複製代碼