SpringBoot整合kaptcha验证码

说明

我用的是SpringBoot2 + thymeleaf。如果前后端分离的项目同理，无非是前端进行请求，后端配置验证码样式。
关于Kaptcha，是一款可高度配置的实现验证码的工具。可配置字体样式、大小、颜色，验证码边框设置以及配置干扰线等等。

配置

首先导入依赖

<!-- 验证码 -->
<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency>

然后进行验证码Bean的配置

@Component
public class KaptchaConfig {

    @Bean
    public DefaultKaptcha getDDefaultKaptcha() {
        DefaultKaptcha dk = new DefaultKaptcha();
        Properties properties = new Properties();
        // 图片边框
        properties.setProperty("kaptcha.border", "yes");
        // 边框颜色
        properties.setProperty("kaptcha.border.color", "105,179,90");
        // 字体颜色
        properties.setProperty("kaptcha.textproducer.font.color", "red");
        // 图片宽
        properties.setProperty("kaptcha.image.width", "110");
        // 图片高
        properties.setProperty("kaptcha.image.height", "40");
        // 字体大小
        properties.setProperty("kaptcha.textproducer.font.size", "30");
        // session key
        properties.setProperty("kaptcha.session.key", "code");
        // 验证码长度
        properties.setProperty("kaptcha.textproducer.char.length", "4");
        // 字体
        properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");
        Config config = new Config(properties);
        dk.setConfig(config);

        return dk;
    }
}

接着写controller，用于前端请求、刷新验证码。验证码数据暂时缓存在session中，其中key值需要和上面配置的相同。

@Controller
@RequestMapping("/admin/kaptcha")
public class KaptchaController {
    @Resource
    private DefaultKaptcha captchaProducer;
    /**
     * 获取验证码
     * @param httpServletRequest
     * @param httpServletResponse
     * @throws Exception
     */
    @GetMapping("/getKaptcha")
    public void getKaptcha(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws Exception {
        // 接受验证码图片输出流
        ByteArrayOutputStream imgOutputStream = new ByteArrayOutputStream();
        try {
            // 生产验证码字符串并保存到session中
            String code = captchaProducer.createText();
            // 该key值必须和 kaptcha.session.key 配置的相同
            httpServletRequest.getSession().setAttribute("code", code);
            BufferedImage challenge = captchaProducer.createImage(code);
            ImageIO.write(challenge, "jpg", imgOutputStream);
        } catch (Exception e) {
            // 如果出错，返回404
            httpServletResponse.sendError(HttpServletResponse.SC_NOT_FOUND);
            return;
        }
        // 设置返回值
        httpServletResponse.setHeader("Cache-Control", "no-store");
        httpServletResponse.setDateHeader("Expires", 0);
        httpServletResponse.setContentType("image/jpeg");
        // 将图片刷进response
        ServletOutputStream responseOutputStream = httpServletResponse.getOutputStream();
        responseOutputStream.write(imgOutputStream.toByteArray());
        responseOutputStream.flush();
        responseOutputStream.close();
    }
}

最后是前端书写(部分代码)

<div class="col-6">
    <img alt="看不清,换一张" class="pointer" th:src="@{/admin/kaptcha/getKaptcha}"
         onclick="this.src='/admin/kaptcha/getKaptcha?d='+Math.floor(Math.random()*100)">
div>

注意onclick方法后面家的随机数字，是为了防止浏览器缓存影响验证码的校验，我测试了将后面的随机数改成定值，也是可以刷新数据的，但是为了防止缓存的影响，还是习惯的加上随机数吧。

补充

可进行的 kaptcha 配置

Constant	描述	默认值
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