<dependencies>
    <!-- Spring Boot Web -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- Redis for session management -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-redis</artifactId>
    </dependency>
    <!-- 圖片處理 -->
    <dependency>
        <groupId>javax.imageio</groupId>
        <artifactId>imageio-core</artifactId>
        <version>1.0</version>
    </dependency>
    <!-- Base64編碼 -->
    <dependency>
        <groupId>commons-codec</groupId>
        <artifactId>commons-codec</artifactId>
    </dependency>
    <!-- 工具類 -->
    <dependency>
        <groupId>org.apache.commons</groupId>
        <artifactId>commons-lang3</artifactId>
    </dependency>
</dependencies>

server:
  port: 8080
spring:
  redis:
    host: localhost
    port: 6379
    database: 0
    timeout: 10000ms
# 滑塊驗(yàn)證配置
slider:
  # 圖片寬度
  image-width: 320
  # 圖片高度
  image-height: 160
  # 滑塊寬度
  slider-width: 50
  # 滑塊高度
  slider-height: 50
  # 允許的誤差范圍
  tolerance: 5
  # 過期時(shí)間（秒）
  expire-time: 120

@Data
public class SliderCaptcha {
    /** 唯一標(biāo)識(shí) */
    private String id;
    /** 背景圖片Base64 */
    private String backgroundImage;
    /** 滑塊圖片Base64 */
    private String sliderImage;
    /** 目標(biāo)位置X坐標(biāo) */
    private Integer targetX;
    /** 目標(biāo)位置Y坐標(biāo) */
    private Integer targetY;
    /** 滑塊寬度 */
    private Integer sliderWidth;
    /** 滑塊高度 */
    private Integer sliderHeight;
    /** 背景寬度 */
    private Integer bgWidth;
    /** 背景高度 */
    private Integer bgHeight;
}

@Data
public class VerifyRequest {
    /** 驗(yàn)證碼ID */
    private String captchaId;
    /** 拖動(dòng)距離X */
    private Integer moveX;
    /** 拖動(dòng)距離Y */
    private Integer moveY;
    /** 拖動(dòng)軌跡 */
    private String track;
    /** 拖動(dòng)用時(shí)（毫秒） */
    private Long duration;
    /** 加密參數(shù) */
    private String token;
}

@Data
@AllArgsConstructor
public class VerifyResult {
    /** 是否成功 */
    private Boolean success;
    /** 消息 */
    private String message;
    /** 驗(yàn)證令牌（成功時(shí)返回） */
    private String token;
}

