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


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 相关文章推荐
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
jquery调整表格行tr上下顺序实例讲解
Jan 09 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
谈谈node.js中的模块系统
Sep 01 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
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
php数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
php socket通信简单实现
2016/11/18 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
python print出共轭复数的方法详解
2019/06/25 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
python爬取代理ip的示例
2020/12/18 Python
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
《自然之道》教学反思
2014/02/11 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
伦敦奥运会口号
2014/06/13 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript