利用kaptcha实现验证码，防止表单重复提交

最新推荐文章于 2021-09-15 16:43:59 发布

原创最新推荐文章于 2021-09-15 16:43:59 发布 · 305 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Kaptcha

编程杂记专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍如何在项目中集成Kaptcha生成验证码，包括添加依赖、配置Servlet、前端展示及后端验证流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、添加kaptcha的依赖

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

二、在web.xml中添加kaptcha的servlet

<servlet>
        <!-- 生成图片的Servlet -->
        <servlet-name>Kaptcha</servlet-name>
        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>

        <!-- 是否有边框 -->
        <init-param>
            <param-name>kaptcha.border</param-name>
            <param-value>no</param-value>
        </init-param>
        <!-- 字体颜色 -->
        <init-param>
            <param-name>kaptcha.textproducer.font.color</param-name>
            <param-value>red</param-value>
        </init-param>
        <!-- 图片宽度 -->
        <init-param>
            <param-name>kaptcha.image.width</param-name>
            <param-value>135</param-value>
        </init-param>
        <!-- 使用哪些字符生成验证码 -->
        <init-param>
            <param-name>kaptcha.textproducer.char.string</param-name>
            <param-value>ACDEFHKPRSTWX345679</param-value>
        </init-param>
        <!-- 图片高度 -->
        <init-param>
            <param-name>kaptcha.image.height</param-name>
            <param-value>50</param-value>
        </init-param>
        <!-- 字体大小 -->
        <init-param>
            <param-name>kaptcha.textproducer.font.size</param-name>
            <param-value>43</param-value>
        </init-param>
        <!-- 干扰线的颜色 -->
        <init-param>
            <param-name>kaptcha.noise.color</param-name>
            <param-value>black</param-value>
        </init-param>
        <!-- 字符个数 -->
        <init-param>
            <param-name>kaptcha.textproducer.char.length</param-name>
            <param-value>4</param-value>
        </init-param>
        <!-- 使用哪些字体 -->
        <init-param>
            <param-name>kaptcha.textproducer.font.names</param-name>
            <param-value>Arial</param-value>
        </init-param>
    </servlet>
    <!-- 映射的url -->
    <servlet-mapping>
        <servlet-name>Kaptcha</servlet-name>
        <url-pattern>/Kaptcha</url-pattern>
    </servlet-mapping>

在这里插入图片描述

三、在你表单需要的地方添加相应的html代码

更换验证码的src根据自己的项目来设置

<!-- 验证码 kaptcha控件 -->
<li>
     <div class="item-content">
         <div class="item-inner">
             <div class="item-title label">验证码</div>
             <input type="text" id="j_captcha" placeholder="验证码">
             <div class="item-input">
                 <img id="capcha_img" alt="点击更换" title="点击更换"
                 onclick="changeVerifyCode(this)" src="../../../Kaptcha" />
             </div>
         </div>
     </div>
 </li>

四、在后台接收输入框内的数据判断验证码是否正确

代码中接收前端传来的数据verifyCodeActual可以根据自己的方式接收，verifyCodeActual根据前端的参数名字来写

public static boolean checkVerifyCode(HttpServletRequest request) {
	String verifyCodeExpected = (String) request.getSession().getAttribute(
			com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
	String verifyCodeActual = HttpServletRequestUtil.getString(request,
			"verifyCodeActual");
	if (verifyCodeActual == null
			|| !verifyCodeActual.equalsIgnoreCase(verifyCodeExpected)) {
		return false;
	}
	return true;
}