@Component
public class ImageUtil {
    /**
     * 從資源目錄隨機(jī)獲取一張圖片
     */
    public BufferedImage getRandomImage() {
        try {
            // 從resources/images目錄獲取隨機(jī)圖片
            ResourcePatternResolver resolver = new PathMatchingResourcePatternResolver();
            Resource[] resources = resolver.getResources("classpath:images/*.jpg");
            if (resources.length == 0) {
                // 如果沒有圖片，創(chuàng)建默認(rèn)圖片
                return createDefaultImage();
            }
            Random random = new Random();
            Resource resource = resources[random.nextInt(resources.length)];
            return ImageIO.read(resource.getInputStream());
        } catch (IOException e) {
            log.error("讀取圖片失敗", e);
            return createDefaultImage();
        }
    }
    /**
     * 創(chuàng)建默認(rèn)圖片（當(dāng)沒有資源圖片時(shí)使用）
     */
    private BufferedImage createDefaultImage() {
        BufferedImage image = new BufferedImage(320, 160, BufferedImage.TYPE_INT_RGB);
        Graphics2D g = image.createGraphics();
        // 創(chuàng)建漸變背景
        GradientPaint gradient = new GradientPaint(
            0, 0, Color.LIGHT_GRAY, 
            320, 160, Color.DARK_GRAY
        );
        g.setPaint(gradient);
        g.fillRect(0, 0, 320, 160);
        // 添加一些噪點(diǎn)防止簡(jiǎn)單破解
        g.setColor(Color.WHITE);
        Random random = new Random();
        for (int i = 0; i < 100; i++) {
            int x = random.nextInt(320);
            int y = random.nextInt(160);
            g.fillRect(x, y, 1, 1);
        }
        g.dispose();
        return image;
    }
    /**
     * 圖片轉(zhuǎn)Base64
     */
    public String imageToBase64(BufferedImage image) {
        try (ByteArrayOutputStream baos = new ByteArrayOutputStream()) {
            ImageIO.write(image, "png", baos);
            byte[] bytes = baos.toByteArray();
            return "data:image/png;base64," + Base64.getEncoder().encodeToString(bytes);
        } catch (IOException e) {
            log.error("圖片轉(zhuǎn)Base64失敗", e);
            return null;
        }
    }
    /**
     * 生成滑塊拼圖
     * @param bgImage 背景圖片
     * @param targetX 目標(biāo)位置X
     * @param targetY 目標(biāo)位置Y
     * @param sliderWidth 滑塊寬度
     * @param sliderHeight 滑塊高度
     * @return 包含滑塊圖片和背景圖片的對(duì)象
     */
    public SliderImageInfo generateSliderImage(BufferedImage bgImage, 
                                               int targetX, 
                                               int targetY,
                                               int sliderWidth,
                                               int sliderHeight) {
        int bgWidth = bgImage.getWidth();
        int bgHeight = bgImage.getHeight();
        // 創(chuàng)建滑塊圖片
        BufferedImage sliderImage = new BufferedImage(sliderWidth, sliderHeight, BufferedImage.TYPE_4BYTE_ABGR);
        Graphics2D sliderGraphics = sliderImage.createGraphics();
        // 復(fù)制背景圖上的滑塊區(qū)域到滑塊圖片
        sliderGraphics.drawImage(bgImage, 
                                0, 0, sliderWidth, sliderHeight,
                                targetX, targetY, targetX + sliderWidth, targetY + sliderHeight,
                                null);
        // 對(duì)滑塊邊緣進(jìn)行處理，制造凹凸效果
        processSliderEdges(sliderImage, sliderGraphics);
        // 在背景圖上制造缺口（填充白色并添加陰影）
        Graphics2D bgGraphics = bgImage.createGraphics();
        createHole(bgGraphics, targetX, targetY, sliderWidth, sliderHeight);
        sliderGraphics.dispose();
        bgGraphics.dispose();
        return new SliderImageInfo(bgImage, sliderImage);
    }
    /**
     * 處理滑塊邊緣，制造凹凸效果
     */
    private void processSliderEdges(BufferedImage sliderImage, Graphics2D graphics) {
        int width = sliderImage.getWidth();
        int height = sliderImage.getHeight();
        // 添加陰影效果
        graphics.setColor(new Color(0, 0, 0, 80));
        graphics.setStroke(new BasicStroke(2f));
        graphics.drawRect(0, 0, width - 1, height - 1);
        // 添加內(nèi)陰影
        graphics.setColor(new Color(255, 255, 255, 50));
        graphics.drawRect(1, 1, width - 3, height - 3);
        // 邊緣模糊處理
        float[] kernel = new float[9];
        Arrays.fill(kernel, 1f/9f);
        ConvolveOp blur = new ConvolveOp(new Kernel(3, 3, kernel));
        sliderImage.setRGB(0, 0, width, height, 
                          blur.filter(sliderImage.getRGB(0, 0, width, height, null, 0, width), 
                          null, 0, width), 0, width);
    }
    /**
     * 在背景圖上創(chuàng)建缺口
     */
    private void createHole(Graphics2D graphics, int x, int y, int width, int height) {
        // 填充白色表示缺口
        graphics.setColor(Color.WHITE);
        graphics.fillRect(x, y, width, height);
        // 添加缺口陰影
        graphics.setColor(new Color(0, 0, 0, 50));
        graphics.setStroke(new BasicStroke(2f));
        graphics.drawRect(x, y, width - 1, height - 1);
        // 添加缺口內(nèi)陰影
        graphics.setColor(new Color(255, 255, 255, 100));
        graphics.drawRect(x + 1, y + 1, width - 3, height - 3);
    }
    /**
     * 隨機(jī)生成缺口位置
     */
    public Point generateRandomPosition(int bgWidth, int bgHeight, 
                                        int sliderWidth, int sliderHeight) {
        Random random = new Random();
        // 確保滑塊在圖片范圍內(nèi)，留出邊緣空間
        int minX = 20;
        int maxX = bgWidth - sliderWidth - 20;
        int minY = 10;
        int maxY = bgHeight - sliderHeight - 10;
        int targetX = random.nextInt(maxX - minX + 1) + minX;
        int targetY = random.nextInt(maxY - minY + 1) + minY;
        return new Point(targetX, targetY);
    }
    @Data
    @AllArgsConstructor
    public static class SliderImageInfo {
        private BufferedImage background;
        private BufferedImage slider;
    }
}

