當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

web页面验证码生成

發(fā)布時間：2025/3/21 编程问答 93 豆豆

生活随笔收集整理的這篇文章主要介紹了 web页面验证码生成小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

web頁面驗(yàn)證碼生成

kaptcha 是一個非常實(shí)用的驗(yàn)證碼生成工具。有了它，你可以生成各種樣式的驗(yàn)證碼，因?yàn)樗强膳渲玫摹aptcha工作的原理是調(diào)用 com.google.code.kaptcha.servlet.KaptchaServlet，生成一個圖片。同時將生成的驗(yàn)證碼字符串放到 HttpSession中。

使用kaptcha可以方便的配置：

驗(yàn)證碼的字體
驗(yàn)證碼字體的大小
驗(yàn)證碼字體的字體顏色
驗(yàn)證碼內(nèi)容的范圍(數(shù)字，字母，中文漢字！)
驗(yàn)證碼圖片的大小，邊框，邊框粗細(xì)，邊框顏色
驗(yàn)證碼的干擾線(可以自己繼承com.google.code.kaptcha.NoiseProducer寫一個自定義的干擾線)
驗(yàn)證碼的樣式(魚眼樣式、3D、普通模糊……當(dāng)然也可以繼承com.google.code.kaptcha.GimpyEngine自定義樣式)

……

詳細(xì)信息請看下面的web.xml文件

下面介紹一下用法:

1.首先去官網(wǎng)下載jar:http://code.google.com/p/kaptcha/

2.建立一個web項(xiàng)目，導(dǎo)入kaptcha-2.3.jar到環(huán)境變量中。

3.配置web.xml文件

<?xml version="1.0" encoding="UTF-8"?><web-app xmlns="http://java.sun.com/xml/ns/j2ee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"version="2.4"><servlet><servlet-name>Kaptcha</servlet-name><servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class><init-param><param-name>kaptcha.border</param-name><param-value>no</param-value></init-param><init-param><param-name>kaptcha.textproducer.font.color</param-name><param-value>black</param-value></init-param><init-param><param-name>kaptcha.textproducer.char.space</param-name><param-value>5</param-value></init-param></servlet><servlet-mapping><servlet-name>Kaptcha</servlet-name><url-pattern>/Kaptcha.jpg</url-pattern></servlet-mapping><welcome-file-list><welcome-file>KaptchaExample.jsp</welcome-file></welcome-file-list> </web-app>

4.jsp頁面

KaptchaExample.jsp：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><%@ page language="java" contentType="text/html; charset=UTF-8" %><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Kaptcha Example</title></head><script type="text/javascript"> $(function() { $('#kaptchaImage').click(function() {$(this).attr('src','kaptcha.jpg?' + Math.floor(Math.random() * 100));}); }); </script> <body>Enter in the <a href="http://code.google.com/p/kaptcha/">Kaptcha</a> to see if it matches what is stored in the session attributes.<table><tr><td><img src="Kaptcha.jpg" id="kaptchaImage" ></td><td valign="top"><form method="POST"><br>sec code:<input type="text" name="kaptchafield"><br /><input type="submit" name="submit"></form></td></tr></table> <br /><br /><br /><br /><%String c = (String)session.getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);String parm = (String) request.getParameter("kaptchafield");out.println("Parameter: " + parm + " ? Session Key: " + c + " : ");if (c != null && parm != null) {if (c.equals(parm)) {out.println("<b>true</b>");} else {out.println("<b>false</b>");}}%></body> </html>

上面的配置在普通jsp環(huán)境下面是有效的，如果在spring mvc環(huán)境下，則取不到session值，對于sping mvc環(huán)境驗(yàn)證碼配置如下：

１.不用在web.xml進(jìn)行相關(guān)配置，在applicationContext.xml中配置

2.新建生成圖片控制類

