天天看點

微信、淘寶類掃碼登入是怎麼實作的?

今天說一說現在比較流行的掃碼登入的實作原理。

需求介紹

首先,介紹下什麼是掃碼登入。現在,大部分同學手機上都裝有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而不是直接存儲使用者資訊是因為,手機端的使用者資訊,不一定是和浏覽器端的使用者資訊完全一緻。

登入原理圖如下:

微信、淘寶類掃碼登入是怎麼實作的?
微信、淘寶類掃碼登入是怎麼實作的?

繼續閱讀