kaptcha驗(yàn)證碼組件使用簡(jiǎn)介解析

更新時(shí)間：2019年08月21日 09:29:30 作者：chenzhou123520

這篇文章主要介紹了kaptcha驗(yàn)證碼組件使用簡(jiǎn)介解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

Kaptcha是一個(gè)基于SimpleCaptcha的驗(yàn)證碼開(kāi)源項(xiàng)目。

官網(wǎng)地址：http://code.google.com/p/kaptcha/

kaptcha的使用比較方便，只需添加jar包依賴(lài)之后簡(jiǎn)單地配置就可以使用了。kaptcha所有配置都可以通過(guò)web.xml來(lái)完成，如果你的項(xiàng)目中使用了Spring MVC，那么則有另外的一種方式來(lái)實(shí)現(xiàn)。

一、簡(jiǎn)單的jsp-servlet項(xiàng)目

1.添加jar包依賴(lài)

如果你使用maven來(lái)統(tǒng)一管理jar包，則在工程的pom.xml中添加dependency

<!-- kaptcha --> 
<dependency> 
  <groupId>com.google.code.kaptcha</groupId> 
  <artifactId>kaptcha</artifactId> 
  <version>2.3.2</version> 
</dependency>

如果是非maven管理的項(xiàng)目，則直接在官網(wǎng)下載kaptcha的jar包，然后添加到項(xiàng)目lib庫(kù)中，下載地址：

http://code.google.com/p/kaptcha/downloads/list

2.配置web.xml

上面說(shuō)了，kaptcha都是在web.xml中配置，我們必須在web.xml中配置kaptcha的servlet，具體如下：

<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>/kaptcha.jpg</url-pattern> 
</servlet-mapping>

其中servlet的url-pattern可以自定義。

kaptcha所有的參數(shù)都有默認(rèn)的配置，如果我們不顯示配置的話(huà)，會(huì)采取默認(rèn)的配置。

如果要顯示配置kaptcha，在配置kaptcha對(duì)應(yīng)的Servlet時(shí)，在init-param增加響應(yīng)的參數(shù)配置即可。示例如下：

<servlet> 
  <servlet-name>Kaptcha</servlet-name> 
  <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class> 
  <init-param> 
    <param-name>kaptcha.image.width</param-name> 
    <param-value>200</param-value> 
    <description>Width in pixels of the kaptcha image.</description> 
  </init-param> 
  <init-param> 
    <param-name>kaptcha.image.height</param-name> 
    <param-value>50</param-value> 
    <description>Height in pixels of the kaptcha image.</description> 
  </init-param> 
  <init-param> 
    <param-name>kaptcha.textproducer.char.length</param-name> 
    <param-value>4</param-value> 
    <description>The number of characters to display.</description> 
  </init-param> 
  <init-param> 
    <param-name>kaptcha.noise.impl</param-name> 
    <param-value>com.google.code.kaptcha.impl.NoNoise</param-value> 
    <description>The noise producer.</description> 
  </init-param> 
</servlet>

具體的配置參數(shù)參見(jiàn)：http://code.google.com/p/kaptcha/wiki/ConfigParameters

3.頁(yè)面調(diào)用

<form action="submit.action"> 
  <input type="text" name="kaptcha" value="" /><img src="kaptcha.jpg" /> 
</form>

4.在submit的action方法中進(jìn)行驗(yàn)證碼校驗(yàn)

//從session中取出servlet生成的驗(yàn)證碼text值 
String kaptchaExpected = (String)request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY); 
//獲取用戶(hù)頁(yè)面輸入的驗(yàn)證碼 
String kaptchaReceived = request.getParameter("kaptcha"); 
//校驗(yàn)驗(yàn)證碼是否正確 
if (kaptchaReceived == null || !kaptchaReceived.equalsIgnoreCase(kaptchaExpected)){ 
  setError("kaptcha", "Invalid validation code."); 
}

注：確保JDK設(shè)置了 -Djava.awt.headless=true

5.實(shí)現(xiàn)頁(yè)面驗(yàn)證碼刷新

<img src="kaptcha.jpg" width="200" id="kaptchaImage" title="看不清，點(diǎn)擊換一張" /> 
<script type="text/javascript"> 
  $(function() { 
    $('#kaptchaImage').click(function() {$(this).attr('src','kaptcha.jpg?' + Math.floor(Math.random() * 100));}); 
  }); 
</script> 
<br /><small>看不清，點(diǎn)擊換一張</small>

注：為了避免瀏覽器的緩存，可以在驗(yàn)證碼請(qǐng)求url后添加隨機(jī)數(shù)

二、Spring mvc項(xiàng)目中使用kaptcha

1.添加captchaProducer bean定義

<!-- 配置kaptcha驗(yàn)證碼 --> 
<bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha"> 
  <property name="config"> 
    <bean class="com.google.code.kaptcha.util.Config"> 
      <constructor-arg type="java.util.Properties"> 
        <props> 
          <prop key="kaptcha.image.width">100</prop> 
          <prop key="kaptcha.image.height">50</prop> 
          <prop key="kaptcha.noise.impl">com.google.code.kaptcha.impl.NoNoise</prop> 
          <prop key="kaptcha.textproducer.char.string">0123456789abcdefghijklmnopqrstuvwxyz</prop> 
          <prop key="kaptcha.textproducer.char.length">4</prop> 
        </props> 
      </constructor-arg> 
    </bean> 
  </property> 
</bean>

2.生成驗(yàn)證碼的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;  
/** 
 * ClassName: CaptchaImageCreateController <br/> 
 * Function: 生成驗(yàn)證碼Controller. <br/> 
 * date: 2013-12-10 上午11:37:42 <br/> 
 * 
 * @author chenzhou1025@126.com 
 */ 
@Controller 
public class CaptchaImageCreateController { 
  private Producer captchaProducer = null;  
  @Autowired 
  public void setCaptchaProducer(Producer captchaProducer){ 
    this.captchaProducer = captchaProducer; 
  }  
  @RequestMapping("/kaptcha.jpg") 
  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.校驗(yàn)用戶(hù)輸入的Controller

/**
 * ClassName: LoginController <br/>
 * Function: 登錄Controller. <br/>
 * date: 2013-12-10 上午11:41:43 <br/>
 *
 * @author chenzhou1025@126.com
 */
@Controller
@RequestMapping("/login")
public class LoginController {
	/**
	 * loginCheck:ajax異步校驗(yàn)登錄請(qǐng)求. <br/>
	 *
	 * @author chenzhou1025@126.com
	 * @param request
	 * @param username 用戶(hù)名
	 * @param password 密碼
	 * @param kaptchaReceived 驗(yàn)證碼
	 * @return 校驗(yàn)結(jié)果
	 * @since 2013-12-10
	 */
	@RequestMapping(value = "check", method = RequestMethod.POST)
	@ResponseBody
	public String loginCheck(HttpServletRequest request,
			@RequestParam(value = "username", required = true) String username,
			@RequestParam(value = "password", required = true) String password,
			@RequestParam(value = "kaptcha", required = true) String kaptchaReceived){
		//用戶(hù)輸入的驗(yàn)證碼的值
		String kaptchaExpected = (String) request.getSession().getAttribute(
				com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
		//校驗(yàn)驗(yàn)證碼是否正確
		if (kaptchaReceived == null || !kaptchaReceived.equals(kaptchaExpected)) {
			return "kaptcha_error";//返回驗(yàn)證碼錯(cuò)誤
		}
		//校驗(yàn)用戶(hù)名密碼
		// ……
		// ……
		return "success"; //校驗(yàn)通過(guò)返回成功
	}
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: