spring框架实现滑动验证码功能

1. 团体形貌

之前项目须要在验证码模块，增长滑动验证码，用来给手机端利用的，大概看了下，紧张方法就是将图片切割，然跋文着偏移量，举行滑动，前端验证的时间，须要用前端传入的偏移量和天生的偏移量举行对比，如果在阈值之内，就验证通过，否则就不通过。具体实现方式见下文。之前没时间写，迩来记载一下。
2. 具体实现

本工程紧张依赖springboot框架，而且须要redis存验证码的信息，还须要几个图片，用来天生验证码。
2.1 滑动验证码实体类

1. package com.thcb.captchademo.captcha.domain;
3. import lombok.Data;
5. /**
6. * 滑动验证码
7. *
8. * @author thcb
9. * @date 2023-05-25
10. */
12. @Data
13. public class Captcha {
15.     /**
16.      * 随机字符串
17.      **/
18.     private String nonceStr;
19.     /**
20.      * 验证值
21.      **/
22.     private String value;
23.     /**
24.      * 生成的画布的base64
25.      **/
26.     private String canvasSrc;
27.     /**
28.      * 画布宽度
29.      **/
30.     private Integer canvasWidth;
31.     /**
32.      * 画布高度
33.      **/
34.     private Integer canvasHeight;
35.     /**
36.      * 生成的阻塞块的base64
37.      **/
38.     private String blockSrc;
39.     /**
40.      * 阻塞块宽度
41.      **/
42.     private Integer blockWidth;
43.     /**
44.      * 阻塞块高度
45.      **/
46.     private Integer blockHeight;
47.     /**
48.      * 阻塞块凸凹半径
49.      **/
50.     private Integer blockRadius;
51.     /**
52.      * 阻塞块的横轴坐标
53.      **/
54.     private Integer blockX;
55.     /**
56.      * 阻塞块的纵轴坐标
57.      **/
58.     private Integer blockY;
59.     /**
60.      * 图片获取位置
61.      **/
62.     private Integer place;
63. }

复制代码

2.2 滑动验证码登录VO

1. package com.thcb.captchademo.captcha.domain;
3. import lombok.Data;
5. /**
6. * 滑动验证码登录Vo
7. *
8. * @author thcb
9. * @date 2023-05-25
10. */
12. @Data
13. public class LoginVo {
14.     /**
15.      * 随机字符串
16.      **/
17.     private String nonceStr;
18.     /**
19.      * 验证值
20.      **/
21.     private String value;
22. }

复制代码

2.3 滑动验证码接口返回类

1. package com.thcb.captchademo.captcha.utils;
3. import java.util.HashMap;
5. /**
6. * 操作消息提醒
7. *
8. * @author thcb
9. */
10. public class AjaxResult extends HashMap<String, Object> {
11.     private static final long serialVersionUID = 1L;
13.     /**
14.      * 状态码
15.      */
16.     public static final String CODE_TAG = "code";
18.     /**
19.      * 返回内容
20.      */
21.     public static final String MSG_TAG = "msg";
23.     /**
24.      * 数据对象
25.      */
26.     public static final String DATA_TAG = "data";
28.     /**
29.      * 初始化一个新创建的 AjaxResult 对象，使其表示一个空消息。
30.      */
31.     public AjaxResult() {
32.     }
34.     /**
35.      * 初始化一个新创建的 AjaxResult 对象
36.      *
37.      * @param code 状态码
38.      * @param msg  返回内容
39.      */
40.     public AjaxResult(int code, String msg) {
41.         super.put(CODE_TAG, code);
42.         super.put(MSG_TAG, msg);
43.     }
45.     /**
46.      * 初始化一个新创建的 AjaxResult 对象
47.      *
48.      * @param code 状态码
49.      * @param msg  返回内容
50.      * @param data 数据对象
51.      */
52.     public AjaxResult(int code, String msg, Object data) {
53.         super.put(CODE_TAG, code);
54.         super.put(MSG_TAG, msg);
55.         if (data != null && !data.equals("")) {
56.             super.put(DATA_TAG, data);
57.         }
58.     }
60.     /**
61.      * 返回成功消息
62.      *
63.      * @return 成功消息
64.      */
65.     public static AjaxResult success() {
66.         return AjaxResult.success("操作成功");
67.     }
69.     /**
70.      * 返回成功数据
71.      *
72.      * @return 成功消息
73.      */
74.     public static AjaxResult success(Object data) {
75.         return AjaxResult.success("操作成功", data);
76.     }
78.     /**
79.      * 返回成功消息
80.      *
81.      * @param msg 返回内容
82.      * @return 成功消息
83.      */
84.     public static AjaxResult success(String msg) {
85.         return AjaxResult.success(msg, null);
86.     }
88.     /**
89.      * 返回成功消息
90.      *
91.      * @param msg  返回内容
92.      * @param data 数据对象
93.      * @return 成功消息
94.      */
95.     public static AjaxResult success(String msg, Object data) {
96.         return new AjaxResult(200, msg, data);
97.     }
99.     /**
100.      * 返回错误消息
101.      *
102.      * @return
103.      */
104.     public static AjaxResult error() {
105.         return AjaxResult.error("操作失败");
106.     }
108.     /**
109.      * 返回错误消息
110.      *
111.      * @param msg 返回内容
112.      * @return 警告消息
113.      */
114.     public static AjaxResult error(String msg) {
115.         return AjaxResult.error(msg, null);
116.     }
118.     /**
119.      * 返回错误消息
120.      *
121.      * @param msg  返回内容
122.      * @param data 数据对象
123.      * @return 警告消息
124.      */
125.     public static AjaxResult error(String msg, Object data) {
126.         return new AjaxResult(500, msg, data);
127.     }
129.     /**
130.      * 返回错误消息
131.      *
132.      * @param code 状态码
133.      * @param msg  返回内容
134.      * @return 警告消息
135.      */
136.     public static AjaxResult error(int code, String msg) {
137.         return new AjaxResult(code, msg, null);
138.     }
139. }

