使用開源工具制作網(wǎng)頁驗(yàn)證碼的方法
更新時(shí)間：2016年10月17日 09:37:57 作者：qq_34966272
這篇文章主要介紹了使用開源工具制作網(wǎng)頁驗(yàn)證碼的方法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
開發(fā)工具：eclipse、kaptcha-2.3.jar包。
一、創(chuàng)建Web項(xiàng)目；
二、新建一個(gè)Jsp頁面（內(nèi)容有，一個(gè)文本框，一個(gè)圖片容器，一個(gè)提交按鈕)
<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>
三、可以看出圖片驗(yàn)證碼來源（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包導(dǎo)入在lib中。（復(fù)制黏貼即可）
其他：
一、網(wǎng)頁驗(yàn)證碼的屬性
（一）添加邊框
<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>
（六）驗(yàn)證碼集合
<init-param> <description>文本集合，驗(yàn)證碼值從此集合中獲取</description> <param-name>kaptcha.textproducer.char.string</param-name> <param-value>1234567890</param-value> <!--純數(shù)字 --> //<param-value>abcde2345678gfynmnpwx</param-value> <!-- 文字加英文--> </init-param>
（七）驗(yàn)證碼長(zhǎng)度
<init-param> <description>驗(yàn)證碼長(zhǎng)度 默認(rèn)是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>
（十一）每個(gè)驗(yàn)證碼之間的間隔
<init-param> <description>文字間隔 2</description> <param-name>kaptcha.textproducer.char.space</param-name> <param-value>2</param-value> </init-param>
（十二）干擾實(shí)現(xiàn)
<init-param> <description>干擾實(shí)現(xiàn)類</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>
（十五）背景實(shí)現(xiàn)類
<init-param> <description>背景實(shí)現(xiàn)類</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>背景顏色漸變，結(jié)束顏色</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>
（十八）圖片的驗(yàn)證碼會(huì)保存在Session中，其中的值為
<init-param> <description> session中存放驗(yàn)證碼的key鍵 </description> <param-name>kaptcha.session.key</param-name> <param-value>KAPTCHA_SESSION_KEY</param-value> </init-param>
（十九）圖片實(shí)現(xiàn)類別
<init-param> <description>圖片實(shí)現(xiàn)類</description> <param-name>kaptcha.producer.impl</param-name> <param-value> com.google.code.kaptcha.impl.DefaultKaptcha </param-value> </init-param>
（二十）文本實(shí)現(xiàn)類（可通過重寫該類來實(shí)現(xiàn)驗(yàn)證碼為中文）
<init-param> <description>文本實(shí)現(xiàn)類</description> <param-name>kaptcha.textproducer.impl</param-name> <param-value> com.google.code.kaptcha.text.impl.DefaultTextCreator </param-value> </init-param>
重寫文本實(shí)現(xiàn)類，實(shí)現(xiàn)驗(yàn)證碼為中文：
1.創(chuàng)建一個(gè)類別，繼承Configurable 實(shí)現(xiàn)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>文本實(shí)現(xiàn)類</description>
<param-name>kaptcha.textproducer.impl</param-name>
<param-value>
ChineseText
</param-value>
</init-param>
五、驗(yàn)證碼的校驗(yàn)（本文是利用check.jsp來校驗(yàn)的）保存在Session中，其中的鍵值為（第十八個(gè)屬性）
[html] view plain copy
<body>
<%
// 檢查是否是正確的驗(yàn)證碼
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>
六、擴(kuò)展（加法驗(yàn)證碼的實(shí)現(xiàn)）
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>
以上所述是小編給大家介紹的使用開源工具制作網(wǎng)頁驗(yàn)證碼的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
選擇并轉(zhuǎn)移導(dǎo)航菜單的方法有很多，本例使用js來實(shí)現(xiàn)選擇并轉(zhuǎn)移導(dǎo)航菜單,需要的朋友可以參考下2014-08-08
這篇文章主要為大家詳細(xì)介紹了Bootstrap CSS組件之按鈕下拉菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
javascript 正則替換 replace(regExp, function)用法
剛在弄網(wǎng)頁通過servlet返回的json數(shù)據(jù)來添加div元素,簡(jiǎn)單研究了下replace(regExp, function)方式的function參數(shù).2010-05-05
基于javascript實(shí)現(xiàn)窗口抖動(dòng)效果
這篇文章主要介紹了基于javascript實(shí)現(xiàn)窗口抖動(dòng)效果,需要的朋友可以參考下2016-01-01
如何通過setTimeout理解JS運(yùn)行機(jī)制詳解
這篇文章主要給大家介紹了關(guān)于如何通過setTimeout理解JS運(yùn)行機(jī)制的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)圖片上下切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07![[js高手之路]單例模式實(shí)現(xiàn)模態(tài)框的示例](http://img.jbzj.com/images/xgimg/bcimg6.png)
[js高手之路]單例模式實(shí)現(xiàn)模態(tài)框的示例
下面小編就為大家?guī)硪黄猍js高手之路]單例模式實(shí)現(xiàn)模態(tài)框的示例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
微信小程序?qū)崿F(xiàn)滴滴導(dǎo)航tab切換效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滴滴導(dǎo)航tab切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章介紹了js判斷瀏覽器類型的方法，有需要的朋友可以參考一下2013-08-08
Js圖片點(diǎn)擊切換輪播實(shí)現(xiàn)代碼
這篇文章主要介紹了Js圖片點(diǎn)擊切換輪播實(shí)現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07