• 需求介紹
• 原理解釋
• 網頁端+伺服器
• 手機端+伺服器
• 登入成功

---

需求介紹

首先，介紹下什麼是掃碼登入。現在，大部分同學手機上都裝有qq和淘寶，天貓等這一類的軟體。而開發這些app的企業，都有他們相對應的網站。為了讓使用者在使用他們的網站時，登入更加方便和安全。這些企業提供了， 使用手機，掃一掃，就可以登入的服務。網頁登入時的效果如下：

有很多小夥伴可能會感到很神奇，網頁上只是顯示了個二維碼，它怎麼就知道是哪個手機掃到了二維碼，並且進行登入的呢？而且，登入完成以後，還能直接把使用者資訊顯示給使用者，真的是很神奇啊。

原理解釋

網頁端+伺服器

接下來就是對於這個服務的詳細實現。首先，大概說一下原理：使用者開啟網站的登入頁面的時候，向瀏覽器的伺服器傳送獲取登入二維碼的請求。

伺服器收到請求後，隨機生成一個uuid，將這個id作為key值存入redis伺服器，同時設定一個過期時間，再過期後，使用者登入二維碼需要進行掃清重新獲取。同時，將這個key值和本公司的驗證字串合在一起，透過二維碼生成介面，生成一個二維碼的圖片（二維碼生成，網上有很多現成的介面和原始碼，這裡不再介紹。）然後，將二維碼圖片和uuid一起傳回給使用者瀏覽器。

瀏覽器拿到二維碼和uuid後，會每隔一秒向瀏覽器傳送一次，登入是否成功的請求。請求中攜帶有uuid作為當前頁面的識別符號。這裡有的同學就會奇怪了，伺服器只存了個uuid在redis中作為key值，怎麼會有使用者的id資訊呢？

這裡確實會有使用者的id資訊，這個id資訊是由手機伺服器存入redis中的。

手機端+伺服器

話說，瀏覽器拿到二維碼後，將二維碼展示到網頁上，並給使用者一個提示：請掏出您的手機，開啟掃一掃進行登入。使用者拿出手機掃描二維碼，就可以得到一個驗證資訊和一個uuid（掃描二維碼獲取字串的功能在網上同樣有很多demo，這裡就不詳細介紹了）。

由於手機端已經進行過了登入，在訪問手機端的伺服器的時候，引數中都回攜帶一個使用者的token，手機端伺服器可以從中解析到使用者的userId（這裡從token中取值而不是手機端直接傳userid是為了安全，直接傳userid可能會被截獲和修改，token是加密的，被修改的風險會小很多）。

手機端將解析到的資料和使用者token一起作為引數，向伺服器傳送驗證登入請求（這裡的伺服器是手機伺服器，手機端的伺服器跟網頁端伺服器不是同一臺伺服器）。伺服器收到請求後，首先對比引數中的驗證資訊，確定是否為使用者登入請求介面。如果是，傳回一個確認資訊給手機端。

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

登入成功

然後，瀏覽器再次傳送請求的時候，瀏覽器端的伺服器就可以得到一個使用者Id，並呼叫登入的方法，聲成一個瀏覽器端的token，再瀏覽器再次傳送請求的時候，將使用者資訊傳回給瀏覽器，登入成功。這裡儲存使用者id而不是直接儲存使用者資訊是因為，手機端的使用者資訊，不一定是和瀏覽器端的使用者資訊完全一致。

登入原理圖如下：