JavaWeb 使用Kaptcha制作验证码

最新推荐文章于 2025-05-29 14:53:53 发布

Jiiaaa

最新推荐文章于 2025-05-29 14:53:53 发布

阅读量385

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaBase 文章标签：验证码 java javaee jabaweb Kaptcha

本文链接：https://blog.youkuaiyun.com/weixin_40517703/article/details/86666114

JavaBase 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何在项目中集成Kaptcha验证码，包括配置依赖、设置Servlet参数、前端展示及更换验证码功能，以及后端校验流程。通过具体代码示例，展示了如何在web.xml中定义Servlet，配置验证码样式，以及如何在Controller层进行验证码校验。

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

首先引入依赖：

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

web.xml中定义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.image.height</param-name>
            <param-value>50</param-value>
        </init-param>
        <!-- 使用哪些字符生成验证码 -->
        <init-param>
            <param-name>kaptcha.textproducer.char.string</param-name>
            <param-value>ACDEFHKPRSTWX12345679</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>

Servlet的映射：

    <servlet-mapping>
        <servlet-name>Kaptcha</servlet-name>
        <url-pattern>/Kaptcha</url-pattern>
    </servlet-mapping>

前端控件：

（class用的SUI）

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

点击更换的js代码：

function changeVerifyCode(img) {
    img.src = "../Kaptcha?" + Math.floor(Math.random() * 100)
}

到这里已经实现大部分功能了。

下面是后台的校验实现：

    //校验 验证码
    public static boolean checkVerifyCode(HttpServletRequest request) {

        //获取图片中的验证码
        String verifyCodeExpected = (String) request.getSession().getAttribute(
                Constants.KAPTCHA_SESSION_KEY
        );

        //获取用户输入的验证码
        String verifyCodeActual = HttpServletRequestUtil.getString(request, "verifyCodeActual");

        //进行比对
        if (verifyCodeActual == null || !verifyCodeActual.equals(verifyCodeExpected)) {
            return false;
        }

        return true;
    }

以及工具类中getString方法：

    /**
     * 从request中提取key并转换为String型 转换失败返回null
     * @param request
     * @param key
     * @return
     */
    public static String getString(HttpServletRequest request, String key) {
        try {
            String result = request.getParameter(key);
            if (result != null) {
                result = result.trim();
            }
            if ("".equals(result)) {
                result = null;
            }

            return result;
        } catch (Exception e) {
            return null;
        }
    }

Controller层的使用：

（验证码错误立即返回给前端，如果没有错误，则进行其他逻辑判断）

if (!CodeUtil.checkVerifyCode(request)) {
            modelMap.put("success", false);
            modelMap.put("errMsg", "验证码错误！");
            return modelMap;
        }

至此整个前后端以及使用全部按顺序罗列完毕！

效果图：