如何使用kaptcha验证码组件

kaptcha是基于SimpleCaptcha的验证码开源项目。

kaptcha是纯配置的,使用起来比较友好。如使用了Servlet,所有配置都在web.xml中。如果你在项目中使用了开源框架(比如SpringMVC),那么配置在该框架的配置文件中。

一、使用Servlet实现

1. 添加依赖的JAR包

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

我这里使用了maven来统一管理jar包,在pom.xml中添加上面的内容。

没有使用的需要自己下载jar包了。

2. 配置web.xml文件

kaptcha都是在web.xml中配置,我们需要在web.xml中配置kaptcha的servlet,具体如下:

<!-- kaptcha -->
<servlet>
<servlet-name>Kaptcha</servlet-name>
<servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Kaptcha</servlet-name>
<url-pattern>/kaptcha.jpg</url-pattern>
</servlet-mapping>

其中的servlet-name和url-pattern都是自己定义的。

kaptcha的所有参数都是有默认的配置,如果我们不显式的配置,则会使用默认的配置。

如要显式配置kaptcha,在配置对应的servlet时,在init-param增加响应的参数配置即可。部分配置如下:

<servlet>
<servlet-name>Kaptcha</servlet-name>
<servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
<init-param>
<param-name>kaptcha.image.width</param-name>
<param-value>200</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.length</param-name>
<param-value>4</param-value>
</init-param>
<init-param>
<param-name>kaptcha.noise.impl</param-name>
<param-value>com.google.code.kaptcha.impl.NoNoise</param-value>
</init-param>
</servlet>

二、与SpringMVC开源框架集成使用kaptcha

1. 声明CaptchaProducer Bean实例

<bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
  <property name="config">
    <bean class="com.google.code.kaptcha.util.Config">
      <constructor-arg type="java.util.Properties">
        <props>
          <prop key="kaptcha.image.width">100</prop>
          <prop key="kaptcha.image.height">50</prop>
          <prop key="kaptcha.noise.impl">com.google.code.kaptcha.impl.NoNoise</prop>
          <prop key="kaptcha.textproducer.char.string">0123456789abcdefghijklmnopqrstuvwxyz</prop>
          <prop key="kaptcha.textproducer.char.length">4</prop>
        </props>
      </constructor-arg>
    </bean>
  </property>
</bean>

多贴几个配置

<props>
  <!-- 是否有边框 -->
  <prop key="kaptcha.border">no</prop>
  <!-- 设置边框颜色 -->
  <prop key="kaptcha.border.color">105,179,90</prop>
  <!-- 获取中文 -->
  <prop key="kaptcha.textproducer.impl">org.cric.util.ChineseText</prop>
  <!-- 设置字体颜色 -->
  <prop key="kaptcha.textproducer.font.color">black</prop>
  <!-- 设置验证码宽度 -->
  <prop key="kaptcha.image.width">100</prop>
  <!-- 设置验证码高度 -->
  <prop key="kaptcha.image.height">50</prop>
  <!-- 设置字体大小 -->
  <prop key="kaptcha.textproducer.font.size">30</prop>
  <!-- 设置字体个数 -->
  <prop key="kaptcha.textproducer.char.length">4</prop>
  <!-- 设置字体样式 -->
  <prop key="kaptcha.textproducer.font.names">宋体,楷体,微软雅黑</prop>
  <prop key="kaptcha.noise.impl">com.google.code.kaptcha.impl.NoNoise</prop>
  <prop key="kaptcha.textproducer.char.string">0123456789abcdefghijklmnopqrstuvwxyz</prop>
</props>

2. 获取验证码的controller

@Autowired
private Producer captchaProducer; @RequestMapping("/kaptcha.jpg")
public void getCheckCode(HttpServletRequest request, HttpServletResponse response) throws IOException {
  String codeStr = captchaProducer.createText();
  request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, codeStr);
  BufferedImage bi = captchaProducer.createImage(codeStr);
  ServletOutputStream out = response.getOutputStream();
  ImageIO.write(bi, "jpg", out);
  out.flush();
  out.close();
}

三、测试与优化

1. 页面调用

<form action="logonServlet">
<input type="text" name="checkCode">
<img src="kaptcha.jpg">
<input type="submit" value="提交">
</form>

2. action校验类

String sessionCode = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
String checkCode = request.getParameter("checkCode");
String isSuccess = "";
if (checkCode != null && checkCode.equals(sessionCode)) {
isSuccess = "恭喜您,验证码输入成功!!!";
} else {
isSuccess = "验证码输入失败啦,囧";
}
response.setContentType("text/html; charset=UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter pw = response.getWriter();
pw.print(isSuccess);

3.实现页面验证码刷新

<img src="kaptcha.jpg" id="checkcode" onclick="onCheckCode()" title="看不清换一张">
function onCheckCode () {
var date = new Date();
$("#checkcode").attr("src", "kaptcha.jpg?d="+date);
}

4. 效果

如何使用kaptcha验证码组件

上一篇:js图片跑马灯效果


下一篇:kubernetes资源对象--Horizontal Pod Autoscaling(HPA)