复制代码

2.4 滑动验证码工具类

此类是焦点类，紧张实现了图片的切割功能。

1. package com.thcb.captchademo.captcha.utils;
3. import com.thcb.captchademo.captcha.domain.Captcha;
5. import javax.imageio.ImageIO;
6. import java.awt.*;
7. import java.awt.image.BufferedImage;
8. import java.io.ByteArrayOutputStream;
9. import java.io.File;
10. import java.io.IOException;
11. import java.net.URL;
12. import java.util.Base64;
13. import java.util.Objects;
14. import java.util.Random;
16. /**
17. * 滑动验证码工具类
18. *
19. * @author thcb
20. * @date 2023-05-25
21. */
22. public class CaptchaUtils {
24.     /**
25.      * 网络图片地址
26.      **/
27.     private final static String IMG_URL = "https://loyer.wang/view/ftp/wallpaper/%s.jpg";
29.     /**
30.      * 本地图片地址
31.      **/
32.     private final static String IMG_PATH = "E:\\caphcha\\%s.jpg";
34.     /**
35.      * 入参校验设置默认值
36.      **/
37.     public static void checkCaptcha(Captcha captcha) {
38.         //设置画布宽度默认值
39.         if (captcha.getCanvasWidth() == null) {
40.             captcha.setCanvasWidth(320);
41.         }
42.         //设置画布高度默认值
43.         if (captcha.getCanvasHeight() == null) {
44.             captcha.setCanvasHeight(155);
45.         }
46.         //设置阻塞块宽度默认值
47.         if (captcha.getBlockWidth() == null) {
48.             captcha.setBlockWidth(65);
49.         }
50.         //设置阻塞块高度默认值
51.         if (captcha.getBlockHeight() == null) {
52.             captcha.setBlockHeight(55);
53.         }
54.         //设置阻塞块凹凸半径默认值
55.         if (captcha.getBlockRadius() == null) {
56.             captcha.setBlockRadius(9);
57.         }
58.         //设置图片来源默认值
59.         if (captcha.getPlace() == null) {
60.             captcha.setPlace(1);
61.         }
62.     }
64.     /**
65.      * 获取指定范围内的随机数
66.      **/
67.     public static int getNonceByRange(int start, int end) {
68.         Random random = new Random();
69.         return random.nextInt(end - start + 1) + start;
70.     }
72.     /**
73.      * 获取验证码资源图
74.      **/
75.     public static BufferedImage getBufferedImage(Integer place) {
76.         try {
77.             //随机图片
79.             //获取网络资源图片
80.             if (0 == place) {
81.                 int nonce = getNonceByRange(0, 1000);
82.                 String imgUrl = String.format(IMG_URL, nonce);
83.                 URL url = new URL(imgUrl);
84.                 return ImageIO.read(url.openStream());
85.             }
86.             //获取本地图片
87.             else {
88.                 int nonce = getNonceByRange(0, 20);
89.                 String imgPath = String.format(IMG_PATH, nonce);
90.                 File file = new File(imgPath);
91.                 return ImageIO.read(file);
92.             }
93.         } catch (Exception e) {
94.             System.out.println("获取拼图资源失败");
95.             //异常处理
96.             return null;
97.         }
98.     }
100.     /**
101.      * 调整图片大小
102.      **/
103.     public static BufferedImage imageResize(BufferedImage bufferedImage, int width, int height) {
104.         Image image = bufferedImage.getScaledInstance(width, height, Image.SCALE_SMOOTH);
105.         BufferedImage resultImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
106.         Graphics2D graphics2D = resultImage.createGraphics();
107.         graphics2D.drawImage(image, 0, 0, null);
108.         graphics2D.dispose();
109.         return resultImage;
110.     }
112.     /**
113.      * 抠图，并生成阻塞块
114.      **/
115.     public static void cutByTemplate(BufferedImage canvasImage, BufferedImage blockImage, int blockWidth, int blockHeight, int blockRadius, int blockX, int blockY) {
116.         BufferedImage waterImage = new BufferedImage(blockWidth, blockHeight, BufferedImage.TYPE_4BYTE_ABGR);
117.         //阻塞块的轮廓图
118.         int[][] blockData = getBlockData(blockWidth, blockHeight, blockRadius);
119.         //创建阻塞块具体形状
120.         for (int i = 0; i < blockWidth; i++) {
121.             for (int j = 0; j < blockHeight; j++) {
122.                 try {
123.                     //原图中对应位置变色处理
124.                     if (blockData[i][j] == 1) {
125.                         //背景设置为黑色
126.                         waterImage.setRGB(i, j, Color.BLACK.getRGB());
127.                         blockImage.setRGB(i, j, canvasImage.getRGB(blockX + i, blockY + j));
128.                         //轮廓设置为白色，取带像素和无像素的界点，判断该点是不是临界轮廓点
129.                         if (blockData[i + 1][j] == 0 || blockData[i][j + 1] == 0 || blockData[i - 1][j] == 0 || blockData[i][j - 1] == 0) {
130.                             blockImage.setRGB(i, j, Color.WHITE.getRGB());
131.                             waterImage.setRGB(i, j, Color.WHITE.getRGB());
132.                         }
133.                     }
134.                     //这里把背景设为透明
135.                     else {
136.                         blockImage.setRGB(i, j, Color.TRANSLUCENT);
137.                         waterImage.setRGB(i, j, Color.TRANSLUCENT);
138.                     }
139.                 } catch (ArrayIndexOutOfBoundsException e) {
140.                     //防止数组下标越界异常
141.                 }
142.             }
143.         }
144.         //在画布上添加阻塞块水印
145.         addBlockWatermark(canvasImage, waterImage, blockX, blockY);
146.     }
148.     /**
149.      * 构建拼图轮廓轨迹
150.      **/
151.     private static int[][] getBlockData(int blockWidth, int blockHeight, int blockRadius) {
152.         int[][] data = new int[blockWidth][blockHeight];
153.         double po = Math.pow(blockRadius, 2);
154.         //随机生成两个圆的坐标，在4个方向上 随机找到2个方向添加凸/凹
155.         //凸/凹1
156.         Random random1 = new Random();
157.         int face1 = random1.nextInt(4);
158.         //凸/凹2
159.         int face2;
160.         //保证两个凸/凹不在同一位置
161.         do {
162.             Random random2 = new Random();
163.             face2 = random2.nextInt(4);
164.         } while (face1 == face2);
165.         //获取凸/凹起位置坐标
166.         int[] circle1 = getCircleCoords(face1, blockWidth, blockHeight, blockRadius);
167.         int[] circle2 = getCircleCoords(face2, blockWidth, blockHeight, blockRadius);
168.         //随机凸/凹类型
169.         int shape = getNonceByRange(0, 1);
170.         //圆的标准方程 (x-a)²+(y-b)²=r²,标识圆心（a,b）,半径为r的圆
171.         //计算需要的小图轮廓，用二维数组来表示，二维数组有两张值，0和1，其中0表示没有颜色，1有颜色
172.         for (int i = 0; i < blockWidth; i++) {
173.             for (int j = 0; j < blockHeight; j++) {
174.                 data[i][j] = 0;
175.                 //创建中间的方形区域
176.                 if ((i >= blockRadius && i <= blockWidth - blockRadius && j >= blockRadius && j <= blockHeight - blockRadius)) {
177.                     data[i][j] = 1;
178.                 }
179.                 double d1 = Math.pow(i - Objects.requireNonNull(circle1)[0], 2) + Math.pow(j - circle1[1], 2);
180.                 double d2 = Math.pow(i - Objects.requireNonNull(circle2)[0], 2) + Math.pow(j - circle2[1], 2);
181.                 //创建两个凸/凹
182.                 if (d1 <= po || d2 <= po) {
183.                     data[i][j] = shape;
184.                 }
185.             }
186.         }
187.         return data;
188.     }
190.     /**
191.      * 根据朝向获取圆心坐标
192.      */
193.     private static int[] getCircleCoords(int face, int blockWidth, int blockHeight, int blockRadius) {
194.         //上
195.         if (0 == face) {
196.             return new int[]{blockWidth / 2 - 1, blockRadius};
197.         }
198.         //左
199.         else if (1 == face) {
200.             return new int[]{blockRadius, blockHeight / 2 - 1};
201.         }
202.         //下
203.         else if (2 == face) {
204.             return new int[]{blockWidth / 2 - 1, blockHeight - blockRadius - 1};
205.         }
206.         //右
207.         else if (3 == face) {
208.             return new int[]{blockWidth - blockRadius - 1, blockHeight / 2 - 1};
209.         }
210.         return null;
211.     }
213.     /**
214.      * 在画布上添加阻塞块水印
215.      */
216.     private static void addBlockWatermark(BufferedImage canvasImage, BufferedImage blockImage, int x, int y) {
217.         Graphics2D graphics2D = canvasImage.createGraphics();
218.         graphics2D.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_ATOP, 0.8f));
219.         graphics2D.drawImage(blockImage, x, y, null);
220.         graphics2D.dispose();
221.     }
223.     /**
224.      * BufferedImage转BASE64
225.      */
226.     public static String toBase64(BufferedImage bufferedImage, String type) {
227.         try {
228.             ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
229.             ImageIO.write(bufferedImage, type, byteArrayOutputStream);
230.             String base64 = Base64.getEncoder().encodeToString(byteArrayOutputStream.toByteArray());
231.             return String.format("data:image/%s;base64,%s", type, base64);
232.         } catch (IOException e) {
233.             System.out.println("图片资源转换BASE64失败");
234.             //异常处理
235.             return null;
236.         }
237.     }
238. }

