下面這張圖，不管是im開發者還是普通使用者，應該很熟悉：
下面這張圖，不管是im開發者還是普通使用者，應該很熟悉：
幾個主流大廠應用掃碼登入時的介面效果如下：
有很多小夥伴可能會感到很神奇，網頁上只是顯示了個***，它怎麼就知道是哪個手機掃到了***，並且進行登入的呢？而且，登入完成以後，還能直接把使用者資訊顯示給使用者，真的是很神奇啊。
1）網頁端與伺服器的配合邏輯：
接下來就是對於這個服務的詳細實現。
首先使用者開啟**的登入頁面的時候，向瀏覽器的伺服器傳送獲取登入***的請求。伺服器收到請求後，隨機生成乙個uuid，將這個id作為key值存入redis伺服器，同時設定乙個過期時間，再過期後，使用者登入***需要進行重新整理重新獲取。
同時，將這個key值和本公司的驗證字串合在一起，通過***生成介面，生成乙個***的（***生成，網上有很多現成的介面和原始碼，這裡不再介紹）。然後，將***和uuid一起返回給使用者瀏覽器。
瀏覽器拿到***和uuid後，會每隔一秒向瀏覽器傳送一次，登入是否成功的請求。請求中攜帶有uuid作為當前頁面的識別符號。這裡有的同學就會奇怪了，伺服器只存了個uuid在redis中作為key值，怎麼會有使用者的id資訊呢？
2）手機端與伺服器的配合邏輯：
由於手機端已經進行過了登入，在訪問手機端的伺服器的時候，引數中都回攜帶乙個使用者的token，手機端伺服器可以從中解析到使用者的userid（這裡從token中取值而不是手機端直接傳userid是為了安全，直接傳userid可能會被截獲和修改，token是加密的，被修改的風險會小很多）。手機端將解析到的資料和使用者token一起作為引數，向伺服器傳送驗證登入請求（這裡的伺服器是手機伺服器，手機端的伺服器跟網頁端伺服器不是同一臺伺服器）。
伺服器收到請求後，首先對比引數中的驗證資訊，確定是否為使用者登入請求介面。如果是，返回乙個確認資訊給手機端。
手機端收到返回後，將登入確認框顯示給使用者（防止使用者誤操作，同時使登入更加人性化）。使用者確認是進行的登入操作後，手機再次傳送請求。伺服器拿到uuid和userid後，將使用者的userid作為value值存入redis中以uuid作為key的鍵值對中。
3）登入成功時的邏輯：
然後，瀏覽器再次傳送請求的時候，瀏覽器端的伺服器就可以得到乙個使用者id，並呼叫登入的方法，聲成乙個瀏覽器端的token，再瀏覽器再次傳送請求的時候，將使用者資訊返回給瀏覽器，登入成功。這裡儲存使用者id而不是直接儲存使用者資訊是因為，手機端的使用者資訊，不一定是和瀏覽器端的使用者資訊完全一致。
4）詳細的技術原理總結如下圖所示：
前端肯定是要和伺服器保持一直通訊的，用以獲取登入結果和***狀態。看了下網上的一些實現方案，基本各個方案都有用的：輪詢、長輪詢、長鏈結、websocket。也不能肯定的說哪個方案好哪個方案不好，只能說哪個方案更適用於當前應用場景。
登入介面 傳回來的引數為：
ck是網頁的唯一id，codecontent是網頁***的內容，當開啟***登入的時候，網頁在輪詢呼叫介面去請求伺服器。
如果沒有掃碼，返回的為：
content: , status: 0, success: true}掃碼了返回為：
content: , status: 0, success: true}長時間沒有掃碼的話，網頁端會停止輪詢，***失效！
當手機確認登入後：
手機端與服務端在點選"確認登入"之間的互動可能就是這樣：網頁端帶上 ck(唯一id) 去請求服務端，服務端判斷這個ck 標識已經掃碼確認過並可以登入，就返回登入令牌token，網頁端此時可以憑這個token來登入
技術原理流程圖
掃碼登入原理
網頁端 伺服器 使用者開啟 的登入頁面的時候，向瀏覽器的伺服器傳送獲取登入 的請求。伺服器收到請求後，隨機生成乙個uuid，將這個id作為key值存入redis伺服器，同時設定乙個過期時間，再過期後，使用者登入 需要進行重新整理重新獲取。同時，將這個key值和本公司的驗證字串合在一起，通過 生成介面...
掃碼登入的實現原理
原理解釋 接下來就是對於這個服務的詳細實現。首先，大概說一下原理 使用者開啟 的登入頁面的時候，向瀏覽器的伺服器傳送獲取登入 的請求。伺服器收到請求後，隨機生成乙個uuid，將這個id作為key值存入redis伺服器，同時設定乙個過期時間，再過期後，使用者登入 需要進行重新整理重新獲取。同時，將這個...
網頁接入dingding掃碼登入
有時候我們做了一些網頁，希望只有某些人才能看的話，可以搞乙個釘釘掃碼登入，接入也比較簡單，下面記錄下接入的過程。我們先看看官方的文件 釘釘接入文件如果是在網頁直接調介面的話，會存在跨域的問題。所以得搞乙個介面做 我寫了個php 指定允許其他網域名稱訪問 header access control a...