java下使用kaptcha生成驗證碼

更新時間：2015年12月28日 10:55:02 作者：孤傲蒼狼

這篇文章主要介紹了java下使用kaptcha生成驗證碼，感興趣的小伙伴們可以參考一下

kaptcha是一個簡單好用的驗證碼生成工具，通過配置，可以自己定義驗證碼大小、顏色、顯示的字符等等。下面就來講一下如何使用kaptcha生成驗證碼以及在服務器端取出驗證碼進行校驗。

一、搭建測試環(huán)境

1.1、創(chuàng)建Web測試項目

　　新建一個Web項目，并將kaptcha-2.3.2.jar放在項目的WEB-INF/lib目錄下，如下圖所示：

1.2、在web.xml文件配置生成驗證碼的KaptchaServlet

KaptchaServlet的詳細配置如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
 xmlns="http://java.sun.com/xml/ns/javaee" 
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 <welcome-file-list>
 <welcome-file>index.jsp</welcome-file>
 </welcome-file-list>
 
 <!-- kaptcha驗證碼配置 -->
 <servlet>
 <!-- 生成圖片的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>red</param-value>
 </init-param>
 <!-- 圖片寬度 -->
 <init-param>
 <param-name>kaptcha.image.width</param-name>
 <param-value>135</param-value>
 </init-param>
 <!-- 使用哪些字符生成驗證碼 -->
 <init-param>
 <param-name>kaptcha.textproducer.char.string</param-name>
 <param-value>ACDEFHKPRSTWX345679</param-value>
 </init-param>
 <!-- 圖片高度 -->
 <init-param>
 <param-name>kaptcha.image.height</param-name>
 <param-value>50</param-value>
 </init-param>
 <!-- 字體大小 -->
 <init-param>
 <param-name>kaptcha.textproducer.font.size</param-name>
 <param-value>43</param-value>
 </init-param>
 <!-- 干擾線的顏色 -->
 <init-param>
 <param-name>kaptcha.noise.color</param-name>
 <param-value>black</param-value>
 </init-param>
 <!-- 字符個數(shù) -->
 <init-param>
 <param-name>kaptcha.textproducer.char.length</param-name>
 <param-value>4</param-value>
 </init-param>
 <!-- 使用哪些字體 -->
 <init-param>
 <param-name>kaptcha.textproducer.font.names</param-name>
 <param-value>Arial</param-value>
 </init-param> 
 </servlet>
 <!-- 映射的url -->
 <servlet-mapping>
 <servlet-name>Kaptcha</servlet-name>
 <url-pattern>/Kaptcha.jpg</url-pattern>
 </servlet-mapping>
</web-app>

1.3、顯示生成的驗證碼

在頁面index.jsp顯示驗證碼

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
 <head>
 <title>顯示KaptchaServlet生成的驗證碼</title>
 <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
 <script type="text/javascript">
 //點擊切換驗證碼
 function changeVerifyCode(){
 $("#yzmImg").attr("src","Kaptcha.jpg?"+Math.floor(Math.random()*100));
 }
 
 //提交
 function doSubmit() {
 var verifyCodeValue = $("#verifyCode").val();
 if(verifyCodeValue.replace(/\s/g,"") == "") {
 alert("請輸入驗證碼");
 }else {
 //提交前先異步檢查驗證碼是否輸入正確
 var verifyUrl = "${pageContext.request.contextPath}/servlet/VerifyServlet?verifyCode="+verifyCodeValue;
 $.ajax({
  type:"GET",
  url:verifyUrl,
  success:function(returnData){
  if(returnData!="Y") {
  alert("請輸入正確的驗證碼！");
  }else {
  //驗證碼正確，進行提交操作
  alert("驗證碼輸入正確，提交表單");
  }
  },
  error:function(e){
  alert(e);
  }
 });
 }
 }
 </script>
 </head>
 
 <body>
 <form>
 <table>
 <tr>
 <td> 
  請輸入驗證碼：
 </td>
 <td>
  <input type="text" name="verifyCode" id="verifyCode">
  <img src="Kaptcha.jpg" onclick="changeVerifyCode()" id="yzmImg" style="cursor: pointer;">
  <a href="javascript:void(0)" onclick="changeVerifyCode()">看不清，換一張</a>
 </td>
 </tr>
 <tr>
 <td> 
  &nbsp;
 </td>
 <td>
  <input type="button" value="提交" onclick="doSubmit()">
 </td>
 </tr>
 </table>
 </form> 
 </body>
</html>

運行效果如下圖所示：

1.4、在服務器端驗證提交的驗證碼

　　用戶在form表單中提交了驗證碼之后，我們會在服務器端進行驗證，編寫一個VerifyServlet，代碼如下：

/**
 * 
 */
package me.gacl.web.controller;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class VerifyServlet extends HttpServlet {

 
 public void doGet(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {

 response.setContentType("text/html;charaset=utf-8");
 response.setHeader("pragma", "no-cache");
 response.setHeader("cache-control", "no-cache");
 PrintWriter out = null;
 try {
 //響應數(shù)據(jù)
 String resultData;
 //獲取傳過來的驗證碼
 String verifyCode = request.getParameter("verifyCode");
 System.out.println("verifyCode----"+verifyCode);
 if(verifyCode=="") {
 resultData = "N";
 }else {
 //獲取kaptcha生成存放在session中的驗證碼
 String kaptchaValue = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
 //比較輸入的驗證碼和實際生成的驗證碼是否相同
 if(kaptchaValue == null || kaptchaValue == ""||!verifyCode.equalsIgnoreCase(kaptchaValue)) {
  resultData = "N";
 }else {
  resultData = "Y";
 }
 }
 out = response.getWriter();
 out.write(resultData);
 out.flush();
 }catch(Exception e) {
 e.printStackTrace();
 }finally {
 if(out != null) {
 out.close();
 }
 }
 }
}

在web.xml中注冊VerifyServlet

<!-- 檢查驗證碼是否輸入正確 -->
 <servlet>
 <servlet-name>VerifyServlet</servlet-name>
 <servlet-class>me.gacl.web.controller.VerifyServlet</servlet-class>
 </servlet>
 <servlet-mapping>
 <servlet-name>VerifyServlet</servlet-name>
 <url-pattern>/servlet/VerifyServlet</url-pattern>
 </servlet-mapping>

　　運行結(jié)果如下：

　　1、驗證碼不輸入