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


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 相关文章推荐
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
Vue2.0 slot分发内容与props验证的方法
Dec 12 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
ES6新增的数组知识实例小结
May 23 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/12/14 PHP
解析zend Framework如何自动加载类
2013/06/28 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
php use和include区别总结
2019/10/13 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
Python3基础之函数用法
2014/08/13 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
python 调用钉钉机器人的方法
2019/02/20 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
python实现滑雪者小游戏
2020/02/22 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
python字符串的index和find的区别详解
2020/06/20 Python
大学新生军训个人的自我评价
2013/10/03 职场文书
中学生学习生活的自我评价
2013/10/26 职场文书
新驾驶员个人自我评价
2014/01/03 职场文书
食品安全工作实施方案
2014/03/26 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书