复制代码

2.5 滑动验证码Service

service层，，封装了工具类的一些方法，这里为了简单没写接口，正常应该是service和impl两个类。

1. package com.thcb.captchademo.captcha.service;
3. import com.thcb.captchademo.captcha.domain.Captcha;
4. import com.thcb.captchademo.captcha.utils.CaptchaUtils;
5. import org.springframework.beans.factory.annotation.Autowired;
6. import org.springframework.data.redis.core.StringRedisTemplate;
7. import org.springframework.data.redis.core.ValueOperations;
8. import org.springframework.stereotype.Service;
10. import java.awt.image.BufferedImage;
11. import java.util.UUID;
12. import java.util.concurrent.TimeUnit;
14. /**
15. * 滑动验证码Service
16. *
17. * @author thcb
18. * @date 2023-05-25
19. */
21. @Service
22. public class CaptchaService {
23.     /**
24.      * 拼图验证码允许偏差
25.      **/
26.     private static Integer ALLOW_DEVIATION = 3;
28.     @Autowired
29.     private StringRedisTemplate stringRedisTemplate;
31.     /**
32.      * 校验验证码
33.      *
34.      * @param imageKey
35.      * @param imageCode
36.      * @return boolean
37.      **/
38.     public String checkImageCode(String imageKey, String imageCode) {
39.         ValueOperations<String, String> ops = stringRedisTemplate.opsForValue();
40.         String key = "imageCode:" + imageKey;
41.         String text = ops.get(key);
42.         if (text == null || text.equals("")) {
43.             return "验证码已失效";
44.         }
45.         // 根据移动距离判断验证是否成功
46.         if (Math.abs(Integer.parseInt(text) - Integer.parseInt(imageCode)) > ALLOW_DEVIATION) {
47.             return "验证失败，请控制拼图对齐缺口";
48.         }
49.         // 验证成功，删除redis缓存
50.         stringRedisTemplate.delete(key);
51.         return null;
52.     }
54.     /**
55.      * 缓存验证码，有效期1分钟
56.      *
57.      * @param key
58.      * @param code
59.      **/
60.     public void saveImageCode(String key, String code) {
61.         ValueOperations<String, String> ops = stringRedisTemplate.opsForValue();
62.         ops.set("imageCode:" + key, code, 60, TimeUnit.SECONDS);
63.     }
65.     /**
66.      * 获取验证码拼图（生成的抠图和带抠图阴影的大图及抠图坐标）
67.      **/
68.     public Object getCaptcha(Captcha captcha) {
69.         //参数校验
70.         CaptchaUtils.checkCaptcha(captcha);
71.         //获取画布的宽高
72.         int canvasWidth = captcha.getCanvasWidth();
73.         int canvasHeight = captcha.getCanvasHeight();
74.         //获取阻塞块的宽高/半径
75.         int blockWidth = captcha.getBlockWidth();
76.         int blockHeight = captcha.getBlockHeight();
77.         int blockRadius = captcha.getBlockRadius();
78.         //获取资源图
79.         BufferedImage canvasImage = CaptchaUtils.getBufferedImage(captcha.getPlace());
80.         //调整原图到指定大小
81.         canvasImage = CaptchaUtils.imageResize(canvasImage, canvasWidth, canvasHeight);
82.         //随机生成阻塞块坐标
83.         int blockX = CaptchaUtils.getNonceByRange(blockWidth, canvasWidth - blockWidth - 10);
84.         int blockY = CaptchaUtils.getNonceByRange(10, canvasHeight - blockHeight + 1);
85.         //阻塞块
86.         BufferedImage blockImage = new BufferedImage(blockWidth, blockHeight, BufferedImage.TYPE_4BYTE_ABGR);
87.         //新建的图像根据轮廓图颜色赋值，源图生成遮罩
88.         CaptchaUtils.cutByTemplate(canvasImage, blockImage, blockWidth, blockHeight, blockRadius, blockX, blockY);
89.         // 移动横坐标
90.         String nonceStr = UUID.randomUUID().toString().replaceAll("-", "");
91.         // 缓存
92.         saveImageCode(nonceStr, String.valueOf(blockX));
93.         //设置返回参数
94.         captcha.setNonceStr(nonceStr);
95.         captcha.setBlockY(blockY);
96.         captcha.setBlockSrc(CaptchaUtils.toBase64(blockImage, "png"));
97.         captcha.setCanvasSrc(CaptchaUtils.toBase64(canvasImage, "png"));
98.         return captcha;
99.     }
100. }

