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


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类型系统之基本数据类型与包装类型
Jan 06 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
详解原生js实现offset方法
Jun 15 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
《javascript少儿编程》location术语总结
May 27 Javascript
详解react阻止无效重渲染的多种方式
Dec 11 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 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通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
php的sso单点登录实现方法
2015/01/08 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
jstree的简单实例
2016/12/01 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
React中上传图片到七牛的示例代码
2017/10/10 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
通过实例解析python描述符原理作用
2020/01/22 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
机电一体化专业应届本科生求职信
2013/09/27 职场文书
大学应届生求职简历的自我评价
2013/10/08 职场文书
贷款承诺书范文
2014/05/19 职场文书
学习型党组织心得体会
2014/09/12 职场文书
2014国庆节标语口号
2014/09/19 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
javascript之Object.assign()的痛点分析
2022/03/03 Javascript