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


Posted in Javascript onOctober 17, 2016

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

一、创建Web项目;

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

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

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

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

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

其他:

一、网页验证码的属性

(一)添加边框

<servlet> 
<init-param> 
<description>图片边框,合法值:yes , no</description> 
<param-name>kaptcha.border</param-name> 
<param-value>yes</param-value> <!-- yes 或者 no--> 
</init-param> 
</servlet>

(二)边框颜色

<init-param> 
<description> 
边框颜色,合法值: r,g,b (and optional alpha) 或者white,black,blue. 
</description> 
<param-name>kaptcha.border.color</param-name> 
<param-value>black</param-value> 
</init-param>

(三)边框厚度

<init-param> 
<description>边框厚度,合法值:>大于0 </description> 
<param-name>kaptcha.border.thickness</param-name> 
<param-value>1</param-value> 
</init-param>

(四)图片宽度

<init-param> 
<description>图片宽 200</description> 
<param-name>kaptcha.image.width</param-name> 
<param-value>200</param-value> 
</init-param>

(五)图片高度

<init-param> 
<description>图片高 50</description> 
<param-name>kaptcha.image.height</param-name> 
<param-value>50</param-value> 
</init-param>

(六)验证码集合

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

(七)验证码长度

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

(八)字体

<init-param> 
<description>字体 Arial, Courier</description> 
<param-name>kaptcha.textproducer.font.names</param-name> 
<param-value>Arial, Courier</param-value> 
</init-param>

(九)字体大小

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

(十)字体颜色

<init-param> 
<description> 
字体颜色,合法值: r,g,b 或者 white,black,blue. 
</description> 
<param-name>kaptcha.textproducer.font.color</param-name> 
<param-value>black</param-value> 
</init-param>

(十一)每个验证码之间的间隔

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

(十二)干扰实现

<init-param> 
<description>干扰实现类</description> 
<param-name>kaptcha.noise.impl</param-name> 
<param-value> 
<!-- com.google.code.kaptcha.impl.NoNoise --> 
com.google.code.kaptcha.impl.DefaultNoise 
</param-value> 
</init-param>

(十三)干扰颜色

<init-param> 
<description> 
干扰颜色,合法值: r,g,b 或者 white,black,blue. 
</description> 
<param-name>kaptcha.noise.color</param-name> 
<param-value>black</param-value> 
</init-param>

(十四)背景样式

<init-param> 
<description> 
图片样式: 水纹com.google.code.kaptcha.impl.WaterRipple 
鱼眼com.google.code.kaptcha.impl.FishEyeGimpy 
阴影com.google.code.kaptcha.impl.ShadowGimpy 
</description> 
<param-name>kaptcha.obscurificator.impl</param-name> 
<param-value> 
com.google.code.kaptcha.impl.WaterRipple 
</param-value> 
</init-param>

(十五)背景实现类

<init-param> 
<description>背景实现类</description> 
<param-name>kaptcha.background.impl</param-name> 
<param-value> 
com.google.code.kaptcha.impl.DefaultBackground 
</param-value> 
</init-param>

(十六)背景渐变颜色

<init-param> 
<description>背景颜色渐变,开始颜色</description> 
<param-name>kaptcha.background.clear.from</param-name> 
<param-value>green</param-value> 
</init-param> 
<init-param> 
<description>背景颜色渐变,结束颜色</description> 
<param-name>kaptcha.background.clear.to</param-name> 
<param-value>white</param-value> 
</init-param>

(十七)文字渲染器

<init-param> 
<description> 文字渲染器 </description> 
<param-name>kaptcha.word.impl</param-name> 
<param-value> 
com.google.code.kaptcha.text.impl.DefaultWordRenderer
</param-value> 
</init-param>

(十八)图片的验证码会保存在Session中,其中的值为

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

(十九)图片实现类别

<init-param> 
<description>图片实现类</description> 
<param-name>kaptcha.producer.impl</param-name> 
<param-value> 
com.google.code.kaptcha.impl.DefaultKaptcha 
</param-value> 
</init-param>

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

<init-param> 
<description>文本实现类</description> 
<param-name>kaptcha.textproducer.impl</param-name> 
<param-value> 
com.google.code.kaptcha.text.impl.DefaultTextCreator 
</param-value> 
</init-param>

重写文本实现类,实现验证码为中文:

1.创建一个类别,继承Configurable 实现TextProducer(在jar包中)

import com.google.code.kaptcha.text.TextProducer; 
import com.google.code.kaptcha.util.Configurable; 
import java.util.Random; 
public class ChineseText extends Configurable implements TextProducer { 
public String getText() { 
int length = getConfig().getTextProducerCharLength(); 
String finalWord = "", firstWord = ""; 
int tempInt = 0; 
String[] array = { "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", 
"a", "b", "c", "d", "e", "f" }; 
Random rand = new Random(); 
for (int i = 0; i < length; i++) { 
switch (rand.nextInt(array.length)) { 
case 1: 
tempInt = rand.nextInt(26) + 65; 
firstWord = String.valueOf((char) tempInt); 
break; 
case 2: 
int r1, 
r2, 
r3, 
r4; 
String strH, 
strL;// high&low 
r1 = rand.nextInt(3) + 11; // 前闭后开[11,14) 
if (r1 == 13) { 
r2 = rand.nextInt(7); 
} else { 
r2 = rand.nextInt(16); 
} 
r3 = rand.nextInt(6) + 10; 
if (r3 == 10) { 
r4 = rand.nextInt(15) + 1; 
} else if (r3 == 15) { 
r4 = rand.nextInt(15); 
} else { 
r4 = rand.nextInt(16); 
} 
strH = array[r1] + array[r2]; 
strL = array[r3] + array[r4]; 
byte[] bytes = new byte[2]; 
bytes[0] = (byte) (Integer.parseInt(strH, 16)); 
bytes[1] = (byte) (Integer.parseInt(strL, 16)); 
firstWord = new String(bytes); 
break; 
default: 
tempInt = rand.nextInt(10) + 48; 
firstWord = String.valueOf((char) tempInt); 
break; 
} 
finalWord += firstWord; 
} 
return finalWord; 
} 
}

2.修改Web.xml配置

<init-param> 
<description>文本实现类</description> 
<param-name>kaptcha.textproducer.impl</param-name> 
<param-value> 
ChineseText 
</param-value> 
</init-param> 
五、验证码的校验(本文是利用check.jsp来校验的)保存在Session中,其中的键值为(第十八个属性)
[html] view plain copy
<body> 
<% 
// 检查是否是正确的验证码 
String k = (String) session.getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY); 
String str = request.getParameter("r"); 
if (k.equals(str)) 
out.print("true"); 
out.print(k + "---" + str); 
%> 
</body>

六、扩展(加法验证码的实现)

1.重写KaptchaServlet类

import com.google.code.kaptcha.Producer; 
import com.google.code.kaptcha.util.Config; 
import java.awt.image.BufferedImage; 
import java.io.IOException; 
import java.util.Enumeration; 
import java.util.Properties; 
import javax.imageio.ImageIO; 
import javax.servlet.Servlet; 
import javax.servlet.ServletConfig; 
import javax.servlet.ServletException; 
import javax.servlet.ServletOutputStream; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import javax.servlet.http.HttpSession; 
public class KaptchaServlet extends HttpServlet implements Servlet { 
private Properties props; 
private Producer kaptchaProducer; 
private String sessionKeyValue; 
public KaptchaServlet() { 
this.props = new Properties(); 
this.kaptchaProducer = null; 
this.sessionKeyValue = null; 
} 
public void init(ServletConfig conf) throws ServletException { 
super.init(conf); 
ImageIO.setUseCache(false); 
Enumeration initParams = conf.getInitParameterNames(); 
while (initParams.hasMoreElements()) { 
String key = (String) initParams.nextElement(); 
String value = conf.getInitParameter(key); 
this.props.put(key, value); 
} 
Config config = new Config(this.props); 
this.kaptchaProducer = config.getProducerImpl(); 
this.sessionKeyValue = config.getSessionKey(); 
} 
public void doGet(HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException { 
resp.setDateHeader("Expires", 0L); 
resp.setHeader("Cache-Control", "no-store, no-cache, must-revalidate"); 
resp.addHeader("Cache-Control", "post-check=0, pre-check=0"); 
resp.setHeader("Pragma", "no-cache"); 
resp.setContentType("image/jpeg"); 
String capText = this.kaptchaProducer.createText(); 
String s1 = capText.substring(0, 1); 
String s2 = capText.substring(1, 2); 
int r = Integer.valueOf(s1).intValue() + Integer.valueOf(s2).intValue(); 
req.getSession().setAttribute(this.sessionKeyValue, String.valueOf(r)); 
BufferedImage bi = this.kaptchaProducer.createImage(s1+"+"+s2+"=?"); 
ServletOutputStream out = resp.getOutputStream(); 
ImageIO.write(bi, "jpg", out); 
try { 
out.flush(); 
} finally { 
out.close(); 
} 
} 
}

2.修改配置文件

<servlet> 
<servlet-name>Kaptcha</servlet-name> 
<servlet-class>KaptchaServlet</servlet-class> 
</servlet>

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

Javascript 相关文章推荐
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
全面理解闭包机制
Jul 11 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
webpack4 从零学习常用配置(小结)
May 28 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 #Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 #Javascript
JQuery中解决重复动画的方法
Oct 17 #Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 #Javascript
原生JavaScript制作计算器
Oct 16 #Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 #Javascript
JavaScript正则表达式实例详解
Oct 16 #Javascript
You might like
php&amp;java(二)
2006/10/09 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
jQuery的一些注意
2006/12/06 Javascript
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
Python脚本实现集群检测和管理功能
2015/03/06 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
python获取中文字符串长度的方法
2018/11/14 Python
python实现Flappy Bird源码
2018/12/24 Python
python之拟合的实现
2019/07/19 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
python 如何停止一个死循环的线程
2020/11/24 Python
个人贷款担保书
2014/04/01 职场文书
汽修专业自荐信
2014/07/07 职场文书
党员示范岗材料
2014/12/19 职场文书
个人年度总结报告
2015/03/09 职场文书
Python实现天气查询软件
2021/06/07 Python
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL