二维码登录（三）扫码登录

承接上篇博客，在进行二维码生成之后，app进行扫码，扫码成功之后，手机点击登录，进行绑定登录关系，后台做自动关联与自动登录。

本文git地址：https://github.com/xvshu/qrlogin

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，性能上一般会非常不错，文章多有不周，请大家指正。

二维码登录（三）扫码登录

猜你喜欢