二維碼掃碼登陸原理及簡單demo

掃碼登陸原理轉載自: https://www.cnblogs.com/liyasong/p/saoma.html

      需求介紹

        首先，介紹下什麼是掃碼登陸。如今，大部分同窗手機上都裝有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而不是直接存儲用戶信息是由於，手機端的用戶信息，不必定是和瀏覽器端的用戶信息徹底一致。

　　登陸原理圖以下：

    掃碼登陸功能的簡單demo實現:

     本身寫了個簡單的demo,碼雲地址 : https://gitee.com/huaixiaonian/qrCodeLogin ,具體用到開發中時,還需注意,先後端的長鏈接可使用websocket,用戶信息的存儲可使用NoSql數據庫等等

     demo參考了此博客,有本身作修改: https://www.cnblogs.com/BulingBuling/p/Buling.html