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');
});