Sping mvc 环境下使用kaptcha 生成验证码

冷不防 2022-07-14 10:45 238阅读 0赞

一、kaptcha 的简介

kaptcha 是一个非常实用的验证码生成工具。有了它,你可以生成各种样式的验证码,因为它是可配置的。kaptcha工作的原理是调用 com.google.code.kaptcha.servlet.KaptchaServlet,生成一个图片。

同时将生成的验证码字符串放到 HttpSession中。

使用kaptcha可以方便的配置:

  • 验证码的字体
  • 验证码字体的大小
  • 验证码字体的字体颜色
  • 验证码内容的范围(数字,字母,中文汉字!)
  • 验证码图片的大小,边框,边框粗细,边框颜色
  • 验证码的干扰线(可以自己继承com.google.code.kaptcha.NoiseProducer写一个自定义的干扰线)
  • 验证码的样式(鱼眼样式、3D、普通模糊……当然也可以继承com.google.code.kaptcha.GimpyEngine自定义样式)

二、生成验证码的案例

下面介绍一下用法:

  1. 下载该依赖包

方式一:首先去官网下载jar:http://code.google.com/p/kaptcha/

  1. 建立一个web项目,导入 kaptcha-2.3.jar 到环境变量中。

方式二:网盘下载jar包: http://yunpan.cn/cdjzkrjKgQ7eD 访问密码 754f

  1. 没有FQ的同学可以通过该路径下载。
  1. 新建一个java web项目 SpringKaptcha ,并配置好Spring的环境。

可以参考:

基于XML配置的Spring MVC 简单的HelloWorld实例应用

基于注解配置的Spring MVC 简单的HelloWorld实例应用

spring-mvc.xml 配置文件:

ContractedBlock.gif

web.xml 配置文件:

ContractedBlock.gif

  1. 我们专注于验证码的生成工作。

(1)在spring-mvc.xml 中添加以下的配置。

复制代码

  1. <!-- 页面生成随机验证码 -->
  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>
  6. <props>
  7. <prop key="kaptcha.border">no</prop>
  8. <prop key="kaptcha.border.color">105,179,90</prop>
  9. <prop key="kaptcha.textproducer.font.color">red</prop>
  10. <prop key="kaptcha.image.width">250</prop>
  11. <prop key="kaptcha.textproducer.font.size">80</prop>
  12. <prop key="kaptcha.image.height">90</prop>
  13. <prop key="kaptcha.session.key">code</prop>
  14. <prop key="kaptcha.textproducer.char.length">4</prop>
  15. <prop key="kaptcha.textproducer.font.names">宋体,楷体,微软雅黑</prop>
  16. </props>
  17. </constructor-arg>
  18. </bean>
  19. </property>
  20. </bean>

复制代码

(2)添加 生成验证码的 controller。

复制代码

  1. package com.souvc.app.base.captcha;
  2. import java.awt.image.BufferedImage;
  3. import javax.imageio.ImageIO;
  4. import javax.servlet.ServletOutputStream;
  5. import javax.servlet.http.HttpServletRequest;
  6. import javax.servlet.http.HttpServletResponse;
  7. import javax.servlet.http.HttpSession;
  8. import org.springframework.beans.factory.annotation.Autowired;
  9. import org.springframework.stereotype.Controller;
  10. import org.springframework.web.bind.annotation.RequestMapping;
  11. import org.springframework.web.servlet.ModelAndView;
  12. import com.google.code.kaptcha.Constants;
  13. import com.google.code.kaptcha.Producer;
  14. /**
  15. * 防止Captcha机器人登陆
  16. * @author liuwang
  17. *
  18. */
  19. @Controller
  20. @RequestMapping("/kaptcha/*")
  21. public class CaptchaController {
  22. @Autowired
  23. private Producer captchaProducer = null;
  24. @RequestMapping
  25. public ModelAndView getKaptchaImage(HttpServletRequest request, HttpServletResponse response) throws Exception {
  26. HttpSession session = request.getSession();
  27. String code = (String)session.getAttribute(Constants.KAPTCHA_SESSION_KEY);
  28. System.out.println("******************验证码是: " + code + "******************");
  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. session.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)jsp代码

复制代码

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <script type="text/javascript" src="js/jquery.js"></script>
  8. <script type="text/javascript" src="js/functions.js"></script>
  9. <title>测试页面</title>
  10. <script type="text/javascript">
  11. $(function(){
  12. $('#kaptchaImage').click(function () {
  13. //生成验证码
  14. $(this).hide().attr('src', './kaptcha/getKaptchaImage.do?' + Math.floor(Math.random()*100) ).fadeIn();
  15. event.cancelBubble=true;
  16. });
  17. });
  18. window.onbeforeunload = function(){
  19. //关闭窗口时自动退出
  20. if(event.clientX>360&&event.clientY<0||event.altKey){
  21. alert(parent.document.location);
  22. }
  23. };
  24. function changeCode() {
  25. $('#kaptchaImage').hide().attr('src', './kaptcha/getKaptchaImage.do?' + Math.floor(Math.random()*100) ).fadeIn();
  26. event.cancelBubble=true;
  27. }
  28. </script>
  29. </head>
  30. <body>
  31. <div class="chknumber">
  32. <label>验证码:
  33. <input name="kaptcha" type="text" id="kaptcha" maxlength="4" class="chknumber_input" />
  34. </label>
  35. <br />
  36. <img src="./kaptcha/getKaptchaImage.do" id="kaptchaImage" style="margin-bottom: -3px"/>
  37. <a href="#" οnclick="changeCode()">看不清?换一张</a>
  38. </div>
  39. </body>
  40. </html>

复制代码

简洁jsp 版本:

复制代码

  1. <div class="lr-formWrap">
  2. <input type="text" class="lr-input" placeholder="请输入图片验证码" style="width:145px;padding-left:15px" id="imageCode" name="imageCode" value="">
  3. <div class="fn-right">
  4. <img id="randImage" border="0" align="absmiddle" src="${basePath }/captcha-image" name="randImage" alt="验证码" width="115px" height="39px"/>
  5. </div>
  6. <p class="lr-tip" id="imageCode-lr-tip"></p>
  7. </div>

复制代码

简洁js版本 :

复制代码

  1. //生成验证码
  2. $('#randImage').click(function () {
  3. $(this).hide().attr('src', '${basePath}/captcha-image?' + Math.floor(Math.random()*100) ).fadeIn();
  4. });
  5. //刷新后,生成验证码
  6. $('#refreshCode').click(function () {
  7. $('#randImage').hide().attr('src', '${basePath}/captcha-image?' + Math.floor(Math.random()*100) ).fadeIn();
  8. });

复制代码

温馨提示:

获取验证码的关键语句,如下:

  1. String code =(String)session.getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);

