最近接到一個需求，要求用手機掃碼實現用戶登錄，這是近幾年比較流行的登錄方式。這樣確實是實現用戶體驗至上，操作簡單，方便實用。拿到需求之后，我與后端大哥商量后，敲定了具體的實施方案。其實重要的還是要弄懂他實現的原理。

需求：用戶至上的體驗效果，手機掃碼同步登錄狀態

很多企業在開發自己app的同時會推出網頁版，為了登錄操作更方便、更安全。企業會選用手機掃一掃，實現用戶登錄。神奇的是。為什么網頁只顯示一個二維碼就可以實現用戶登錄？這個二維碼是固定的嗎？怎么給用戶分配的id？怎么能把手機上的登錄信息同步到網頁上？
例如：淘寶、京東這些，如何做到掃一掃授權就能登錄成功，并實現用戶信息同步的。

下面我們介紹一下手機掃碼登錄的實現原理，用到的服務器要有2臺，手機端服務器和網頁端服務器不是同一臺服務器。

網頁端與服務器

用戶打開一個網站的登錄頁面==>此時瀏覽器會向服務器發送一個請求，這個請求用來獲取登錄的二維碼==>服務器收到請求后,隨機生成一個uuid，并將這個uuid作為key值存儲在redis中，同時設置一個過期時間，過期后，用戶的界面就會顯示“需要重新獲取二維碼”。同時也將這個key值與本公司的驗證字符串綁定在一起，然后將這些生成一個隨機的二維碼（網上有很多二維碼生成器的接口和源碼，可以直接調用）==>將二維碼和用戶的uuid一起返回給瀏覽器。

前端開發獲取到這個這個二維碼和uuid==>每隔一秒向瀏覽器發送一次登錄是否成功的請求，請求中攜帶有uuid作為當前頁面的標識符。

這里有一個問題：服務器只存了一個隨機的uuid在redis中，那么用戶的id的信息怎么會顯示出來。其實這個用戶的id信息是由手機服務器存在redis中的。這也就為什么要倆臺服務器的原因。

手機端與服務器

剛剛我們說了，瀏覽拿到二維碼并且展示在頁面上。這個時候前端可以給定一個提示信息。請用手機掃一掃登錄。用戶拿到手機掃描二維碼，就可以得到一個驗證信息和一個uuid(掃描二維碼獲取字符串的這個案例網上也能找到很多)，由于手機端已經進行過登錄操作，后端也記錄了用戶信息，所以在訪問手機端服務器的時候，參數中已經攜帶用戶的token，手機端服務器就可以解析用戶的uesrid（注意：這里從token中取值而不是手機端直接傳userid是為了安全，直接傳userid可能會被截獲和修改，token是加密的，被修改的風險會小很多）。手機端將解析到的數據和用戶token一起作為參數，向服務器發送驗證登錄請求（這里的服務器是手機服務器，手機端的服務器跟網頁端服務器不是同一臺服務器）。服務器收到請求后，首先對比參數中的驗證信息，確定是否為用戶登錄請求接口。如果是，返回一個確認信息給手機端。

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

登錄成功

然后，瀏覽器再次發送請求的時候，瀏覽器端的服務器就可以得到一個用戶Id，并調用登錄的方法，生成一個瀏覽器端的token，然后瀏覽器再次發送請求的時候，將用戶信息返回給瀏覽器，登錄成功。這里存儲用戶id而不是直接存儲用戶信息是因為，手機端的用戶信息，不一定是和瀏覽器端的用戶信息完全一致。

如果你是前端小可愛，那么只需發送請求，接收消息就可以。重要的邏輯部分和解析工作還是由后端大佬們挑大梁，希望可以幫助到大家。

總結

以上是生活随笔為你收集整理的手机扫码登录实现原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。