@Service
@Slf4j
public class SliderCaptchaService {
    @Autowired
    private StringRedisTemplate redisTemplate;
    @Autowired
    private ImageUtil imageUtil;
    @Value("${slider.image-width:320}")
    private int imageWidth;
    @Value("${slider.image-height:160}")
    private int imageHeight;
    @Value("${slider.slider-width:50}")
    private int sliderWidth;
    @Value("${slider.slider-height:50}")
    private int sliderHeight;
    @Value("${slider.tolerance:5}")
    private int tolerance;
    @Value("${slider.expire-time:120}")
    private long expireTime;
    /**
     * 生成滑塊驗(yàn)證碼
     */
    public SliderCaptcha generate() {
        try {
            // 1. 獲取隨機(jī)背景圖片
            BufferedImage originalImage = imageUtil.getRandomImage();
            // 2. 調(diào)整圖片大小
            originalImage = resizeImage(originalImage, imageWidth, imageHeight);
            // 3. 隨機(jī)生成缺口位置
            Point targetPoint = imageUtil.generateRandomPosition(
                imageWidth, imageHeight, sliderWidth, sliderHeight
            );
            // 4. 生成滑塊圖片和帶缺口的背景圖片
            ImageUtil.SliderImageInfo sliderImageInfo = imageUtil.generateSliderImage(
                originalImage, 
                targetPoint.x, 
                targetPoint.y,
                sliderWidth, 
                sliderHeight
            );
            // 5. 圖片轉(zhuǎn)Base64
            String backgroundBase64 = imageUtil.imageToBase64(sliderImageInfo.getBackground());
            String sliderBase64 = imageUtil.imageToBase64(sliderImageInfo.getSlider());
            // 6. 創(chuàng)建驗(yàn)證碼對(duì)象
            SliderCaptcha captcha = new SliderCaptcha();
            String captchaId = UUID.randomUUID().toString();
            captcha.setId(captchaId);
            captcha.setBackgroundImage(backgroundBase64);
            captcha.setSliderImage(sliderBase64);
            captcha.setTargetX(targetPoint.x);
            captcha.setTargetY(targetPoint.y);
            captcha.setSliderWidth(sliderWidth);
            captcha.setSliderHeight(sliderHeight);
            captcha.setBgWidth(imageWidth);
            captcha.setBgHeight(imageHeight);
            // 7. 將目標(biāo)位置存入Redis
            saveToRedis(captchaId, captcha);
            return captcha;
        } catch (Exception e) {
            log.error("生成滑塊驗(yàn)證碼失敗", e);
            throw new RuntimeException("生成驗(yàn)證碼失敗", e);
        }
    }
    /**
     * 調(diào)整圖片大小
     */
    private BufferedImage resizeImage(BufferedImage originalImage, int targetWidth, int targetHeight) {
        BufferedImage resizedImage = new BufferedImage(targetWidth, targetHeight, BufferedImage.TYPE_INT_RGB);
        Graphics2D g = resizedImage.createGraphics();
        g.drawImage(originalImage, 0, 0, targetWidth, targetHeight, null);
        g.dispose();
        return resizedImage;
    }
    /**
     * 保存驗(yàn)證碼信息到Redis
     */
    private void saveToRedis(String captchaId, SliderCaptcha captcha) {
        // 保存目標(biāo)位置
        Map<String, String> map = new HashMap<>();
        map.put("targetX", String.valueOf(captcha.getTargetX()));
        map.put("targetY", String.valueOf(captcha.getTargetY()));
        map.put("timestamp", String.valueOf(System.currentTimeMillis()));
        redisTemplate.opsForHash().putAll(getRedisKey(captchaId), map);
        redisTemplate.expire(getRedisKey(captchaId), expireTime, TimeUnit.SECONDS);
    }
    /**
     * 驗(yàn)證滑塊拖動(dòng)
     */
    public VerifyResult verify(VerifyRequest request) {
        try {
            // 1. 基本參數(shù)驗(yàn)證
            if (request == null || request.getCaptchaId() == null) {
                return new VerifyResult(false, "參數(shù)錯(cuò)誤", null);
            }
            // 2. 從Redis獲取目標(biāo)位置
            Map<Object, Object> captchaData = redisTemplate.opsForHash()
                .entries(getRedisKey(request.getCaptchaId()));
            if (captchaData.isEmpty()) {
                return new VerifyResult(false, "驗(yàn)證碼已過期", null);
            }
            int targetX = Integer.parseInt(captchaData.get("targetX").toString());
            int targetY = Integer.parseInt(captchaData.get("targetY").toString());
            long generateTime = Long.parseLong(captchaData.get("timestamp").toString());
            // 3. 驗(yàn)證軌跡
            if (!validateTrack(request, generateTime)) {
                return new VerifyResult(false, "軌跡驗(yàn)證失敗", null);
            }
            // 4. 驗(yàn)證拖動(dòng)距離
            int deviation = Math.abs(request.getMoveX() - targetX);
            if (deviation <= tolerance) {
                // 驗(yàn)證成功，刪除已使用的驗(yàn)證碼
                redisTemplate.delete(getRedisKey(request.getCaptchaId()));
                // 生成驗(yàn)證令牌
                String token = generateToken(request.getCaptchaId());
                return new VerifyResult(true, "驗(yàn)證成功", token);
            } else {
                return new VerifyResult(false, "驗(yàn)證失敗，請(qǐng)重試", null);
            }
        } catch (Exception e) {
            log.error("驗(yàn)證失敗", e);
            return new VerifyResult(false, "驗(yàn)證異常", null);
        }
    }
    /**
     * 軌跡驗(yàn)證
     */
    private boolean validateTrack(VerifyRequest request, long generateTime) {
        // 1. 驗(yàn)證時(shí)間是否合理
        long currentTime = System.currentTimeMillis();
        long timeDiff = currentTime - generateTime;
        if (timeDiff > expireTime * 1000) {
            return false; // 超時(shí)
        }
        // 2. 驗(yàn)證拖動(dòng)時(shí)間（通常在300ms到3000ms之間）
        if (request.getDuration() == null || 
            request.getDuration() < 300 || 
            request.getDuration() > 30000) {
            return false;
        }
        // 3. 驗(yàn)證軌跡數(shù)據(jù)（如果有）
        if (request.getTrack() != null) {
            // 這里可以解析軌跡JSON，驗(yàn)證加速度、抖動(dòng)等特征
            return validateTrackData(request.getTrack());
        }
        return true;
    }
    /**
     * 驗(yàn)證軌跡數(shù)據(jù)
     */
    private boolean validateTrackData(String track) {
        try {
            // 解析軌跡JSON
            // 示例：[{"x":0,"y":0,"t":0},{"x":10,"y":0,"t":100},...]
            List<TrackPoint> points = parseTrack(track);
            if (points.isEmpty()) {
                return false;
            }
            // 驗(yàn)證軌跡合理性
            boolean hasMovement = false;
            int lastX = -1;
            int continuousFrames = 0;
            for (TrackPoint point : points) {
                // 檢查是否有移動(dòng)
                if (point.getX() > 0) {
                    hasMovement = true;
                }
                // 檢查是否連續(xù)移動(dòng)（防止簡(jiǎn)單模擬）
                if (lastX >= 0 && Math.abs(point.getX() - lastX) <= 1) {
                    continuousFrames++;
                } else {
                    continuousFrames = 0;
                }
                // 如果連續(xù)3幀沒有移動(dòng)，可能有問題
                if (continuousFrames > 3) {
                    return false;
                }
                lastX = point.getX();
            }
            return hasMovement;
        } catch (Exception e) {
            log.warn("軌跡數(shù)據(jù)解析失敗", e);
            return false;
        }
    }
    /**
     * 解析軌跡JSON
     */
    private List<TrackPoint> parseTrack(String trackJson) {
        // 這里可以使用Jackson解析JSON
        // 簡(jiǎn)化實(shí)現(xiàn)，實(shí)際使用時(shí)需要正確解析
        return new ArrayList<>();
    }
    /**
     * 生成驗(yàn)證令牌
     */
    private String generateToken(String captchaId) {
        String token = UUID.randomUUID().toString();
        // 存儲(chǔ)令牌，有效期可設(shè)置短一些
        redisTemplate.opsForValue().set(
            "token:" + token, 
            captchaId, 
            5, 
            TimeUnit.MINUTES
        );
        return token;
    }
    /**
     * 獲取Redis鍵名
     */
    private String getRedisKey(String captchaId) {
        return "captcha:slider:" + captchaId;
    }
    /**
     * 軌跡點(diǎn)內(nèi)部類
     */
    @Data
    private static class TrackPoint {
        private int x;
        private int y;
        private long t;
    }
}

