Java 中使用 Kaptcha 實現驗證碼生成與驗證完整指南

前言

Kaptcha 是一個輕量級、易於整合的 Java 驗證碼生成庫，支援自訂圖片尺寸、字型、顏色、干擾線、字元集等參數，廣泛應用於 Web 表單防刷、登入驗證等場景。本文將從專案搭建、Servlet 設定、前端展示到後端驗證，完整示範如何在 Java Web 專案中落地 Kaptcha。

一、專案環境搭建

1.1 建立 Web 專案並引入依賴

建立一個標準的 Java Web 專案（如 Dynamic Web Project），將 kaptcha-2.3.2.jar 放入 WEB-INF/lib 目錄。若使用 Maven，可直接在 pom.xml 加入：

<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency>

1.2 在 web.xml 中設定 KaptchaServlet

在 web.xml 註冊 com.google.code.kaptcha.servlet.KaptchaServlet，並透過 init-param 自訂驗證碼外觀：

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

二、前端頁面展示與互動

在 index.jsp 中引入 jQuery，透過 <img> 標籤載入驗證碼圖片，並提供「看不清，換一張」與 AJAX 非同步驗證功能：

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
    <title>Kaptcha 驗證碼示範</title>
    <script src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
    <script>
        // 點擊圖片或連結刷新驗證碼
        function changeVerifyCode() {
            $("#yzmImg").attr("src", "Kaptcha.jpg?" + Math.floor(Math.random() * 100));
        }
        // 提交前非同步驗證
        function doSubmit() {
            var code = $("#verifyCode").val().replace(/\s/g, "");
            if (!code) { alert("請輸入驗證碼"); return; }
            $.get("${pageContext.request.contextPath}/servlet/VerifyServlet", {verifyCode: code}, function(res) {
                if (res !== "Y") alert("驗證碼錯誤！");
                else alert("驗證通過，可提交表單");
            });
        }
    </script>
</head>
<body>
    <form>
        <table>
            <tr>
                <td>請輸入驗證碼：</td>
                <td>
                    <input type="text" id="verifyCode" name="verifyCode">
                    <img src="Kaptcha.jpg" id="yzmImg" onclick="changeVerifyCode()" 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>

三、後端驗證邏輯實作

建立 VerifyServlet，從 Session 取出 Kaptcha 生成的驗證碼（Key 為 com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY），與使用者輸入比對（忽略大小寫）：

package me.gacl.web.controller;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import com.google.code.kaptcha.Constants;

public class VerifyServlet extends HttpServlet {
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        resp.setHeader("pragma", "no-cache");
        resp.setHeader("cache-control", "no-cache");

        PrintWriter out = resp.getWriter();
        String result = "N";
        String inputCode = req.getParameter("verifyCode");

        if (inputCode != null && !inputCode.isEmpty()) {
            String kaptchaCode = (String) req.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);
            if (kaptchaCode != null && inputCode.equalsIgnoreCase(kaptchaCode)) {
                result = "Y";
            }
        }
        out.write(result);
        out.flush();
    }
}

在 web.xml 註冊該 Servlet：

<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>

四、執行效果與總結

• 未輸入驗證碼 → 提示「請輸入驗證碼」
• 輸入錯誤 → 提示「驗證碼錯誤！」
• 輸入正確 → 提示「驗證通過，可提交表單」

Kaptcha 設定彈性、整合簡單，極適合快速為 Java Web 專案加入圖形驗證碼功能。掌握上述流程，即可輕鬆應對表單防刷、登入保護等常見需求。