扫码登陆功能Demo—Postman模拟扫码请求

时间 2020-02-06

标签登陆功能 demo postman 模拟请求繁體版

原文原文链接

扫码登陆功能Demo—Postman模拟扫码请求

扫码登陆功能—轮询or长链接WebSocket—Zxing生成二维码

扫码登陆其实就是一个登陆请求，只不过信息存储在用户手机上，还须要经过二维码验证是否匹配的方式就能够登陆，免去了用户屡次输入密码的场景，如今愈来愈多登陆方式，其中扫码登陆算是比较人性化的了javascript

咱们把一个全局惟一id保存在二维码中，使用手机扫码能够获取到二维码中的信息，此时就把该二维码和你的手机用户帐号创建一种绑定的关系，这个二维码就只归你全部了，当你登陆完后这个二维码就废弃了，二维码起的做用就是一种认证的机制css

流程

具体流程以下图：html

Step 一、用户 A 访问网页客户端，服务器为这个会话生成一个全局惟一的 ID，此时系统并不知道访问者是谁。前端

Step 二、用户A打开本身的手机App并扫描这个二维码，并提示用户是否确认登陆。java

Step 三、手机上的是登陆状态，用户点击确认登陆后，手机上的客户端将帐号和这个扫描获得的 ID 一块儿提交到服务器jquery

Step 四、服务器将这个 ID 和用户 A 的帐号绑定在一块儿，并通知网页版，这个 ID 对应的微信号为用户 A，网页版加载用户 A 的信息，至此，扫码登陆所有流程完成web

建立二维码

咱们选取使用本身在服务器端根据建立的全局惟一id生成一个二维码，使用google的zxing二维码生成类库ajax

依赖

<dependency>
            <groupId>com.google.zxing</groupId>
            <artifactId>javase</artifactId>
            <version>3.2.1</version>
        </dependency>

生成二维码

根据content内容和指定高度和宽度生成二维码的base64格式图片，能够直接在前端显示redis

public String createQrCode(String content, int width, int height) throws IOException {
        String resultImage = "";
        if (!StringUtils.isEmpty(content)) {
            ServletOutputStream stream = null;
            ByteArrayOutputStream os = new ByteArrayOutputStream();
            @SuppressWarnings("rawtypes")
            HashMap<EncodeHintType, Comparable> hints = new HashMap<>();
            hints.put(EncodeHintType.CHARACTER_SET, "utf-8"); // 指定字符编码为“utf-8”
            hints.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.M); // 指定二维码的纠错等级为中级
            hints.put(EncodeHintType.MARGIN, 2); // 设置图片的边距
            try {
                QRCodeWriter writer = new QRCodeWriter();
                BitMatrix bitMatrix = writer.encode(content, BarcodeFormat.QR_CODE, width, height, hints);

                BufferedImage bufferedImage = MatrixToImageWriter.toBufferedImage(bitMatrix);
                ImageIO.write(bufferedImage, "png", os);
                /**
                 * 原生转码前面没有 data:image/png;base64 这些字段，返回给前端是没法被解析，可让前端加，也能够在下面加上
                 */
                resultImage = new String("data:image/png;base64," + Base64.encode(os.toByteArray()));

                return resultImage;
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                if (stream != null) {
                    stream.flush();
                    stream.close();
                }
            }
        }
        return null;
    }

二维码状态管理

咱们使用redis来存储每一张二维码的状态spring

状态:

NOT_SCAN 未被扫描
SCANNED 被扫描
VERIFIED 确认完后
EXPIRED 过时
FINISH 完成

因为一张二维码只能被扫描一次，因此咱们每一次扫描一张二维码后，把状态设置为 SCANNED， SCANNED状态的二维码没法再次被扫描，抛出已被扫描的信息

状态转移：

NOT_SCANNED->SCANNED->VERIFIED->FINISH
其中EXPIRED状态能够插在其中任意一个位置，过时了的二维码也自动过时

生成二维码接口

建立二维码

使用UUID工具类生成全局惟一id，也可使用snowflake生成自增的全局惟一id，而后保存到redis中，key为uuid，val为当前二维码状态，咱们这里维护了一个map保存全部uuid对应的二维码base格式，用于创建对应关系，前端传递二维码base64过来咱们来判断这张二维码对应的uuid是多少

不少人问为何不让前端传递扫描事后的uuid呢？第一，咱们只能使用postman模拟请求，咱们没法根据手机app扫码获取二维码信息，因此暂时采起传输图片，实际中确定采用uuid去传输，由于base64原本就很大，尽可能传输数据量小的数据

