原理
1.首先打開瀏覽器盏缤，進(jìn)入到網(wǎng)站的登錄頁面
2.點(diǎn)擊掃碼登錄损谦，進(jìn)入掃碼登錄頁面
3.該頁面加載好就馬上請(qǐng)求后端接口，生成二維碼地址及身份驗(yàn)證令牌溉浙，同時(shí)將令牌作為掃碼的key存入redis（或其他工具）芋忿，并設(shè)置有效時(shí)間炸客，值默認(rèn)為-1：
- 二維碼地址：即APP掃描后跳轉(zhuǎn)到的頁面地址，如www.a.com/login.php?token=xxx
- 身份驗(yàn)證令牌：即二維碼地址中的token戈钢，需要唯一性
4.頁面拿到地址和令牌后渲染二維碼信息痹仙，同時(shí)開啟一個(gè)輪詢請(qǐng)求掃碼狀態(tài)接口的一個(gè)方法，將令牌作為參數(shù)殉了，每2s(視業(yè)務(wù)而定)執(zhí)行一次
- 掃碼狀態(tài)接口：根據(jù)前端傳遞的令牌參數(shù)开仰，作為redis的key去查詢，將查詢結(jié)果返回：
1）查不到薪铜，說明令牌已經(jīng)過期众弓，二維碼失效，應(yīng)該提示重新刷新二維碼隔箍，此時(shí)返回空
2）已查到谓娃，值為-1，說明二維碼已生成蜒滩，等待用戶掃描滨达，返回-1
3）已查到，值為0俯艰，說明已經(jīng)有人掃描了捡遍，等待用戶確認(rèn)登錄，返回0
4）已查到蟆炊，值為用戶信息(或用戶id)稽莉，說明已經(jīng)有人登錄成功了瀑志，返回用戶id涩搓，此時(shí)前端可以模擬登錄操作，前往網(wǎng)站首頁劈猪，同時(shí)銷毀redis的key
5.掃碼登錄頁面根據(jù)返回值進(jìn)行不同的交互展示
6.此時(shí)有人掃描了二維碼昧甘，進(jìn)入到掃描后的頁面，即www.a.com/login.php?token=xxx战得，該頁面展示掃描成功的UI及點(diǎn)擊登錄的按鈕充边，初始狀態(tài)調(diào)用掃描成功的接口，參數(shù)即為地址欄中的token，即令牌 - 掃碼成功接口：根據(jù)前端傳遞的令牌參數(shù)作為redis的key浇冰，修改它的值為0(代表有人掃描)
7.此時(shí)用戶點(diǎn)擊了掃描后頁面的點(diǎn)擊登錄按鈕贬媒，調(diào)用請(qǐng)求登錄的接口，參數(shù)為令牌及保存在APP的用戶id
- 請(qǐng)求登錄：根據(jù)前端傳遞的用戶id參數(shù)肘习，去數(shù)據(jù)庫匹配际乘，若查有此人，將令牌參數(shù)作為redis的key漂佩，修改它的值為查詢到的用戶信息(或用戶id)
效果
掃描前：
image.png
掃描后：
image.png
確認(rèn)登錄后：
image.png
二維碼失效：
image.png