package com.google.code.kaptcha;import java.awt.image.BufferedImage;import javax.imageio.ImageIO; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import org.springframework.beans.factory.annotation.Autowired; import org.springframework.core.Constants; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping;@Controller @RequestMapping("/") public class CaptchaImageCreateController { private Producer captchaProducer = null; @Autowired public void setCaptchaProducer(Producer captchaProducer) { this.captchaProducer = captchaProducer; } @RequestMapping("/captcha-image") public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception { // Set to expire far in the past.response.setDateHeader("Expires", 0);// Set standard HTTP/1.1 no-cache headers. response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate"); // Set IE extended HTTP/1.1 no-cache headers (use addHeader). response.addHeader("Cache-Control", "post-check=0, pre-check=0"); // Set standard HTTP/1.0 no-cache header. response.setHeader("Pragma", "no-cache"); // return a jpeg response.setContentType("image/jpeg"); // create the text for the image String capText = captchaProducer.createText(); // store the text in the session request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText); // create the image with the text BufferedImage bi = captchaProducer.createImage(capText); ServletOutputStream out = response.getOutputStream(); // write the data out ImageIO.write(bi, "jpg", out); try { out.flush(); } finally { out.close(); } return null; } }

?3.前臺調(diào)用方式

<div class="chknumber"> <label>驗(yàn)證碼： <input name="kaptcha" type="text" id="kaptcha" maxlength="4" class="chknumber_input" /> </label> <img src="/ClinicCountManager/captcha-image.do" width="55" height="20" id="kaptchaImage" style="margin-bottom: -3px"/> <script type="text/javascript"> $(function(){ $('#kaptchaImage').click(function () {//生成驗(yàn)證碼 $(this).hide().attr('src', '/ClinicCountManager/captcha-image.do?' + Math.floor(Math.random()*100) ).fadeIn(); }) }); </script> </div>

4.取驗(yàn)證碼的方式

String code = (String)session.getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);

啦啦啦

kaptcha.border 是否有邊框默認(rèn)為true 我們可以自己設(shè)置yes，no kaptcha.border.color 邊框顏色默認(rèn)為Color.BLACK kaptcha.border.thickness 邊框粗細(xì)度默認(rèn)為1 kaptcha.producer.impl 驗(yàn)證碼生成器默認(rèn)為DefaultKaptcha kaptcha.textproducer.impl 驗(yàn)證碼文本生成器默認(rèn)為DefaultTextCreator kaptcha.textproducer.char.string 驗(yàn)證碼文本字符內(nèi)容范圍默認(rèn)為abcde2345678gfynmnpwx kaptcha.textproducer.char.length 驗(yàn)證碼文本字符長度默認(rèn)為5 kaptcha.textproducer.font.names 驗(yàn)證碼文本字體樣式默認(rèn)為new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize) kaptcha.textproducer.font.size 驗(yàn)證碼文本字符大小默認(rèn)為40 kaptcha.textproducer.font.color 驗(yàn)證碼文本字符顏色默認(rèn)為Color.BLACK kaptcha.textproducer.char.space 驗(yàn)證碼文本字符間距默認(rèn)為2 kaptcha.noise.impl 驗(yàn)證碼噪點(diǎn)生成對象默認(rèn)為DefaultNoise kaptcha.noise.color 驗(yàn)證碼噪點(diǎn)顏色默認(rèn)為Color.BLACK kaptcha.obscurificator.impl 驗(yàn)證碼樣式引擎默認(rèn)為WaterRipple kaptcha.word.impl 驗(yàn)證碼文本字符渲染默認(rèn)為DefaultWordRenderer kaptcha.background.impl 驗(yàn)證碼背景生成器默認(rèn)為DefaultBackground kaptcha.background.clear.from 驗(yàn)證碼背景顏色漸進(jìn) 默認(rèn)為Color.LIGHT_GRAY kaptcha.background.clear.to 驗(yàn)證碼背景顏色漸進(jìn) 默認(rèn)為Color.WHITE kaptcha.image.width 驗(yàn)證碼圖片寬度默認(rèn)為200 kaptcha.image.height 驗(yàn)證碼圖片高度默認(rèn)為50 1.導(dǎo)入kaptcha9.jar 2.<bean id="captcha" class="com.google.code.kaptcha.servlet.KaptchaExtend"><constructor-arg><props> <prop key="kaptcha.border">yes</prop> <prop key="kaptcha.border.color">105,179,90</prop> <prop key="kaptcha.border.thickness">20</prop><prop key="kaptcha.textproducer.font.color">black</prop> <prop key="kaptcha.image.width">200</prop> <prop key="kaptcha.image.height">50</prop> <prop key="kaptcha.textproducer.font.size">40</prop> <prop key="kaptcha.session.key">code</prop> <prop key="kaptcha.textproducer.char.length">4</prop> <prop key="kaptcha.textproducer.font.names">Arial,Courier</prop> <prop key="kaptcha.background.clear.from">black</prop> <prop key="kaptcha.background.clear.to">255,0,0</prop> </props> </constructor-arg></bean> 3. @...public class XXController{//在Controller中注入驗(yàn)證碼生成器 @Autowiredprivate KaptchaExtend ke;@RequestMapping("/kap2")public String kaptcha2(HttpServletRequest req,HttpServletResponse resp,HttpSession s){try {ke.captcha(req, resp);//生成驗(yàn)證碼，并寫出驗(yàn)證碼圖片System.out.println("code:"+s.getAttribute("code"));}return null;}} *需要jdk7

啦啦啦

總結(jié)

以上是生活随笔為你收集整理的web页面验证码生成的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： cmd 一键获取所有连接过的wifi
下一篇： [转]C++结构体|类内存对齐详解

编程问答

web页面 验证码 生成

總結(jié)

web页面验证码生成