验证码工具kaptcha的使用方法

验证码工具kaptcha的使用方法

在pom.xml中添加依赖

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

编写servlet，并且通过初始化参数配置kaptcha的样式

<!— 验证码工具Kaptcha —>
<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.testproducer.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.testproducer.char.string</param-name>
    <param-value>ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890</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.testproducer.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-mapping>
  <servlet-name>kaptcha</servlet-name>
  <url-pattern>/kaptcha</url-pattern>
</servlet-mapping>

在html中添加验证码图片

<div class=“item-title label”>验证码</div>
<div class="item-input">
    <label>
        <input id="verificationCode" type="text" placeholder="验证码" src="../kaptcha" alt="验证码" title=“验证码”>
    </label>
</div>
<div class="item-input">
    <input id="img" type="file">
</div>

实现点击验证码图片后更换验证码图片

/**
 * 点击注册码图片后更换注册码
 */
function changeVerificationCode(img) {
    // 在次向服务器请求验证码
    img.src = "../kaptcha?" + Math.floor(Math.random() * 100);
}

在服务器端取得kaptcha生成的验证码

/**
 * 检查用户输入的验证码与组件生成的验证是否相同
 *
 * @param request http请求
 * @return true：验证码相同，false：验证码不同
 */
public static boolean checkVerificationCodeUtil(HttpServletRequest request) {
  // 验证码组件产生的验证码
  String expectedCode = (String) request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);
  // 用户实际输入的验证码
  String actualCode = request.getParameter("verificationCode");
  // 如果用户输入的验证码不为空，并且输入的验证与组件产生的验证码相同，则返回true，否则返回false
  return actualCode != null && actualCode.equals(expectedCode);
}