当前位置：Gxlcms > JavaScript > 使用开源工具制作网页验证码的方法

使用开源工具制作网页验证码的方法

时间：2021-07-01 10:21:17 帮助过：12人阅读

开发工具：eclipse、kaptcha-2.3.jar包。

一、创建Web项目；

二、新建一个Jsp页面（内容有，一个文本框，一个图片容器，一个提交按钮)

  1. <body> 
  2. <img alt="random" src="randomcode.jpg" onclick="changeR(this)" style="cursor: pointer;"> 
  3. <form action="check.jsp"> 
  4. <input type="text" name="r"> 
  5. <input type="submit" value="s"> 
  6. </form> 
  7. </body>

三、可以看出图片验证码来源（src=“randomcode.jpg”）需配置Web.xml文件。（交给Servlet（该servlet在kaptcha-2.3.jar）处理）

  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>/randomcode.jpg</url-pattern> 
  8. </servlet-mapping>

四、由于需要kaptcha-2.3.jar包，所以将下载好的jar包导入在lib中。（复制黏贴即可）

其他：

一、网页验证码的属性

（一）添加边框

  1. <servlet> 
  2. <init-param> 
  3. <description>图片边框，合法值：yes , no</description> 
  4. <param-name>kaptcha.border</param-name> 
  5. <param-value>yes</param-value> <!-- yes 或者 no--> 
  6. </init-param> 
  7. </servlet>

（二）边框颜色

  1. <init-param> 
  2. <description> 
  3. 边框颜色，合法值： r,g,b (and optional alpha) 或者white,black,blue. 
  4. </description> 
  5. <param-name>kaptcha.border.color</param-name> 
  6. <param-value>black</param-value> 
  7. </init-param>

（三）边框厚度

  1. <init-param> 
  2. <description>边框厚度，合法值：>大于0 </description> 
  3. <param-name>kaptcha.border.thickness</param-name> 
  4. <param-value>1</param-value> 
  5. </init-param>

（四）图片宽度

  1. <init-param> 
  2. <description>图片宽 200</description> 
  3. <param-name>kaptcha.image.width</param-name> 
  4. <param-value>200</param-value> 
  5. </init-param>

（五）图片高度

  1. <init-param> 
  2. <description>图片高 50</description> 
  3. <param-name>kaptcha.image.height</param-name> 
  4. <param-value>50</param-value> 
  5. </init-param>

（六）验证码集合

  1. <init-param> 
  2. <description>文本集合，验证码值从此集合中获取</description> 
  3. <param-name>kaptcha.textproducer.char.string</param-name> 
  4. <param-value>1234567890</param-value> <!--纯数字 --> 
  5. //<param-value>abcde2345678gfynmnpwx</param-value> <!-- 文字加英文--> 
  6. </init-param>

（七）验证码长度

  1. <init-param> 
  2. <description>验证码长度 默认是5 </description> 
  3. <param-name>kaptcha.textproducer.char.length</param-name> 
  4. <param-value>2</param-value> 
  5. </init-param>

（八）字体

  1. <init-param> 
  2. <description>字体 Arial, Courier</description> 
  3. <param-name>kaptcha.textproducer.font.names</param-name> 
  4. <param-value>Arial, Courier</param-value> 
  5. </init-param>

（九）字体大小

  1. <init-param> 
  2. <description>字体大小 40px.</description> 
  3. <param-name>kaptcha.textproducer.font.size</param-name> 
  4. <param-value>40</param-value> 
  5. </init-param>

（十）字体颜色

  1. <init-param> 
  2. <description> 
  3. 字体颜色，合法值： r,g,b 或者 white,black,blue. 
  4. </description> 
  5. <param-name>kaptcha.textproducer.font.color</param-name> 
  6. <param-value>black</param-value> 
  7. </init-param>

（十一）每个验证码之间的间隔

  1. <init-param> 
  2. <description>文字间隔 2</description> 
  3. <param-name>kaptcha.textproducer.char.space</param-name> 
  4. <param-value>2</param-value> 
  5. </init-param>

（十二）干扰实现

  1. <init-param> 
  2. <description>干扰实现类</description> 
  3. <param-name>kaptcha.noise.impl</param-name> 
  4. <param-value> 
  5. <!-- com.google.code.kaptcha.impl.NoNoise --> 
  6. com.google.code.kaptcha.impl.DefaultNoise 
  7. </param-value> 
  8. </init-param>

