天天看點

kaptcha html頁面驗證碼,kaptcha驗證碼使用(示例代碼)

效果圖:

kaptcha html頁面驗證碼,kaptcha驗證碼使用(示例代碼)

kaptcha 是一個很有用的驗證碼生成工具。有了它,你能夠生成各種樣式的驗證碼,由于它是可配置的。

kaptcha工作的原理是調用 com.google.code.kaptcha.servlet.KaptchaServlet,生成一個圖檔。

同一時候将生成的驗證碼字元串放到 HttpSession中。

使用kaptcha能夠友善的配置:

驗證碼的字型

驗證碼字型的大小

驗證碼字型的字型顔色

驗證碼内容的範圍(數字,字母,中文漢字!)

驗證碼圖檔的大小。邊框,邊框粗細,邊框顔色

驗證碼的幹擾線(能夠自己繼承com.google.code.kaptcha.NoiseProducer寫一個自己定義的幹擾線)

驗證碼的樣式(魚眼樣式、3D、普通模糊……當然也能夠繼承com.google.code.kaptcha.GimpyEngine自己定義樣式)

……

以下介紹一下使用方法:

實作方式有多種,以下介紹Spring注入方式和Servlet方式

Servlet方式

2.配置web.xml添加servlet

Kaptcha

com.google.code.kaptcha.servlet.KaptchaServlet

Kaptcha

/kaptcha.jpg

3、在jsp頁面中

kaptcha html頁面驗證碼,kaptcha驗證碼使用(示例代碼)

name="kaptcha" value="" />

value="submit" />

當中src="kaptcha.jpg"會被定位到servlet上

4、KaptchaServlet會把驗證碼設定到session中。能夠例如以下方式擷取

String kaptchaExpected = (String)request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);5、假設是struts2的action。能夠例如以下方式擷取

String kaptchaExpected = (String)ActionContext.getContext().getSession().get(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);6、假設想設定點選圖檔更換驗證碼。能夠加上例如以下js。須要jquery

$(function(){

$(‘#kaptchaImage‘).click(function () { $(this).attr(‘src‘, ‘/kaptcha.jpg?‘ + Math.floor(Math.random()*100) ); })

});

7、或者來點fade效果

$(function() {

$(‘#kaptchaImage‘).click(

function() {

$(this).hide().attr(‘src‘,

‘kaptcha.jpg?

‘ + Math.floor(Math.random() * 100)).fadeIn();

});

});

8、驗證碼圖檔還有非常多參數設定

設定方法。在web.xml的servlet中

kaptcha.border

no

Constant

描寫叙述

預設值

kaptcha.border

圖檔邊框,合法值:yes , no

yes

kaptcha.border.color

邊框顔色,合法值: r,g,b (and optional alpha) 或者 white,black,blue.

black

kaptcha.border.thickness

邊框厚度。合法值:>0

1

kaptcha.image.width

圖檔寬

200

kaptcha.image.height

圖檔高

50

kaptcha.producer.impl

圖檔實作類

com.google.code.kaptcha.impl.DefaultKaptcha

kaptcha.textproducer.impl

文本實作類

com.google.code.kaptcha.text.impl.DefaultTextCreator

kaptcha.textproducer.char.string

文本集合,驗證碼值從此集合中擷取

abcde2345678gfynmnpwx

kaptcha.textproducer.char.length

驗證碼長度

5

kaptcha.textproducer.font.names

字型

Arial, Courier

kaptcha.textproducer.font.size

字型大小

40px.

kaptcha.textproducer.font.color

字型顔色,合法值: r,g,b  或者 white,black,blue.

black

kaptcha.textproducer.char.space

文字間隔

2

kaptcha.noise.impl

幹擾實作類

com.google.code.kaptcha.impl.DefaultNoise

kaptcha.noise.color

幹擾顔色。合法值: r,g,b 或者 white,black,blue.

black

kaptcha.obscurificator.impl

圖檔樣式:

水紋com.google.code.kaptcha.impl.WaterRipple

魚眼com.google.code.kaptcha.impl.FishEyeGimpy

陰影com.google.code.kaptcha.impl.ShadowGimpy

com.google.code.kaptcha.impl.WaterRipple

kaptcha.background.impl

背景實作類

com.google.code.kaptcha.impl.DefaultBackground

kaptcha.background.clear.from

背景顔色漸變,開始顔色

light grey

kaptcha.background.clear.to

背景顔色漸變。結束顔色

white

kaptcha.word.impl

文字渲染器

com.google.code.kaptcha.text.impl.DefaultWordRenderer

kaptcha.session.key

session key

KAPTCHA_SESSION_KEY

kaptcha.session.date

session date

KAPTCHA_SESSION_DATE

9、

水紋效果

kaptcha html頁面驗證碼,kaptcha驗證碼使用(示例代碼)

魚眼效果

kaptcha html頁面驗證碼,kaptcha驗證碼使用(示例代碼)

陰影效果

kaptcha html頁面驗證碼,kaptcha驗證碼使用(示例代碼)

下面代碼是我在SpringMVC中的代碼

package com.rapido.controller;

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.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.servlet.ModelAndView;

import com.google.code.kaptcha.Constants;

import com.google.code.kaptcha.Producer;

@Controller

@RequestMapping("/Captcha")

public class CaptchaRandomCodeController {

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 {

response.setDateHeader("Expires", 0);// 禁止server端緩存

// 設定标準的 HTTP/1.1 no-cache headers.

response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");

// 設定IE擴充 HTTP/1.1 no-cache headers (use addHeader).

response.addHeader("Cache-Control", "post-check=0, pre-check=0");

response.setHeader("Pragma", "no-cache");// 設定标準 HTTP/1.0 不緩存圖檔

response.setContentType("image/jpeg");// 傳回一個 jpeg 圖檔,預設是text/html(輸出文檔的MIMI類型)

String capText = captchaProducer.createText();// 為圖檔建立文本

// 将文本儲存在session中。這裡就使用包中的靜态變量吧

request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);

BufferedImage bi = captchaProducer.createImage(capText); // 建立帶有文本的圖檔

ServletOutputStream out = response.getOutputStream();

// 圖檔資料輸出

ImageIO.write(bi, "jpg", out);

try {

out.flush();

} finally {

out.close();

}

System.out.println("Session 驗證碼是:" + request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY));

return null;

}

}

applicationContext.xml

yes

105,179,90

160

50

code

red

35

3

5

彩雲,宋體,楷體,微軟雅黑

JSP

$(function(){

// 驗證碼漸變效果切換

$(‘#kaptchaImage‘).click(

function() {

$(this).hide().attr(‘src‘,‘Captcha/captcha-image.do?‘+ Math.floor(Math.random() * 100)).fadeIn();

}

);

});

驗證碼:

kaptcha html頁面驗證碼,kaptcha驗證碼使用(示例代碼)

驗證碼不但能夠使用圖形還能夠使用語音,比方SimpleCaptcha就能夠。kaptcha擴充了SimpleCaptcha,等等都能夠使用語音驗證碼,官方中有提供此類的demo能夠下載下傳部署在tomcat上使用

使用Java生成驗證碼的庫有非常多,比方下面清單中的舉例