快捷導(dǎo)航

SpringBoot如何集成Kaptcha驗證碼

更新時間：2025年01月06日 10:49:28 作者：愛JAVA的少年閏土

本文介紹了如何在Java開發(fā)中使用Kaptcha生成驗證碼的功能,包括在pom.xml中配置依賴、在系統(tǒng)公共配置類中添加配置、在控制器中添加生成驗證碼的方法,以及前端頁面如何引用,同時,還補(bǔ)充了Kaptcha的更多配置屬性及其默認(rèn)值

SpringBoot集成Kaptcha驗證碼

簡介

在開發(fā)中，驗證碼功能是一個常見且重要的功能，Kaptcha 是大名鼎鼎的谷歌公司提供的一款用于生成驗證碼的插件，支持高度可配置；

本章將通過一個簡單的示例展示如何實現(xiàn)驗證碼功能

實現(xiàn)步驟

1. 在 pom.xml 配置文件中

添加如下配置：

由于國內(nèi)限制了谷歌網(wǎng)絡(luò)的訪問，推薦使用下面的依賴下載

<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency>

2. 在系統(tǒng)公共配置類中添加如下代碼

當(dāng)然關(guān)于 Kaptcha 的配置也可以添加到 application.properties 配置文件中

@Configuration
public class AppConfigure implements WebMvcConfigurer {
    /**
     * 驗證碼配置
     */
    @Bean
    public DefaultKaptcha kaptcha() {
        DefaultKaptcha kaptcha = new DefaultKaptcha();
        Properties properties = new Properties();
        properties.put("kaptcha.border", "yes");
        properties.put("kaptcha.image.width", "100");
        properties.put("kaptcha.image.height", "33");
        properties.put("kaptcha.session.key", "code");
        properties.put("kaptcha.border.color", "105,179,90");
        properties.put("kaptcha.textproducer.font.size", "30");
        properties.put("kaptcha.textproducer.char.length", "4");
        properties.put("kaptcha.textproducer.font.color", "blue");
        properties.put("kaptcha.textproducer.font.names", "宋體,楷體,微軟雅黑");
        kaptcha.setConfig(new Config(properties));
        return kaptcha;
    }
}

3. 在 KaptchController.class 中添加提供驗證碼生成的方法

@Controller
@RequestMapping("/kaptcha")
@Slf4j
public class KaptchaController {
    @Resource
    private DefaultKaptcha kaptcha;
    
    /**
     * 申請驗證碼
     */
    @GetMapping("/kaptcha")
    public void getKaptcha(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");

            HttpSession session = request.getSession();
            ServletOutputStream outputStream = null;
            try {
                //生成驗證碼
                String kaptchaText = kaptcha.createText();
                // 將驗證碼保存 5 分鐘
                CommonUtils.setSession(session, Properties.KAPTCHA.desc(), kaptchaText, 
                    Properties.EXPIRETIME_KAPTCHA.value());
                log.info("captcha code: " + kaptchaText);
                //向客戶端輸出
                BufferedImage bufferedImage = kaptcha.createImage(kaptchaText);
                outputStream = response.getOutputStream();
                ImageIO.write(bufferedImage, "jpg", outputStream);
                outputStream.flush();
            } catch (IOException e) {
                throw new BusinessException(ErrorCode.CLOSE_IO_EXCEPTION);
            } finally {
                CommonUtils.closeio(outputStream);
            }
        }
        ......
}

4. 前端頁面直接使用 img 標(biāo)簽引用即可

<img src="/kaptcha/kaptcha" id="kaptcha-img" title="點(diǎn)擊刷新">

補(bǔ)充：Kaptcha 更多配置

屬性(常量)	描述	默認(rèn)值
kaptcha.border	圖片邊框，合法值：yes , no	yes
kaptcha.border.color	邊框顏色，合法值： r,g,b (and optional alpha) 或者 white,black,blue.	black
kaptcha.border.thickness	邊框厚度，合法值：>0	1
kaptcha.image.width	圖片寬	200
kaptcha.image.height	圖片高	50
kaptcha.producer.impl	圖片實現(xiàn)類	com.google.code.kaptcha.impl.DefaultKaptcha
kaptcha.textproducer.impl	文本實現(xiàn)類	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	干擾實現(xiàn)類	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	背景實現(xiàn)類	com.google.code.kaptcha.impl.DefaultBackground
kaptcha.background.clear.from	背景顏色漸變，開始顏色	light grey
kaptcha.background.clear.to	背景顏色漸變，結(jié)束顏色	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