SpringBoot集成图片验证码功能-学习笔记_springboot验证码图片功能

写在前面

登录注册是大部分系统需要实现的基本功能，同时也会对登录验证增加需求

这些图形验证码看起来不仅很丑，而且模糊，但却是保护系统的第一道屏障，它的作用是：设计的初衷其实就是为了防自动化，防止一些人利用自动工具恶意攻击网站，比如批量注册，撑爆你的数据库。

实现这个功能并不复杂，但是为了不让大家重复造轮子，这里给大家推荐两个现成的轮子：kaptcha，captcha

使用起来非常简单，废话不多说直接上代码。

一、 kaptcha验证码的实现

1. 引入maven依赖

<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency>
1
2
3
4
5

2. config文件配置

@Configuration
public class VerifyCodeConfig {

    @Bean
    Producer producer() {
        Properties properties = new Properties();
        //设置图片边框
        properties.setProperty("kaptcha.border", "no");
        //设置图片边框为蓝色
        //properties.setProperty("kaptcha.border.color", "white");
        // 背景颜色渐变开始
        properties.put("kaptcha.background.clear.from", "white");
        // 背景颜色渐变结束
        properties.put("kaptcha.background.clear.to", "white");
        // 字体颜色
        properties.put("kaptcha.textproducer.font.color", "5,115,217");
        // 文字间隔
        properties.put("kaptcha.textproducer.char.space", "10");
        // 干扰线颜色配置
        properties.put("kaptcha.noise.color", "5,115,217");
        //如果需要去掉干扰线
        //properties.put("kaptcha.noise.impl", "com.google.code.kaptcha.impl.NoNoise");
        // 字体
        properties.put("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");
        // 图片宽度
        properties.setProperty("kaptcha.image.width", "200");
        // 图片高度
        properties.setProperty("kaptcha.image.height", "50");
        // 从哪些字符中产生
        properties.setProperty("kaptcha.textproducer.char.string", "0123456789abcdefghijklmnopqrsduvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ");
        // 字符个数
        properties.setProperty("kaptcha.textproducer.char.length", "6");
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        defaultKaptcha.setConfig(new Config(properties));
        return defaultKaptcha;
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

其中这里包括一些属性配置的说明

配置项：kaptcha.border
描述：图片边框，合法值：yes , no
默认值：yes

配置项：kaptcha.border.color
描述：边框颜色，合法值： r,g,b (and optional alpha) 或者 white,black,blue.
默认值：black

配置项：kaptcha.image.width
描述：图片宽
默认值：200

配置项：kaptcha.image.height
描述：图片高
默认值：50

配置项：kaptcha.producer.impl
描述：图片实现类
默认值：com.google.code.kaptcha.impl.DefaultKaptcha

配置项：kaptcha.textproducer.impl
描述：文本实现类
默认值：com.google.code.kaptcha.text.impl.DefaultTextCreator

配置项：kaptcha.textproducer.char.string
描述：文本集合，验证码值从此集合中获取
默认值：abcde2345678gfynmnpwx

配置项：kaptcha.textproducer.char.length
描述：验证码长度
默认值：5

配置项：kaptcha.textproducer.font.names
描述：字体
默认值：Arial, Courier

配置项：kaptcha.textproducer.font.size
描述：字体大小
默认值：40px.

配置项：kaptcha.textproducer.font.color
描述：字体颜色，合法值： r,g,b  或者 white,black,blue.
默认值：black

配置项：kaptcha.textproducer.char.space
描述：文字间隔
默认值：2

配置项：kaptcha.noise.impl
描述：干扰实现类
默认值：com.google.code.kaptcha.impl.DefaultNoise

配置项：kaptcha.noise.color
描述：干扰 颜色，合法值： r,g,b 或者 white,black,blue.
默认值：black

配置项：kaptcha.obscurificator.impl
描述：图片样式，
   水纹 com.google.code.kaptcha.impl.WaterRipple 
   鱼眼 com.google.code.kaptcha.impl.FishEyeGimpy 
   阴影 com.google.code.kaptcha.impl.ShadowGimpy
默认值：com.google.code.kaptcha.impl.WaterRipple

配置项：kaptcha.background.impl
描述：背景实现类
默认值：com.google.code.kaptcha.impl.DefaultBackground

配置项：kaptcha.background.clear.from
描述：背景颜色渐变，开始颜色
默认值：light grey

配置项：kaptcha.background.clear.to
描述：背景颜色渐变， 结束颜色
默认值：white

配置项：kaptcha.word.impl
描述：文字渲染器
默认值：com.google.code.kaptcha.text.impl.DefaultWordRenderer

配置项：kaptcha.session.key
描述：session key
默认值：KAPTCHA_SESSION_KEY

配置项：kaptcha.session.date
描述：session date
默认值：KAPTCHA_SESSION_DATE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

3. 逻辑代码实现

@GetMapping("/kaptcha")
@ApiOperation("登录获取验证码")
public Map<String, String> kaptcha(HttpServletRequest request, HttpServletResponse response) {
    Map<String, String> resultMap = new HashMap<>();
    //返回前端
    try {
        // 此处随机生成的4位验证码，使用的是hutools包的RandomUtil工具类，可自行生成验证码
        String verifyCode = RandomUtil.randomString(UserConstant.VERIFY_CODES, 4);
        BufferedImage bufferedImage = producer.createImage(verifyCode);
        response.setContentType("image/jpeg");
        // 将图片转换陈字符串给前端
        ByteArrayOutputStream stream = new ByteArrayOutputStream();
        ImageIO.write(bufferedImage, "jpg", stream);
        String base64 = Base64.encode(stream.toByteArray());
        stream.flush();
        stream.close();
        // 存到redis中
        String lowerCaseCode = verifyCode.toLowerCase();
        String key = UUID.randomUUID().toString();
        // 对生成的key值进行MD5加密，MD5工具类应用，可自行处理
        String realKey = Md5Util.md5Encode(lowerCaseCode + key, "utf-8");
        log.info("获取验证码，Redis checkCode = {}，key = {}", verifyCode, key);
        // 此处为redis工具类封装，设置key, value, key有效期
        redisUtil.set(realKey, lowerCaseCode, UserConstant.CODE_EXPIRE_TIME);
        resultMap.put("verifyCodeKey", realKey);
        resultMap.put("verifyCode", "data:image/jpg;base64," + base64);
    } catch (IOException e) {
        log.error("获取图片验证码异常： {}", e.getMessage());
    }
    return resultMap;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

二、. captcha验证码的实现

1. 引入maven依赖

<dependency>
    <groupId>com.github.whvcse</groupId>
    <artifactId>easy-captcha</artifactId>
    <version>1.6.2</version>
</dependency>
1
2
3
4
5

2. 逻辑代码实现

@GetMapping("/captcha")
@ApiOperation("登录获取验证码")
public Map<String, String> captcha(HttpServletRequest request, HttpServletResponse response) {
	Map<String, String> resultMap = new HashMap<>();
    // 算术类型验证码
    ArithmeticCaptcha captcha = new ArithmeticCaptcha();
    //中文类型验证吗  
	//ChineseCaptcha captcha = new ChineseCaptcha();
		
    // 英文与数字验证码
    // SpecCaptcha captcha = new SpecCaptcha();
 
	//英文与数字动态验证码
    //GifCaptcha captcha = new GifCaptcha();
 
    //中文动态验证码
	//ChineseGifCaptcha captcha = new ChineseGifCaptcha();
	    
    // N位运算, 默认两位，其他类型验证码时设置长度
    captcha.setLen(2);
    // 获取计算的结果, 进行存储
    String result = captcha.text();
    String key = UUID.randomUUID().toString();
    // 对生成的key值进行MD5加密，MD5工具类应用，可自行处理
    String realKey = Md5Util.md5Encode(key, "utf-8");
    log.info("获取验证码，Redis result = {}，key = {}", result, key);
    // 此处为redis工具类封装，设置key, value, key有效期
    redisUtil.set(realKey, result, UserConstant.CODE_EXPIRE_TIME);
    //返回前端
    resultMap.put("verifyCodeKey", realKey);
    resultMap.put("verifyCode", captcha.toBase64());
    return resultMap;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

以上部分工具类代码未放出，可以通过查找自行实现，代码均通过测试实现功能；

一些逻辑实现思路:
每次生成图片验证码时通过redis缓存key进行匹配对比，设置key的有效期过期删除无效key