springboot实现验证码功能

第一步：导包

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

第二步：

用java配置kaptcha的相关属性

//验证码配置
@Component
public class KaptchaConfig {
    @Bean
    public DefaultKaptcha getDefaultKaptcha(){
        DefaultKaptcha defaultKaptcha = 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", "blue");
        properties.setProperty("kaptcha.image.width", "110");
        properties.setProperty("kaptcha.image.height", "40");
        properties.setProperty("kaptcha.textproducer.font.size", "30");
        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;
    }
}

第三步：controller层生成验证码的方法

@Autowired
private DefaultKaptcha kaptchaProducer;
//生成验证码
@RequestMapping("/getVerifyCode")
public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response){
    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 = kaptchaProducer.createText();//生产验证码
    request.getSession().setAttribute("verifyCode", capText);
    BufferedImage bi = kaptchaProducer.createImage(capText);//把验证码渲染到图片
    ServletOutputStream out = null;
    try {
        out = response.getOutputStream();//得到输出流
        ImageIO.write(bi, "jpg", out);//把图片以输出流的方式输出
    } catch (IOException e) {
        e.printStackTrace();
    }
    try {
        out.flush();
    } catch (IOException e) {
        e.printStackTrace();
    } finally {
        try {
            out.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    return null;
}

第四步：前端

<form action="/login">
    <p>用户名:<input type="text" name="username" placeholder="账号"></p>
    <p>密码:<input type="password" name="password" placeholder="密码"></p>
    <p>验证码：</p>  <input type="text" placeholder="验证码"  name="captchacode">
    <img id="kaptchaImage" th:src="@{/getVerifyCode}" οnclick="this.src='/getVerifyCode?d='+new Date()*1">
    <input type="submit" value="提交">
</form>