web掃碼登錄怎麽實現,思路?
阿新 • • 發佈:2017-08-10
平臺 type qrcode 跳轉 目前 segment uname time 數據
前端的長連接請求類似以下代碼:
步驟 WEB平臺 手機
第1步 生成二維碼
第2步 (ajax監控後臺) 掃碼
第3步 (ajax監控後臺) 確定(後臺異步通知WEB平臺)
第4步 AJAX發現狀態改變,登陸成功
ajax監控後臺的流程:生成二維碼後
setTimeout(function(){ //AJAX請求,檢測狀態 },5000);
整體思路:
- 1.前端調用後臺生成二維碼的API,獲取到二維碼圖片和所包含的信息(通常是一個唯一ID)
- 2.前端檢測(通過輪詢或者websock,自己選擇)是否有手機掃碼,通過調用後臺接口API,參數為上面的唯一ID
- 3.手機掃描二維碼登陸,手機端可以獲取到二維碼裏的信息ID,帶上當前登陸用戶ID和二維碼裏的ID調用後臺接口。後臺存儲這個二維碼的數據,加上登錄用戶信息,當前臺調用API時,給返回登錄成功。
- 4.前端獲取到登錄成功,進行跳轉
微信與支付寶的掃碼登錄是有一些區別的,微信目前是一個持續27s的長連接請求;而支付寶是持續循環的短連接請求。其實原理是一樣的。
首先,前端調用二維碼接口,獲取圖片二維碼以及用戶唯一表示uid,然後與服務器建立長連接請求,詢問是否有用戶掃碼登錄。
用戶用APP掃碼之後,會請求服務器接口,將用戶信息與二維碼的uid綁定,前端的長連接就可以請求到當前uid對應的用戶,從而進行登錄操作。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <script src="http://code.jquery.com/jquery-latest.js"></script> <body> <div id="divCon"> <img src="" id="QrCodeImg" /> </div> </body> <script type="text/javascript"> $(document).ready(function() { var uuid = 131422035; function validateLogin(){ $.get("/walletadminV2/api/testServlet/testLogin?uuid=" + uuid , function(data, status) { if(data == ""){ validateLogin(); }else{ var obj = eval("(" + data + ")"); alert("登錄成功了:" + obj.uname); } }); } validateLogin(); }); </script> </html>
問題地址:web掃碼登錄怎麽實現,求個思路
web掃碼登錄怎麽實現,思路?