二維碼登入（三）掃碼登入
阿新 • • 發佈：2019-01-01
承接上篇部落格，在進行二維碼生成之後，app進行掃碼，掃碼成功之後，手機點選登入，進行繫結登入關係，後臺做自動關聯與自動登入。
1，掃碼登入頁面
此頁面是模擬app登入頁面，功能是掃到二維碼後，自動跳轉授權頁面，授權成功，呼叫後臺服務進行登入關係繫結
程式碼：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <!DOCTYPE html> <html lang="en"> <head> <title>翼龍貸APP授權</title> <script type="text/javascript" src="../../common/js/jquery-3.3.1.min.js" ></script> <script type="text/javascript" > var code_mark='${code_mark}'; var userid="xvshu_test_001"; function qr_login(){ $.get("/qr/login/success?code_mark="+code_mark+"&userID="+userid,function(data,status){ if(status=="success"&&data=="success"){ alert("使用者[xvshu_test_001]授權登入成功！"); window.location.href="/qr/login/main"; } }); } </script> <style> .dow{display:block;width:302px;height:82px; line-height:52px; text-align:center; font-weight:bold; font-size:35px; background:cornflowerblue;color:white; text-decoration:none; border: 0px solid cornflowerblue; cursor:pointer} .dow:hover{background:cornflowerblue;} .dow:active{background:cornflowerblue;} </style> </head> <body style="margin: 0"> <div style="width: 100%;height: 30%;background-color:red;text-align: center"> <div style="width: 100%;height: 25%;background-color:red;text-align: center"></div> <h1 style="font-size: 35px;color: white;margin:auto;">模擬APP授權</h1> <p></p> <div style="color:white;text-align: center;">測試使用者:xvshu_test_001</div> </div> <div style="width:100%;height:78%;text-align: center;background-color:white;text-align: center"> <div style="width: 100%;height: 25%;background-color:white;text-align: center"></div> <p></p> <button style="margin:auto;" class="dow" onclick="qr_login()">登 錄</button> </div> </body> </html>
2，後臺自動登入服務
此服務是接受app傳送來的請求，繫結生成二維碼時的key與此時登入的使用者的關係，已在前篇文章列程式碼，此處僅標誌關鍵程式碼：
@RequestMapping(value = "/login/success") @ResponseBody public String success(String code_mark,String userID) { String result = "fail"; if(StringUtils.isNotEmpty(code_mark)&&StringUtils.isNotEmpty(userID)){ redisQRService.setQRKey(code_mark,userID); logger.info("=/login/success=>code_mark:{} userID:{}",code_mark,userID); result="success"; } return result; }
3，自動登入
在二維碼頁面，每隔三秒檢測一次是否登入成功，如果成功跳轉頁面，已在前篇文章列程式碼，此處僅標誌關鍵程式碼：
function check_qrlogin(){ var code_mark='${code_mark}'; $.get("/qr/login/check?code_mark="+code_mark,function(data,status){ if(status=="success"&&data!='nouser'){ int=window.clearInterval(int); window.location.href="/qr/login/main?userId="+data; } }); }
成功之後的頁面：
總結：至此，一個簡單的二維碼登入就完成了，此處有很多使用的還是測試資料，在生產環境對接生產資料，並做閘道器等安全處理之後就 可以使用其完成二維碼登入了，因為全程使用的redis，效能上一般會非常不錯，文章多有不周，請大家指正。