@GetMapping("/createQr")
    @ResponseBody
    public Result<String> createQrCode() throws IOException {
        String uuid = UUIDUtil.uuid();
        log.info(uuid);
        String qrCode = qrCodeService.createQrCode(uuid,200,200);
        qrCodeMap.put(qrCode,uuid);
        redisService.set(QrCodeKey.UUID,uuid,QrCodeStatus.NOT_SCAN);
        return Result.success(qrCode);
    }

前端轮询法判断二维码是否被扫描

目前阿里云登陆控制台就是使用轮询的方法，具体为何不使用长链接我也不清楚，可是说明这种方法也是比较常见的

后端只须要处理app登陆请求和确认请求以及网页端响应的请求就行了

二维码是否被扫描接口—前端只须要轮询该接口

获取到redis保存对应uuid的状态，返回给前端，前端轮询判断作处理

@GetMapping("/query")
    @ResponseBody
    public Result<String> queryIsScannedOrVerified(@RequestParam("img")String img){
        String uuid = qrCodeMap.get(img);
        QrCodeStatus s = redisService.get(QrCodeKey.UUID, uuid, QrCodeStatus.class);
        return Result.success(s.getStatus());
    }

app扫描接口

app扫描二维码后，拿到对应的二维码信息发送一个扫描请求给后端，携带app用户参数，这里demo演示就模拟一个绝对的用户信息

*以后就是判断redis中uuid的状态，

若是为NOT_SCAN，就修改成SCANNED
若是为SCANNED，就返回重复扫描的错误
若是为VERIFIED，就完成本次二维码登陆逻辑，用户登陆成功

@GetMapping("/doScan")
    @ResponseBody
    public Result doAppScanQrCode(@RequestParam("username")String username,
                               @RequestParam("password")String password,
                               @RequestParam("uuid")String uuid){
        QrCodeStatus status = redisService.get(QrCodeKey.UUID,uuid,QrCodeStatus.class);
        log.info(status.getStatus());
        if(status.getStatus().isEmpty()) return Result.error(ErrorCodeEnum.UUID_EXPIRED);
        switch (status){
            case NOT_SCAN:
                //等待确认 todo
                if(username.equals("dzou")&&password.equals("1234")){
                    redisService.set(QrCodeKey.UUID,uuid, QrCodeStatus.SCANNED);
                    return Result.success("请手机确认");
                }else{
                    return Result.error(ErrorCodeEnum.LOGIN_FAIL);
                }
            case SCANNED:
                return Result.error(ErrorCodeEnum.QRCODE_SCANNED);
            case VERIFIED:
                return Result.success("你已经确认过了");
        }
        return Result.error(ErrorCodeEnum.SEVER_ERROR);
    }

app确认登陆接口

app扫描成功后，二维码状态变为SCANNED，须要发送一个请求给app前端请求用户确认，用户点击确认后请求这个接口，完成登陆

@GetMapping("/verify")
    @ResponseBody
    public Result verifyQrCode(@RequestParam("uuid")String uuid){
        String status = redisService.get(QrCodeKey.UUID,uuid,String.class);
        if(status.isEmpty()) return Result.error(ErrorCodeEnum.UUID_EXPIRED);
        redisService.set(QrCodeKey.UUID,uuid,QrCodeStatus.VERIFIED);
        return Result.success("确认成功");
    }

前端—JQuery

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>扫描二维码</title>
  <!-- jquery -->
  <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
  <!-- bootstrap -->
  <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
  <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
</head>
<body>
  <h1>二维码</h1>
  <div>
    <table>
      <tr>
        <td><img id="qrCode" width="200" height="200"/></td>
      </tr>
    </table>
  </div>
</body>
<script>
  var img = "";
  $.ajax({
    url: "/api/createQr",
    type:"GET",
    success:function (data) {
      $("#qrCode").attr("src",data.data);
      img = data.data;
      callbackScan($("#qrCode").attr("src"))
    }
  });
    //使用setTimeOut来循环请求判断是否被扫描，被扫描之后调用下面一个函数循环判断是否被确认
  function callbackScan(img) {
    var tID = setTimeout(function() {
      $.ajax({
        url : '/api/query',
        dataType: "json",
        type: 'GET',
        data:{"img":img},
        success : function(res) {
          //process data here
          console.log("img:"+img);
          console.log(res.data);
          if(res.data=="scanned") {
            clearTimeout(tID);
            console.log("请求确认")
            callbackVerify(img)
          }else {
            callbackScan(img)
          }
        }
      }) }, 1500);
  }
//循环判断是否被确认
  function callbackVerify(img) {
    var tID = setTimeout(function() {
      $.ajax({
        url : '/api/query',
        dataType: "json",
        type: 'GET',
        data:{"img":img},
        success : function(res) {
          //process data here
          console.log(res.data);
          if(res.data=="verified") {
            clearTimeout(tID);
            console.log("确认成功")
            window.location.href = "success";
          }else {
            callbackVerify(img)
          }
        }
      }) }, 1500);
  }

</script>
</html>

成功后跳转到成功页面

测试

打开主页建立二维码

拿到服务器端建立的uuid请求扫描接口

拿uuid请求确认接口

确认完成，跳转到登陆界面

长链接WebSocket来传输二维码被扫描的信息

除了轮询还有一种相对来讲更好的实现方式就是WebSocket长链接，可是有些浏览器不支持WebSocket，考虑到这点咱们决定使用 SockJs，他是一种优先Websocket的链接方式，不支持的话它会去使用其余相似轮询的方式

咱们服务器端须要编写对应的WebSocket处理逻辑，咱们在加载页面时创建长链接，扫描时请求接口，把状态发送给前端WebSocket，若是为被扫描，发送请求确认的信息，请求确认接口完成确认后发送状态给前端WebSocket，跳转到success页面

咱们使用Springboot提供的WebSocket支持类库编写，若是有须要使用netty编写的同窗，能够参考个人另一篇netty的文章

maven依赖

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
            <version>2.0.4.RELEASE</version>
        </dependency>

WebSocket配置类

其中第一个方法registerStompEndpoints至关于指定代理服务器的WebSocket路由
第二个方法就是客户端订阅路由，客户端能够接收到这个路由发送的信息

@Configuration
@EnableWebSocketMessageBroker
public class IWebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
//注册一个Stomp 协议的endpoint,并指定 SockJS协议
        registry.addEndpoint("/websocket").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
        //registry.setApplicationDestinationPrefixes("/app");
    }
}

注入WebSocket发送消息模板

@Autowired
    private SimpMessagingTemplate simpMessagingTemplate;

扫描二维码接口

咱们只须要稍微改一下代码，在第一次扫描后使用WebSocket发送一个信息请求确认给前端WebSocket

@GetMapping("/doScan")
    @ResponseBody
    public Result doAppScanQrCode(@RequestParam("username")String username,
                                  @RequestParam("password")String password,
                                  @RequestParam("uuid")String uuid){
        QrCodeStatus status = redisService.get(QrCodeKey.UUID,uuid,QrCodeStatus.class);
        log.info(
                status.getStatus());
        if(status.getStatus().isEmpty()) return Result.error(ErrorCodeEnum.UUID_EXPIRED);
        switch (status){
            case NOT_SCAN:
                if(username.equals("dzou")&&password.equals("1234")){
                    redisService.set(QrCodeKey.UUID,uuid, QrCodeStatus.SCANNED);
                    simpMessagingTemplate.convertAndSend("/topic/ws","请确认");
                    return Result.success("请手机确认");
                }else{
                    return Result.error(ErrorCodeEnum.LOGIN_FAIL);
                }
            case SCANNED:
                return Result.error(ErrorCodeEnum.QRCODE_SCANNED);
            case VERIFIED:
                return Result.success("你已经确认过了");
        }
        return Result.error(ErrorCodeEnum.SEVER_ERROR);
    }

确认登陆接口

咱们须要稍改确认的代码，由于确认成功咱们须要向客户端订阅的指定路由发送一条消息

调用convertAndSend发送指定消息到指定路由下

@GetMapping("/verify")
    @ResponseBody
    public Result verifyQrCode(@RequestParam("uuid")String uuid){
        String status = redisService.get(QrCodeKey.UUID,uuid,String.class);
        if(status.isEmpty()) return Result.error(ErrorCodeEnum.UUID_EXPIRED);
        redisService.set(QrCodeKey.UUID,uuid,QrCodeStatus.VERIFIED);
        simpMessagingTemplate.convertAndSend("/topic/ws","已经确认");
        return Result.success("确认成功");
    }

前端

前端就不须要轮询的那两个方法了，只须要链接SockJs就行了，根据WebSocket发送的信息进行处理，咱们这里须要客户端链接上后进行订阅，指定接收服务器哪一个路由发送的消息

function connect() {
    var socket = new SockJS('/websocket');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
      console.log('Connected: ' + frame);
      stompClient.subscribe('/topic/ws', function (response) {//订阅路由消息
        console.log(response);
        if(response.body=="请确认"){
          layer.msg("请在你的app上确认登陆")
        }else if(response.body=="已经确认"){
          window.location.href = "success"
        }
      });
    });
  }

测试

打开主页建立二维码，链接WebSocket

拿到服务器端建立的uuid请求扫描接口

控制台打印请求确认信息

拿uuid请求确认接口

确认完成，跳转到登陆界面，发送已经确认