（十三）干扰颜色

  1. <init-param> 
  2. <description> 
  3. 干扰颜色，合法值： r,g,b 或者 white,black,blue. 
  4. </description> 
  5. <param-name>kaptcha.noise.color</param-name> 
  6. <param-value>black</param-value> 
  7. </init-param>

（十四）背景样式

  1. <init-param> 
  2. <description> 
  3. 图片样式： 水纹com.google.code.kaptcha.impl.WaterRipple 
  4. 鱼眼com.google.code.kaptcha.impl.FishEyeGimpy 
  5. 阴影com.google.code.kaptcha.impl.ShadowGimpy 
  6. </description> 
  7. <param-name>kaptcha.obscurificator.impl</param-name> 
  8. <param-value> 
  9. com.google.code.kaptcha.impl.WaterRipple 
  10. </param-value> 
  11. </init-param>

（十五）背景实现类

  1. <init-param> 
  2. <description>背景实现类</description> 
  3. <param-name>kaptcha.background.impl</param-name> 
  4. <param-value> 
  5. com.google.code.kaptcha.impl.DefaultBackground 
  6. </param-value> 
  7. </init-param>

（十六）背景渐变颜色

  1. <init-param> 
  2. <description>背景颜色渐变，开始颜色</description> 
  3. <param-name>kaptcha.background.clear.from</param-name> 
  4. <param-value>green</param-value> 
  5. </init-param> 
  6. <init-param> 
  7. <description>背景颜色渐变，结束颜色</description> 
  8. <param-name>kaptcha.background.clear.to</param-name> 
  9. <param-value>white</param-value> 
  10. </init-param>

（十七）文字渲染器

  1. <init-param> 
  2. <description> 文字渲染器 </description> 
  3. <param-name>kaptcha.word.impl</param-name> 
  4. <param-value> 
  5. com.google.code.kaptcha.text.impl.DefaultWordRenderer
  6. </param-value> 
  7. </init-param>

（十八）图片的验证码会保存在Session中，其中的值为

  1. <init-param> 
  2. <description> session中存放验证码的key键 </description> 
  3. <param-name>kaptcha.session.key</param-name> 
  4. <param-value>KAPTCHA_SESSION_KEY</param-value> 
  5. </init-param>

（十九）图片实现类别

  1. <init-param> 
  2. <description>图片实现类</description> 
  3. <param-name>kaptcha.producer.impl</param-name> 
  4. <param-value> 
  5. com.google.code.kaptcha.impl.DefaultKaptcha 
  6. </param-value> 
  7. </init-param>

（二十）文本实现类（可通过重写该类来实现验证码为中文）

  1. <init-param> 
  2. <description>文本实现类</description> 
  3. <param-name>kaptcha.textproducer.impl</param-name> 
  4. <param-value> 
  5. com.google.code.kaptcha.text.impl.DefaultTextCreator 
  6. </param-value> 
  7. </init-param>

重写文本实现类，实现验证码为中文：

1.创建一个类别，继承Configurable 实现TextProducer（在jar包中）

  1. import com.google.code.kaptcha.text.TextProducer; 
  2. import com.google.code.kaptcha.util.Configurable; 
  3. import java.util.Random; 
  4. public class ChineseText extends Configurable implements TextProducer { 
  5. public String getText() { 
  6. int length = getConfig().getTextProducerCharLength(); 
  7. String finalWord = "", firstWord = ""; 
  8. int tempInt = 0; 
  9. String[] array = { "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", 
  10. "a", "b", "c", "d", "e", "f" }; 
  11. Random rand = new Random(); 
  12. for (int i = 0; i < length; i++) { 
  13. switch (rand.nextInt(array.length)) { 
  14. case 1: 
  15. tempInt = rand.nextInt(26) + 65; 
  16. firstWord = String.valueOf((char) tempInt); 
  17. break; 
  18. case 2: 
  19. int r1, 
  20. r2, 
  21. r3, 
  22. r4; 
  23. String strH, 
  24. strL;// high&low 
  25. r1 = rand.nextInt(3) + 11; // 前闭后开[11,14) 
  26. if (r1 == 13) { 
  27. r2 = rand.nextInt(7); 
  28. } else { 
  29. r2 = rand.nextInt(16); 
  30. } 
  31. r3 = rand.nextInt(6) + 10; 
  32. if (r3 == 10) { 
  33. r4 = rand.nextInt(15) + 1; 
  34. } else if (r3 == 15) { 
  35. r4 = rand.nextInt(15); 
  36. } else { 
  37. r4 = rand.nextInt(16); 
  38. } 
  39. strH = array[r1] + array[r2]; 
  40. strL = array[r3] + array[r4]; 
  41. byte[] bytes = new byte[2]; 
  42. bytes[0] = (byte) (Integer.parseInt(strH, 16)); 
  43. bytes[1] = (byte) (Integer.parseInt(strL, 16)); 
  44. firstWord = new String(bytes); 
  45. break; 
  46. default: 
  47. tempInt = rand.nextInt(10) + 48; 
  48. firstWord = String.valueOf((char) tempInt); 
  49. break; 
  50. } 
  51. finalWord += firstWord; 
  52. } 
  53. return finalWord; 
  54. } 
  55. }

2.修改Web.xml配置

  1. <init-param> 
  2. <description>文本实现类</description> 
  3. <param-name>kaptcha.textproducer.impl</param-name> 
  4. <param-value> 
  5. ChineseText 
  6. </param-value> 
  7. </init-param> 
  8. 五、验证码的校验（本文是利用check.jsp来校验的）保存在Session中，其中的键值为（第十八个属性）
  9. [html] view plain copy
  10. <body> 
  11. <% 
  12. // 检查是否是正确的验证码 
  13. String k = (String) session.getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY); 
  14. String str = request.getParameter("r"); 
  15. if (k.equals(str)) 
  16. out.print("true"); 
  17. out.print(k + "---" + str); 
  18. %> 
  19. </body>

六、扩展（加法验证码的实现）

1.重写KaptchaServlet类

  1. import com.google.code.kaptcha.Producer; 
  2. import com.google.code.kaptcha.util.Config; 
  3. import java.awt.image.BufferedImage; 
  4. import java.io.IOException; 
  5. import java.util.Enumeration; 
  6. import java.util.Properties; 
  7. import javax.imageio.ImageIO; 
  8. import javax.servlet.Servlet; 
  9. import javax.servlet.ServletConfig; 
  10. import javax.servlet.ServletException; 
  11. import javax.servlet.ServletOutputStream; 
  12. import javax.servlet.http.HttpServlet; 
  13. import javax.servlet.http.HttpServletRequest; 
  14. import javax.servlet.http.HttpServletResponse; 
  15. import javax.servlet.http.HttpSession; 
  16. public class KaptchaServlet extends HttpServlet implements Servlet { 
  17. private Properties props; 
  18. private Producer kaptchaProducer; 
  19. private String sessionKeyValue; 
  20. public KaptchaServlet() { 
  21. this.props = new Properties(); 
  22. this.kaptchaProducer = null; 
  23. this.sessionKeyValue = null; 
  24. } 
  25. public void init(ServletConfig conf) throws ServletException { 
  26. super.init(conf); 
  27. ImageIO.setUseCache(false); 
  28. Enumeration initParams = conf.getInitParameterNames(); 
  29. while (initParams.hasMoreElements()) { 
  30. String key = (String) initParams.nextElement(); 
  31. String value = conf.getInitParameter(key); 
  32. this.props.put(key, value); 
  33. } 
  34. Config config = new Config(this.props); 
  35. this.kaptchaProducer = config.getProducerImpl(); 
  36. this.sessionKeyValue = config.getSessionKey(); 
  37. } 
  38. public void doGet(HttpServletRequest req, HttpServletResponse resp) 
  39. throws ServletException, IOException { 
  40. resp.setDateHeader("Expires", 0L); 
  41. resp.setHeader("Cache-Control", "no-store, no-cache, must-revalidate"); 
  42. resp.addHeader("Cache-Control", "post-check=0, pre-check=0"); 
  43. resp.setHeader("Pragma", "no-cache"); 
  44. resp.setContentType("image/jpeg"); 
  45. String capText = this.kaptchaProducer.createText(); 
  46. String s1 = capText.substring(0, 1); 
  47. String s2 = capText.substring(1, 2); 
  48. int r = Integer.valueOf(s1).intValue() + Integer.valueOf(s2).intValue(); 
  49. req.getSession().setAttribute(this.sessionKeyValue, String.valueOf(r)); 
  50. BufferedImage bi = this.kaptchaProducer.createImage(s1+"+"+s2+"=?"); 
  51. ServletOutputStream out = resp.getOutputStream(); 
  52. ImageIO.write(bi, "jpg", out); 
  53. try { 
  54. out.flush(); 
  55. } finally { 
  56. out.close(); 
  57. } 
  58. } 
  59. }

2.修改配置文件

  1. <servlet> 
  2. <servlet-name>Kaptcha</servlet-name> 
  3. <servlet-class>KaptchaServlet</servlet-class> 
  4. </servlet>

以上所述是小编给大家介绍的使用开源工具制作网页验证码的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！