@RestController
@RequestMapping("/api/captcha")
@Slf4j
public class CaptchaController {
    @Autowired
    private SliderCaptchaService captchaService;
    /**
     * 獲取滑塊驗(yàn)證碼
     */
    @GetMapping("/slider/generate")
    public ResponseEntity<SliderCaptcha> generate() {
        try {
            SliderCaptcha captcha = captchaService.generate();
            return ResponseEntity.ok(captcha);
        } catch (Exception e) {
            log.error("生成驗(yàn)證碼失敗", e);
            return ResponseEntity.status(500).body(null);
        }
    }
    /**
     * 驗(yàn)證滑塊
     */
    @PostMapping("/slider/verify")
    public ResponseEntity<VerifyResult> verify(@RequestBody VerifyRequest request) {
        try {
            VerifyResult result = captchaService.verify(request);
            return ResponseEntity.ok(result);
        } catch (Exception e) {
            log.error("驗(yàn)證失敗", e);
            return ResponseEntity.status(500)
                .body(new VerifyResult(false, "驗(yàn)證服務(wù)異常", null));
        }
    }
    /**
     * 檢查驗(yàn)證狀態(tài)
     */
    @GetMapping("/slider/check/{token}")
    public ResponseEntity<Boolean> checkStatus(@PathVariable String token) {
        // 可以檢查token是否有效
        return ResponseEntity.ok(true);
    }
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>滑塊拼圖驗(yàn)證</title>
    <style>
        .captcha-container {
            width: 340px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .bg-image-container {
            position: relative;
            width: 320px;
            height: 160px;
            margin-bottom: 20px;
            overflow: hidden;
        }
        .bg-image {
            width: 100%;
            height: 100%;
        }
        .slider-image {
            position: absolute;
            cursor: move;
            z-index: 10;
            width: 50px;
            height: 50px;
        }
        .slider-track {
            width: 320px;
            height: 40px;
            background: #f0f0f0;
            border-radius: 20px;
            position: relative;
            margin-top: 20px;
        }
        .slider-button {
            position: absolute;
            width: 40px;
            height: 40px;
            background: #4CAF50;
            border-radius: 50%;
            cursor: grab;
            left: 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        .slider-button.dragging {
            cursor: grabbing;
            transform: scale(1.1);
        }
        .result-message {
            margin-top: 20px;
            padding: 10px;
            border-radius: 4px;
            text-align: center;
        }
        .success {
            background: #d4edda;
            color: #155724;
        }
        .error {
            background: #f8d7da;
            color: #721c24;
        }
        .refresh-btn {
            background: #007bff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="captcha-container">
        <h3 style="text-align:center;">滑塊拼圖驗(yàn)證</h3>
        <!-- 驗(yàn)證碼區(qū)域 -->
        <div class="bg-image-container" id="captchaArea">
            <img class="bg-image" id="bgImage" src="" alt="背景圖">
            <img class="slider-image" id="sliderImage" src="" alt="滑塊" draggable="false">
        </div>
        <!-- 滑塊軌道 -->
        <div class="slider-track" id="sliderTrack">
            <div class="slider-button" id="sliderButton"></div>
        </div>
        <!-- 結(jié)果顯示 -->
        <div class="result-message" id="resultMessage"></div>
        <!-- 刷新按鈕 -->
        <button class="refresh-btn" onclick="refreshCaptcha()">刷新驗(yàn)證碼</button>
    </div>
    <script>
        // 當(dāng)前驗(yàn)證碼ID
        let captchaId = '';
        let targetX = 0;
        let isDragging = false;
        let startX = 0;
        let currentX = 0;
        let trackData = [];
        let startTime = 0;
        // 獲取驗(yàn)證碼
        async function getCaptcha() {
            try {
                const response = await fetch('/api/captcha/slider/generate');
                const data = await response.json();
                // 更新頁面
                document.getElementById('bgImage').src = data.backgroundImage;
                document.getElementById('sliderImage').src = data.sliderImage;
                // 保存驗(yàn)證碼信息
                captchaId = data.id;
                targetX = data.targetX;
                // 重置滑塊位置
                resetSlider();
            } catch (error) {
                console.error('獲取驗(yàn)證碼失敗:', error);
            }
        }
        // 重置滑塊
        function resetSlider() {
            const sliderButton = document.getElementById('sliderButton');
            const sliderImage = document.getElementById('sliderImage');
            sliderButton.style.left = '0px';
            sliderImage.style.left = '0px';
            document.getElementById('resultMessage').innerHTML = '';
        }
        // 刷新驗(yàn)證碼
        function refreshCaptcha() {
            getCaptcha();
        }
        // 初始化拖動(dòng)事件
        function initDragEvents() {
            const sliderButton = document.getElementById('sliderButton');
            const sliderImage = document.getElementById('sliderImage');
            const track = document.getElementById('sliderTrack');
            // 鼠標(biāo)按下
            sliderButton.addEventListener('mousedown', startDrag);
            // 觸摸事件支持
            sliderButton.addEventListener('touchstart', startDrag);
            // 全局鼠標(biāo)移動(dòng)和松開
            document.addEventListener('mousemove', drag);
            document.addEventListener('mouseup', stopDrag);
            document.addEventListener('touchmove', drag);
            document.addEventListener('touchend', stopDrag);
            function startDrag(e) {
                e.preventDefault();
                isDragging = true;
                sliderButton.classList.add('dragging');
                // 記錄起始位置和時(shí)間
                const clientX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX;
                startX = clientX - sliderButton.offsetLeft;
                // 開始記錄軌跡
                trackData = [];
                startTime = Date.now();
                // 添加起始點(diǎn)
                trackData.push({
                    x: 0,
                    y: 0,
                    t: 0
                });
            }
            function drag(e) {
                if (!isDragging) return;
                e.preventDefault();
                const clientX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX;
                // 計(jì)算新位置
                let newLeft = clientX - startX;
                // 限制范圍
                const maxLeft = track.offsetWidth - sliderButton.offsetWidth;
                newLeft = Math.max(0, Math.min(newLeft, maxLeft));
                // 更新滑塊位置
                sliderButton.style.left = newLeft + 'px';
                sliderImage.style.left = newLeft + 'px';
                // 記錄軌跡點(diǎn)（每10ms記錄一次）
                const currentTime = Date.now();
                if (trackData.length === 0 || currentTime - trackData[trackData.length - 1].t > 10) {
                    trackData.push({
                        x: newLeft,
                        y: 0,
                        t: currentTime - startTime
                    });
                }
                currentX = newLeft;
            }
            function stopDrag(e) {
                if (!isDragging) return;
                isDragging = false;
                sliderButton.classList.remove('dragging');
                // 記錄結(jié)束點(diǎn)
                trackData.push({
                    x: currentX,
                    y: 0,
                    t: Date.now() - startTime
                });
                // 驗(yàn)證滑塊
                verifySlider();
            }
        }
        // 驗(yàn)證滑塊
        async function verifySlider() {
            const duration = Date.now() - startTime;
            const request = {
                captchaId: captchaId,
                moveX: currentX,
                moveY: 0,
                track: JSON.stringify(trackData),
                duration: duration
            };
            try {
                const response = await fetch('/api/captcha/slider/verify', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(request)
                });
                const result = await response.json();
                const resultDiv = document.getElementById('resultMessage');
                if (result.success) {
                    resultDiv.className = 'result-message success';
                    resultDiv.innerHTML = '? 驗(yàn)證成功！';
                    // 驗(yàn)證成功后可以執(zhí)行后續(xù)操作
                    setTimeout(() => {
                        alert('驗(yàn)證通過，可以執(zhí)行下一步操作');
                    }, 500);
                } else {
                    resultDiv.className = 'result-message error';
                    resultDiv.innerHTML = '? ' + result.message;
                    // 驗(yàn)證失敗，重置滑塊
                    setTimeout(() => {
                        resetSlider();
                    }, 1000);
                }
            } catch (error) {
                console.error('驗(yàn)證失敗:', error);
            }
        }
        // 頁面加載時(shí)初始化
        window.onload = function() {
            getCaptcha();
            initDragEvents();
        };
    </script>
</body>
</html>

// 添加加密參數(shù)
@Data
public class EncryptedRequest {
    private String data; // 加密的請(qǐng)求數(shù)據(jù)
    private String sign; // 簽名
}
// 使用AES加密關(guān)鍵參數(shù)
public String encryptData(String data, String key) {
    // AES加密實(shí)現(xiàn)
}

// 引入機(jī)器學(xué)習(xí)模型驗(yàn)證軌跡
public boolean mlValidateTrack(List<TrackPoint> track) {
    // 調(diào)用訓(xùn)練好的模型
    // 返回是否為真人操作
}

@Configuration
public class RedisConfig {
    @Bean
    public RedisTemplate<String, Object> redisTemplate(
            RedisConnectionFactory factory) {
        // 配置Redis序列化
        // 支持分布式部署
    }
}