JAVA和Nginx 教程大全

网站首页 > 精选教程 正文

Spring Boot实现一个滑动验证的验证码操作?

wys521 2024-11-11 16:13:04 精选教程 51 ℃ 0 评论

滑动验证码操作是现在系统校验一种常用的方式，在SpringBoot中实现滑动验证码操作，首先需要创建背景图和滑动图两个图片，然后标记滑动块在背景图上的位置，通过前后端的交互来实现滑动验证码的验证操作。下面我们就来详细看看如何实现一个简单的滑动验证码操作。

生成验证码图片和滑块

在SpringBoot中，我们可以使用Java的图形处理库来生成对应的背景图和滑动图片，这里我们演示了通过java.awt库来生成背景图片和滑块，如下所示。

import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.ResponseBody;

@RestController
public class CaptchaController {

    private static final int WIDTH = 300;
    private static final int HEIGHT = 150;
    private static final int SLIDER_WIDTH = 50;
    private static final int SLIDER_HEIGHT = 50;

    @GetMapping("/captcha")
    @ResponseBody
    public CaptchaResponse getCaptcha() throws IOException {
        BufferedImage bgImage = createBackgroundImage();
        Point sliderPoint = createSliderImage(bgImage);
        
        ByteArrayOutputStream bgOutputStream = new ByteArrayOutputStream();
        ImageIO.write(bgImage, "png", bgOutputStream);
        String bgImageBase64 = Base64.getEncoder().encodeToString(bgOutputStream.toByteArray());
        
        return new CaptchaResponse(bgImageBase64, sliderPoint.x);
    }

    private BufferedImage createBackgroundImage() {
        BufferedImage image = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
        Graphics2D g = image.createGraphics();
        g.setColor(Color.LIGHT_GRAY);
        g.fillRect(0, 0, WIDTH, HEIGHT);
        g.dispose();
        return image;
    }

    private Point createSliderImage(BufferedImage bgImage) {
        Graphics2D g = bgImage.createGraphics();
        g.setColor(Color.WHITE);
        Random random = new Random();
        int x = random.nextInt(WIDTH - SLIDER_WIDTH);
        int y = random.nextInt(HEIGHT - SLIDER_HEIGHT);
        g.fillRect(x, y, SLIDER_WIDTH, SLIDER_HEIGHT);
        g.dispose();
        return new Point(x, y);
    }

    static class CaptchaResponse {
        public String bgImage;
        public int sliderX;

        public CaptchaResponse(String bgImage, int sliderX) {
            this.bgImage = bgImage;
            this.sliderX = sliderX;
        }
    }
}

前端展示和交互

使用HTML和JavaScript来展示滑动验证码，并让用户滑动滑块，来进行滑动块的验证操作。下面的例子中，我们通过JavaScript的验证来实现直接的验证操作，当然我们也可以实现后端验证。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Captcha</title>
    <style>
        .captcha-container {
            position: relative;
            width: 300px;
            height: 150px;
            border: 1px solid #ccc;
        }
        .slider {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #fff;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="captcha-container">
        <img id="bgImage" src="" alt="Captcha Background">
        <div class="slider" id="slider"></div>
    </div>
    <script>
        let slider = document.getElementById('slider');
        let container = document.querySelector('.captcha-container');
        let bgImage = document.getElementById('bgImage');

        fetch('/captcha')
            .then(response => response.json())
            .then(data => {
                bgImage.src = 'data:image/png;base64,' + data.bgImage;
                slider.dataset.correctX = data.sliderX;
            });

        let startX, isDragging = false;

        slider.addEventListener('mousedown', function(event) {
            startX = event.clientX;
            isDragging = true;
        });

        document.addEventListener('mousemove', function(event) {
            if (isDragging) {
                let moveX = event.clientX - startX;
                if (moveX >= 0 && moveX <= container.clientWidth - slider.clientWidth) {
                    slider.style.left = moveX + 'px';
                }
            }
        });

        document.addEventListener('mouseup', function(event) {
            if (isDragging) {
                isDragging = false;
                let correctX = parseInt(slider.dataset.correctX);
                let currentX = parseInt(slider.style.left || 0);
                if (Math.abs(correctX - currentX) < 5) {
                    alert('Captcha passed');
                } else {
                    alert('Captcha failed');
                }
                slider.style.left = '0px';
            }
        });
    </script>
</body>
</html>

后端验证

在滑块移动完成之后，我们将滑块的位置发送到后端进行位置认证操作，在上面的例子中，我们是通过JavaScript来进行的直接验证，当然也可以通过后端验证，就是将相关的参数记录到后端缓存中，当前端调用将相关的参数传到后端之后，通过后端的校验逻辑来实现验证码的校验，当然在一般情况下对于防刷操作的验证码操作可以在前端进行验证，毕竟就是为了防刷验证，如果对于需要校验的验证码则是需要传入到后端进行校验

总结

这种方式只是一个简单的滑动验证操作实现，在实际项目中需要一些更加复杂的功能来实现操作，例如动态生成复杂的图形验证、或者使用缓存保存验证码的操作等等来引入相关的安全操作。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表