springboot中使用验证码kaptcha

1.pom.xml引入kaptcha所需要的jar包

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

2.添加KaptchaConfig类

package com.demo.common;

import java.util.Properties;

import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;

import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;

@Component
public class KaptchaConfig {
    @Bean
    public DefaultKaptcha getDefaultKaptcha() {
        com.google.code.kaptcha.impl.DefaultKaptcha defaultKaptcha = new com.google.code.kaptcha.impl.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);
        defaultKaptcha.setConfig(config);

        return defaultKaptcha;
    }
}

3.添加获取验证码的COntroller

package com.demo.controller;

import java.awt.image.BufferedImage;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import com.google.code.kaptcha.Constants;
import com.google.code.kaptcha.Producer;

@Controller
@RequestMapping(value = "/captcha")
public class CaptchaController {

    private Producer captchaProducer = null;

    @Autowired
    public void setCaptchaProducer(Producer captchaProducer) {
        this.captchaProducer = captchaProducer;
    }

    /**
     *
     * 获取验证码图片
     *
     * @param request
     * @param response
     * @return
     * @throws IOException
     */
    @RequestMapping("getCaptchaCode")
    public ModelAndView getCaptchaCode(HttpServletRequest request, HttpServletResponse response) throws IOException {
        HttpSession session = request.getSession();

        response.setDateHeader("Expires", 0);
        response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
        response.addHeader("Cache-Control", "post-check=0, pre-check=0");
        response.setHeader("Pragma", "no-cache");
        response.setContentType("image/jpeg");

        // 生成验证码文本
        String capText = captchaProducer.createText();
        session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
        // 利用生成的字符串构建图片
        BufferedImage bi = captchaProducer.createImage(capText);
        ServletOutputStream out = response.getOutputStream();
        ImageIO.write(bi, "jpg", out);

        try {
            out.flush();
        } finally {
            out.close();
        }
        return null;
    }
}

4.前台配置（form表单中添加验证码，我使用的是thymeleaf模板引擎，语法可参考官网https://www.thymeleaf.org/）

　　　　　　　　　　<form class="registerform" id="form1">
                    <div class="fm-item">
                        <label for="logonId" class="form-label">登陆账号：</label>
                        <input type="text" maxlength="100" id="username" name="username" class="i-text"/>
                        <div class="ui-form-explain"></div>
                    </div>
                    <div class="fm-item">
                        <label for="logonId" class="form-label">登陆密码：</label>
                        <input type="password" maxlength="100" id="password" name="password" class="i-text"/>
                        <div class="ui-form-explain"></div>
                    </div>
                    <div class="fm-item pos-r">
                        <label for="logonId" class="form-label">验证码</label>
                        <input type="text" maxlength="100" id="yzm" name="yzm" class="i-text yzm"/>
                        <div class="ui-form-explain">
                            <img id="captchaImg" alt="" th:src="@{/captcha/getCaptchaCode}" class="yzm-img" style="width: 100px;height: 40px;line-height:40px;"/>
                        </div>
                    </div>
                    <div class="fm-item">
                        <label for="logonId" class="form-label"></label>
                        <input type="button" value="" tabindex="4" id="submit" class="btn-login"/>
                        <div class="ui-form-explain"></div>
                    </div>
                </form>

　　

5.js部分 点击验证码获取新的验证码

//获取新验证码
$('#captchaImg').click(function() {
     $(this).attr('src', '/captcha/getCaptchaCode.jpg');
});