复制代码

2.6 滑动验证码Controller

controller层有两个方法，一个是获取验证码的方法，一个是验证码校验的方法。

1. package com.thcb.captchademo.captcha.controller;
3. import com.thcb.captchademo.captcha.domain.Captcha;
4. import com.thcb.captchademo.captcha.domain.LoginVo;
5. import com.thcb.captchademo.captcha.service.CaptchaService;
6. import com.thcb.captchademo.captcha.utils.AjaxResult;
7. import org.springframework.beans.factory.annotation.Autowired;
8. import org.springframework.web.bind.annotation.PostMapping;
9. import org.springframework.web.bind.annotation.RequestBody;
10. import org.springframework.web.bind.annotation.RequestMapping;
11. import org.springframework.web.bind.annotation.RestController;
13. /**
14. * 滑动验证码Controller
15. *
16. * @author thcb
17. * @date 2023-05-25
18. */
20. @RestController
21. @RequestMapping("/captcha")
22. public class CaptchaController {
24.     @Autowired
25.     private CaptchaService captchaService;
27.     @PostMapping("/slideCaptchaImage")
28.     public AjaxResult getCaptcha() {
29.         return AjaxResult.success(captchaService.getCaptcha(new Captcha()));
30.     }
32.     @PostMapping(value = "/login")
33.     public AjaxResult login(@RequestBody LoginVo loginVo) {
34.         // 验证码校验
35.         String msg = captchaService.checkImageCode(loginVo.getNonceStr(), loginVo.getValue());
36.         if (msg != null && !msg.equals("")) {
37.             return AjaxResult.error(msg);
38.         }
39.         return AjaxResult.success();
40.     }
42. }

复制代码

3 工程源码

工程不算复杂，源码上传到GitCode，项目所在，上传有点题目，而且现在只能设置成私密项目，等之后可以调解的时间再改成公开的。
4 总结

滑动验证码功能不算复杂，可以和项目当前已有的验证码共存，调用差异的接口，返回差异范例的验证码，固然这个就根据项目具体环境确定了。