slider

Author: spongehah

README.md

@@ -0,0 +1,110 @@
+# SpringBoot + 原生JS自实现滑块验证码
+
+## 功能描述：
+
+从服务端静态文件夹随机读取一张本地图片，然后随机生成坐标(x, y)，并将坐标x保存在session会话中，在坐标(x, y)处抠出滑块形状，设置透明度阴影更明显（可调），然后将生成的背景图片和滑块图片传递给前端，前端渲染这两张图片构成滑块验证码，监听拖拉事件，将拖拉停止处的 x坐标 传递给服务端进行校验，若差值在一定范围内则验证通过。
+
+## 优点：
+
+坐标(x, y)为服务端生成，不会传递给前端，因此前端无法窃取到 x坐标 的值，只能通过认为拉取滑块，有效防止了机器盗刷接口（比如短信、登录等）
+
+加以鼠标拖动过程中y轴轨迹、以及拖动时间辅助验证
+
+因本人使用原因，此滑块验证码会读取屏幕宽度，整体宽度 = 屏幕宽度
+
+## 效果图：
+
+![image-20240523203731245](image/README.assets/image-20240523203731245.png)
+
+![image-20240523203845946](image/README.assets/image-20240523203845946.png)
+
+## 运行方式：
+
+```
+git clone https://github.com/spongehah/slider-captcha.git
+```
+
+打开SpringBoot项目，可直接运行，访问方式：http://localhost:8080
+
+## 自定义：
+
+在index.html文件中：
+
+```html
+<script>
+    var captcha = sliderCaptcha({
+        id: 'captcha',
+        width: 280,	//画布宽度（因为整体宽度 = 屏幕宽度，所以此参数废弃）
+        height: 155,	//画布高度（因为整体宽度 = 屏幕宽度，所以此参数废弃）
+        offset: 5,		//容错偏差：（废弃）
+        loadingText: '正在加载中...',
+        failedText: '再试一次',
+        barText: '向右滑动填充拼图',
+        repeatIcon: 'fa fa-redo',
+        remoteUrl: 'http://localhost:8080',		//服务端访问路径前缀
+        onSuccess: function () {  //滑块验证码验证成功调用（可替换）
+            var handler = setTimeout(function () {
+                window.clearTimeout(handler);
+            }, 500);
+        },
+        onFail: function () {  //滑块验证码验证失败调用（可替换）
+            var handler = setTimeout(function () {
+                window.clearTimeout(handler);
+            }, 500);
+        },
+        verify: function (startTime, endTime, left, trail, url) {//向服务端发送参数进行校验
+            var result = false;
+            $.ajax({
+                url: url + "/verifyCode",	//url为上面弄自定义的remoteUrl，拼接上服务端验证接口的uri
+                data: {
+                    startTime: startTime,
+                    endTime: endTime,
+                    left: left,
+                    trail: trail
+                },
+                async: false,
+                cache: false,
+                type: 'POST',
+                contentType: 'application/x-www-form-urlencoded',
+                dataType: 'json',
+                success: function (response) {
+                    result = response;
+                },
+                error: function (error) {
+                    console.log(error);
+                }
+            });
+            return result;
+        }
+    });
+</script>
+</body>
+```
+
+在longbow.slidercaptcha.js文件中：
+
+第94 ~ 114 行：
+
+```js
+_proto.initSliderCaptcha = function () {
+    var that = this;
+    var data;
+    $.ajax({
+        url: this.options.remoteUrl + '/getSliderCaptcha',	//拼接上服务端获取两张图片的接口uri
+        type: 'GET',
+        async: false,
+        cache: false,
+        data: {
+            width: Math.floor(that.options.width),
+            height: Math.floor(that.options.height)
+        },
+        success: function (res) {
+            data = res;
+        },
+        error: function () {
+            console.error('Failed to fetch slider captcha data');
+        }
+    });
+    that.init(data);
+};
+```

image/README.assets/image-20240523203731245.png

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0"
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+
+    <groupId>org.example</groupId>
+    <artifactId>slider-demo</artifactId>
+    <version>1.0-SNAPSHOT</version>
+    <parent>
+        <groupId>org.springframework.boot</groupId>
+        <artifactId>spring-boot-dependencies</artifactId>
+        <version>2.6.13</version>
+    </parent>
+
+    <properties>
+        <java.version>1.8</java.version>
+        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
+        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
+        <spring-boot.version>2.6.13</spring-boot.version>
+    </properties>
+
+    <dependencies>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-web</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-test</artifactId>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-thymeleaf</artifactId>
+        </dependency>
+    </dependencies>
+
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-compiler-plugin</artifactId>
+                <version>3.8.1</version>
+                <configuration>
+                    <source>1.8</source>
+                    <target>1.8</target>
+                    <encoding>UTF-8</encoding>
+                </configuration>
+            </plugin>
+            <plugin>
+                <groupId>org.springframework.boot</groupId>
+                <artifactId>spring-boot-maven-plugin</artifactId>
+                <version>${spring-boot.version}</version>
+                <configuration>
+                    <mainClass>com.example.demo.DemoApplication</mainClass>
+                    <skip>true</skip>
+                </configuration>
+                <executions>
+                    <execution>
+                        <id>repackage</id>
+                        <goals>
+                            <goal>repackage</goal>
+                        </goals>
+                    </execution>
+                </executions>
+            </plugin>
+        </plugins>
+    </build>
+</project>

