kaptcha验证码的使用

最新推荐文章于 2022-05-18 15:52:36 发布

原创最新推荐文章于 2022-05-18 15:52:36 发布 · 529 阅读

1 ·

CC 4.0 BY-SA版权

spring 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍如何在项目中配置并使用Kaptcha生成验证码。包括引入依赖、web.xml配置、前端展示与后端校验等关键步骤，为开发者提供一份实用的Kaptcha使用指南。

web.xml:配置kaptcha的servlet及部分样式模板

引入依赖

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

web.xml配置

<servlet>
        <servlet-name>Kaptcha</servlet-name>
        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
        <!-- 定义验证码样式 -->
        <!-- 是否有边框 -->
        <init-param>
            <param-name>kaptcha.border</param-name>
            <!-- 没有边框 no -->
            <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>Aria</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>Kaptcha</servlet-name>
        <url-pattern>/Kaptcha</url-pattern>
    </servlet-mapping>

前端

<!--验证码 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="captcha-img" alt="点击更换" title="点击更换"
                                     onclick="changeVerifyCode(this)" src="../Kaptcha">
                                </div>
                            </div>
                        </div>
                    </li>

点击验证码onclick

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

后端校验

/**
 * 校验验证码
 */
public class CodeUtil {
    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.equals(verifyCodeExpected)) {
            return false;

        }
        return true;
    }
}