(4) kaptcha可配置项

复制代码

  1. kaptcha.border 是否有边框 默认为true 我们可以自己设置yesno
  2. kaptcha.border.color 边框颜色 默认为Color.BLACK
  3. kaptcha.border.thickness 边框粗细度 默认为1
  4. kaptcha.producer.impl 验证码生成器 默认为DefaultKaptcha
  5. kaptcha.textproducer.impl 验证码文本生成器 默认为DefaultTextCreator
  6. kaptcha.textproducer.char.string 验证码文本字符内容范围 默认为abcde2345678gfynmnpwx
  7. kaptcha.textproducer.char.length 验证码文本字符长度 默认为5
  8. kaptcha.textproducer.font.names 验证码文本字体样式 默认为new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize)
  9. kaptcha.textproducer.font.size 验证码文本字符大小 默认为40
  10. kaptcha.textproducer.font.color 验证码文本字符颜色 默认为Color.BLACK
  11. kaptcha.textproducer.char.space 验证码文本字符间距 默认为2
  12. kaptcha.noise.impl 验证码噪点生成对象 默认为DefaultNoise
  13. kaptcha.noise.color 验证码噪点颜色 默认为Color.BLACK
  14. kaptcha.obscurificator.impl 验证码样式引擎 默认为WaterRipple
  15. kaptcha.word.impl 验证码文本字符渲染 默认为DefaultWordRenderer
  16. kaptcha.background.impl 验证码背景生成器 默认为DefaultBackground
  17. kaptcha.background.clear.from 验证码背景颜色渐进 默认为Color.LIGHT_GRAY
  18. kaptcha.background.clear.to 验证码背景颜色渐进 默认为Color.WHITE
  19. kaptcha.image.width 验证码图片宽度 默认为200
  20. kaptcha.image.height 验证码图片高度 默认为50

复制代码

(6)验证验证码是否正确的方法:

复制代码

  1. @RequestMapping(value = "/checkRandCode", method = RequestMethod.GET)
  2. public void checkRandCode(HttpServletRequest request,
  3. HttpServletResponse response) {
  4. Map<String, Object> map = new HashMap<String, Object>();
  5. try {
  6. String randCode = request.getParameter("randCode");
  7. logger.info("randCode: " +randCode);
  8. String status = "0";
  9. String code = (String)request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
  10. if(randCode.toLowerCase().equals(code.toLowerCase()))status="1";
  11. map.put("status", status);
  12. map.put("description", "");
  13. String data = JSONObject.fromObject(map).toString();
  14. logger.info("返回给页面的数据为: " + data);
  15. response.getWriter().print(data);
  16. response.getWriter().flush();
  17. response.getWriter().close();
  18. } catch (Exception ex) {
  19. logger.error(ex.getMessage(), ex);
  20. }

复制代码

(7) 默认值

041727470175372.png

发表评论

表情:
评论列表 (有 0 条评论,238人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Kaptcha生成图片验证

    Kaptcha简介 kaptcha 是一个很有用的验证码生成工具。由于它是可配置的,有了它,你能够生成各种样式的验证码。 Kaptcha 是一个可高度配置的实用验证码