image/README.assets/image-20240523203845946.png

@@ -0,0 +1,12 @@
+package com.hah.demo;
+
+import org.springframework.boot.SpringApplication;
+import org.springframework.boot.autoconfigure.SpringBootApplication;
+
+@SpringBootApplication
+public class SliderApplication {
+
+    public static void main(String[] args) {
+        SpringApplication.run(SliderApplication.class);
+    }
+}

pom.xml

@@ -0,0 +1,35 @@
+package com.hah.demo.controller;
+
+import com.hah.demo.service.ISliderCaptchaService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.ResponseEntity;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.ArrayList;
+import java.util.Map;
+
+@Controller
+public class SliderCaptchaController {
+
+    @Autowired
+    private ISliderCaptchaService sliderCaptchaService;
+
+    @GetMapping("/index")
+    public String index() {
+        return "index";
+    }
+
+    @GetMapping("/getSliderCaptcha")
+    @ResponseBody
+    public ResponseEntity<Map<String, String>> getSliderCaptcha(@RequestParam(value = "width", defaultValue = "280") Integer width,
+                                                                @RequestParam(value = "height", defaultValue = "155") Integer height) {
+        return ResponseEntity.ok(sliderCaptchaService.getSliderImage(width, height));
+    }
+
+    @PostMapping("/verifyCode")
+    @ResponseBody
+    public boolean verifyCode(Long startTime, Long endTime, Integer left, ArrayList<Integer> trail) {
+        return sliderCaptchaService.verifyCode(startTime, endTime, left, trail);
+    }
+}

src/main/java/com/hah/demo/SliderApplication.java

@@ -0,0 +1,11 @@
+package com.hah.demo.service;
+
+import java.util.List;
+import java.util.Map;
+
+public interface ISliderCaptchaService {
+
+    Map<String, String> getSliderImage(Integer width, Integer height);
+
+    boolean verifyCode(Long startTime, Long endTime, Integer left, List<Integer> trail);
+}

src/main/java/com/hah/demo/controller/SliderCaptchaController.java

@@ -0,0 +1,75 @@
+package com.hah.demo.service.impl;
+
+import com.hah.demo.service.ISliderCaptchaService;
+import com.hah.demo.utils.DrawCaptchaUtil;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import org.springframework.util.ClassUtils;
+
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpSession;
+import java.io.File;
+import java.util.*;
+
+@Service
+public class SliderCaptchaService implements ISliderCaptchaService {
+
+    @Autowired
+    private HttpServletRequest request;
+
+    @Override
+    public Map<String, String> getSliderImage(Integer width, Integer height) {
+        String imageFilePath = ClassUtils.getDefaultClassLoader().getResource("static").getPath();
+        File bgImageFile = new File(imageFilePath + "/images/");
+        File slideImageFile = new File(imageFilePath + "/slide/slide1.png");// 若要无边框选择slide.png
+        if (bgImageFile.isDirectory()) {
+            File[] files = bgImageFile.listFiles();
+            Random random = new Random();
+            int i = random.nextInt(files.length);
+            bgImageFile = files[i];
+        }
+        int[] point = DrawCaptchaUtil.randomAnchorPoint(width, height);
+        HttpSession session = request.getSession();
+        session.setAttribute(session.getId(), point[0]);
+        String bgImageBase64 = DrawCaptchaUtil.getBgImageBase64(bgImageFile, slideImageFile, point, width, height);
+        String slideImageBase64 = DrawCaptchaUtil.getSlideImageBase64(bgImageFile, slideImageFile, point, width, height);
+        Map<String, String> images = new HashMap<>();
+        images.put("bgImage", bgImageBase64);
+        images.put("slideImage", slideImageBase64);
+        return images;
+    }
+
+    @Override
+    public boolean verifyCode(Long startTime, Long endTime, Integer left, List<Integer> trail) {
+        try {
+            // 校验时间
+            long dif = endTime - startTime;
+            if (dif > 10000L) {// 只允许拖10s
+                return false;
+            }
+            // 校验最后落点
+            HttpSession session = request.getSession();
+            Integer offset = (Integer) session.getAttribute(session.getId());
+            // 获取offset后立即删除，防止重复验证
+            session.removeAttribute(session.getId());
+            Integer padding = offset - left;
+            if (padding > 5 || padding < -5) {
+                return false;
+            }
+            // 校验y轴轨迹
+            int sum = 0;
+            for (Integer num : trail) {
+                sum += num;
+            }
+            double avg = sum * 1.0 / trail.size();
+            double sum2 = 0.0;
+            for (Integer data : trail) {
+                sum2 += Math.pow(data - avg, 2);
+            }
+            double stddev = sum2 / trail.size();
+            return stddev != 0;
+        } catch (Exception e) {
+            return false;
+        }
+    }
+}