kaptcha是一個簡單好用的驗證碼產生工具，通過配置，可以自己定義驗證碼大小、顏色、顯示的字元等等。下面就來講一下如何使用kaptcha產生驗證碼以及在伺服器端取出驗證碼進行校正。
一、搭建測試環境
1.1、建立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> <!-- 字元個數 --> <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> </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 { //響應資料 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>
運行結果如下：
1、驗證碼不輸入
2、輸入錯誤的驗證碼
3、輸入正確的驗證碼
使用kaptcha產生驗證碼感覺挺不錯的，非常好用和方便，希望大家可以熟練掌握。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
