kaptcha验证码组件使用简介

2022-09-03 11:50:49

Kaptcha是一个基于SimpleCaptcha的验证码开源项目。

官网地址：http://code.google.com/p/kaptcha/

kaptcha的使用比较方便，只需添加jar包依赖之后简单地配置就可以使用了。kaptcha所有配置都可以通过web.xml来完成，如果你的项目中使用了Spring MVC，那么则有另外的一种方式来实现。

一、简单的jsp-servlet项目

1.添加jar包依赖

如果你使用maven来统一管理jar包，则在工程的pom.xml中添加dependency

  1. <!-- kaptcha -->
  2. <dependency>
  3. <groupId>com.google.code.kaptcha</groupId>
  4. <artifactId>kaptcha</artifactId>
  5. <version>2.3.2</version>
  6. </dependency>

如果是非maven管理的项目，则直接在官网下载kaptcha的jar包，然后添加到项目lib库中，下载地址：http://code.google.com/p/kaptcha/downloads/list

2.配置web.xml

上面说了，kaptcha都是在web.xml中配置，我们必须在web.xml中配置kaptcha的servlet，具体如下：

  1. <servlet>
  2. <servlet-name>Kaptcha</servlet-name>
  3. <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
  4. </servlet>
  5. <servlet-mapping>
  6. <servlet-name>Kaptcha</servlet-name>
  7. <url-pattern>/kaptcha.jpg</url-pattern>
  8. </servlet-mapping>

其中servlet的url-pattern可以自定义。

kaptcha所有的参数都有默认的配置，如果我们不显示配置的话，会采取默认的配置。

如果要显示配置kaptcha，在配置kaptcha对应的Servlet时，在init-param增加响应的参数配置即可。示例如下：

  1. <servlet>
  2. <servlet-name>Kaptcha</servlet-name>
  3. <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
  4. <init-param>
  5. <param-name>kaptcha.image.width</param-name>
  6. <param-value>200</param-value>
  7. <description>Width in pixels of the kaptcha image.</description>
  8. </init-param>
  9. <init-param>
  10. <param-name>kaptcha.image.height</param-name>
  11. <param-value>50</param-value>
  12. <description>Height in pixels of the kaptcha image.</description>
  13. </init-param>
  14. <init-param>
  15. <param-name>kaptcha.textproducer.char.length</param-name>
  16. <param-value>4</param-value>
  17. <description>The number of characters to display.</description>
  18. </init-param>
  19. <init-param>
  20. <param-name>kaptcha.noise.impl</param-name>
  21. <param-value>com.google.code.kaptcha.impl.NoNoise</param-value>
  22. <description>The noise producer.</description>
  23. </init-param>
  24. </servlet>

具体的配置参数参见：http://code.google.com/p/kaptcha/wiki/ConfigParameters

3.页面调用

  1. <form action="submit.action">
  2. <input type="text" name="kaptcha" value="" /><img src="kaptcha.jpg" />
  3. </form>

4.在submit的action方法中进行验证码校验

  1. //从session中取出servlet生成的验证码text值
  2. String kaptchaExpected = (String)request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
  3. //获取用户页面输入的验证码
  4. String kaptchaReceived = request.getParameter("kaptcha");
  5. //校验验证码是否正确
  6. if (kaptchaReceived == null || !kaptchaReceived.equalsIgnoreCase(kaptchaExpected)){
  7. setError("kaptcha", "Invalid validation code.");
  8. }

注：确保JDK设置了 -Djava.awt.headless=true

5.实现页面验证码刷新

  1. <img src="kaptcha.jpg" width="200" id="kaptchaImage" title="看不清，点击换一张" />
  2. <script type="text/javascript">
  3. $(function() {
  4. $('#kaptchaImage').click(function() {$(this).attr('src','kaptcha.jpg?' + Math.floor(Math.random() * 100));});
  5. });
  6. </script>
  7. <br /><small>看不清，点击换一张</small>

注：为了避免浏览器的缓存，可以在验证码请求url后添加随机数

二、Spring mvc项目中使用kaptcha

1.添加captchaProducer bean定义

  1. <!-- 配置kaptcha验证码 -->
  2. <bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
  3. <property name="config">
  4. <bean class="com.google.code.kaptcha.util.Config">
  5. <constructor-arg type="java.util.Properties">
  6. <props>
  7. <prop key="kaptcha.image.width">100</prop>
  8. <prop key="kaptcha.image.height">50</prop>
  9. <prop key="kaptcha.noise.impl">com.google.code.kaptcha.impl.NoNoise</prop>
  10. <prop key="kaptcha.textproducer.char.string">0123456789abcdefghijklmnopqrstuvwxyz</prop>
  11. <prop key="kaptcha.textproducer.char.length">4</prop>
  12. </props>
  13. </constructor-arg>
  14. </bean>
  15. </property>
  16. </bean>

2.生成验证码的Controller

  1. import java.awt.image.BufferedImage;
  2. import javax.imageio.ImageIO;
  3. import javax.servlet.ServletOutputStream;
  4. import javax.servlet.http.HttpServletRequest;
  5. import javax.servlet.http.HttpServletResponse;
  6. import org.springframework.beans.factory.annotation.Autowired;
  7. import org.springframework.stereotype.Controller;
  8. import org.springframework.web.bind.annotation.RequestMapping;
  9. import org.springframework.web.servlet.ModelAndView;
  10. import com.google.code.kaptcha.Constants;
  11. import com.google.code.kaptcha.Producer;
  12. /**
  13. * ClassName: CaptchaImageCreateController <br/>
  14. * Function: 生成验证码Controller. <br/>
  15. * date: 2013-12-10 上午11:37:42 <br/>
  16. *
  17. * @author chenzhou1025@126.com
  18. */
  19. @Controller
  20. public class CaptchaImageCreateController {
  21. private Producer captchaProducer = null;
  22. @Autowired
  23. public void setCaptchaProducer(Producer captchaProducer){
  24. this.captchaProducer = captchaProducer;
  25. }
  26. @RequestMapping("/kaptcha.jpg")
  27. public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception{
  28. // Set to expire far in the past.
  29. response.setDateHeader("Expires", 0);
  30. // Set standard HTTP/1.1 no-cache headers.
  31. response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
  32. // Set IE extended HTTP/1.1 no-cache headers (use addHeader).
  33. response.addHeader("Cache-Control", "post-check=0, pre-check=0");
  34. // Set standard HTTP/1.0 no-cache header.
  35. response.setHeader("Pragma", "no-cache");
  36. // return a jpeg
  37. response.setContentType("image/jpeg");
  38. // create the text for the image
  39. String capText = captchaProducer.createText();
  40. // store the text in the session
  41. request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
  42. // create the image with the text
  43. BufferedImage bi = captchaProducer.createImage(capText);
  44. ServletOutputStream out = response.getOutputStream();
  45. // write the data out
  46. ImageIO.write(bi, "jpg", out);
  47. try {
  48. out.flush();
  49. } finally {
  50. out.close();
  51. }
  52. return null;
  53. }
  54. }

3.校验用户输入的Controller

  1. /**
  2. * ClassName: LoginController <br/>
  3. * Function: 登录Controller. <br/>
  4. * date: 2013-12-10 上午11:41:43 <br/>
  5. *
  6. * @author chenzhou1025@126.com
  7. */
  8. @Controller
  9. @RequestMapping("/login")
  10. public class LoginController {
  11. /**
  12. * loginCheck:ajax异步校验登录请求. <br/>
  13. *
  14. * @author chenzhou1025@126.com
  15. * @param request
  16. * @param username 用户名
  17. * @param password 密码
  18. * @param kaptchaReceived 验证码
  19. * @return 校验结果
  20. * @since 2013-12-10
  21. */
  22. @RequestMapping(value = "check", method = RequestMethod.POST)
  23. @ResponseBody
  24. public String loginCheck(HttpServletRequest request,
  25. @RequestParam(value = "username", required = true) String username,
  26. @RequestParam(value = "password", required = true) String password,
  27. @RequestParam(value = "kaptcha", required = true) String kaptchaReceived){
  28. //用户输入的验证码的值
  29. String kaptchaExpected = (String) request.getSession().getAttribute(
  30. com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
  31. //校验验证码是否正确
  32. if (kaptchaReceived == null || !kaptchaReceived.equals(kaptchaExpected)) {
  33. return "kaptcha_error";//返回验证码错误
  34. }
  35. //校验用户名密码
  36. // ……
  37. // ……
  38. return "success"; //校验通过返回成功
  39. }
  40. }
上一篇：redis的使用


下一篇：yii2.0增删改查