java使用Hutool工具庫實現圖形驗證碼

更新時間：2026年05月23日 13:47:07 作者：新綠MEHO

本文介紹了java使用Hutool工具庫實現圖形驗證碼的方法,線段干擾驗證碼、圓圈干擾驗證碼和擾亂干擾驗證碼,通過Hutool簡化了驗證碼的生成與驗證過程,提升了開發(fā)效率,文章詳細描述了線段干擾驗證碼的登錄驗證步驟,并提供了前端和后端代碼示例

關于Hutool的介紹

Hutool是一個小而全的Java工具類庫，通過靜態(tài)方法封裝，降低相關API的學習成本，提高工作效率，使Java擁有函數式語言般的優(yōu)雅，讓Java語言也可以“甜甜的”。

Hutool中的工具方法來自每個用戶的精雕細琢，它涵蓋了Java開發(fā)底層代碼中的方方面面，它既是大型項目開發(fā)中解決小問題的利器，也是小型項目中的效率擔當；

Hutool是項目中“util”包友好的替代，它節(jié)省了開發(fā)人員對項目中公用類和公用工具方法的封裝時間，使開發(fā)專注于業(yè)務，同時可以最大限度的避免封裝不完善帶來的bug。

引入依賴

<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.8.26</version>
</dependency>

圖形驗證碼

介紹

驗證碼功能位于cn.hutool.captcha包中，核心接口為ICaptcha，此接口定義了以下方法：

createCode 創(chuàng)建驗證碼，實現類需同時生成隨機驗證碼字符串和驗證碼圖片
getCode 獲取驗證碼的文字內容
verify 驗證驗證碼是否正確，建議忽略大小寫
write 將驗證碼圖片寫出到目標流中

其中write方法只有一個OutputStream，ICaptcha實現類可以根據這個方法封裝寫出到文件等方法。

AbstractCaptcha為一個ICaptcha抽象實現類，此類實現了驗證碼文本生成、非大小寫敏感的驗證、寫出到流和文件等方法，通過繼承此抽象類只需實現createImage方法定義圖形生成規(guī)則即可。

LineCaptcha實現線段干擾的驗證碼

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.LineCaptcha;
import cn.hutool.core.lang.Console;

public class DemoController {
    public static void main(String[] args) {
        //定義圖形驗證碼的長和寬
        LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(200, 100);


        //圖形驗證碼寫出，可以寫出到文件，也可以寫出到流
        lineCaptcha.write("d:/line.png");
        //輸出code
        Console.log(lineCaptcha.getCode());
        //驗證圖形驗證碼的有效性，返回boolean值
        lineCaptcha.verify("1234");

        //重新生成驗證碼
        lineCaptcha.createCode();
        lineCaptcha.write("d:/line.png");
        //新的驗證碼
        Console.log(lineCaptcha.getCode());
        //驗證圖形驗證碼的有效性，返回boolean值
        lineCaptcha.verify("1234");
    }
}

運行結果：

得到的圖形驗證碼：

CircleCaptcha實現圓圈干擾驗證碼

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.CircleCaptcha;
import cn.hutool.core.lang.Console;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class CircleController {
    public static void main(String[] args) {
        //定義圖形驗證碼的長、寬、驗證碼字符數、干擾元素個數
        CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 20);
        //CircleCaptcha captcha = new CircleCaptcha(200, 100, 4, 20);
        //圖形驗證碼寫出，可以寫出到文件，也可以寫出到流
        captcha.write("d:/circle.png");
        Console.log(captcha.getCode());
        //驗證圖形驗證碼的有效性，返回boolean值
        captcha.verify("1234");
    }
}

運行結果：

得到的圖形驗證碼：

ShearCaptcha實現擾亂干擾驗證碼

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.ShearCaptcha;
import cn.hutool.core.lang.Console;

public class ShearController {
    public static void main(String[] args) {
        //定義圖形驗證碼的長、寬、驗證碼字符數、干擾線寬度
        ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(200, 100, 4, 4);
        //ShearCaptcha captcha = new ShearCaptcha(200, 100, 4, 4);
        //圖形驗證碼寫出，可以寫出到文件，也可以寫出到流
        captcha.write("d:/shear.png");
        Console.log(captcha.getCode());
        //驗證圖形驗證碼的有效性，返回boolean值
        captcha.verify("1234");
    }
}

運行結果：

得到的圖形驗證碼：

線段干擾驗證碼實現登錄驗證

線段干擾驗證碼實現登錄驗證步驟詳解：

1.圖形驗證碼登錄分為前端和后端；

2.前端首先會向后端發(fā)起請求獲取圖形驗證碼；

3.后端接收到前端發(fā)送的獲取圖形驗證碼請求后，生成圖形驗證碼并響應給前端；

4.于此同時，后端將剛剛生成的圖形驗證碼的值存放到session里面，包括當時的時間；

5.然后用戶在前端頁面輸入驗證碼并提交，前端將用戶輸入的驗證碼發(fā)送給后端；

6.后端接受到前端發(fā)送的驗證碼，首先判斷驗證碼是否為空；

7.后端然后獲取當前請求對應存儲的session，從中提取圖形驗證碼的值和時間；

8.后端比對前端的驗證碼和session中存儲的驗證碼，并判斷當前時間和session中存儲的時間差；

9.如果前端的驗證碼和session中存儲的驗證碼相同，并且當前時間和session中存儲的時間差小于設定的值，那么就返回true，否則返回false；

10.前端接收到后端的響應，判斷響應返回的值是否為true，如果為true，則跳轉到驗證成功的頁面。

后端代碼

application.yml

captcha:
  width: 200
  height: 100
  session:
    key: captcha_session_key
    date: captcha_session_date

CaptchaProperties

import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

@Component
@ConfigurationProperties(prefix = "captcha")
@Data
public class CaptchaProperties {
    private Integer width;
    private Integer height;
    private Session session;

    @Data
    public static class Session{
        private String key;
        private String date;
    }

}

CaptchaController

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.LineCaptcha;
import cn.hutool.core.lang.Console;
import com.wmh.captcha.model.CaptchaProperties;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.io.IOException;
import java.util.Date;

@RequestMapping("/captcha")
@RestController
public class DCaptchaController {
    private final static long session_valid_timeout = 60 * 1000;

    @Autowired
    private CaptchaProperties captchaProperties;



    @RequestMapping("/get")
    public void getCaptcha(HttpSession session, HttpServletResponse response){
        LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(captchaProperties.getWidth(), captchaProperties.getHeight());
        //設置返回類型
        response.setContentType("image/jpeg");
        //禁止緩存
        response.setHeader("Progma", "No-cache");
        Console.log(lineCaptcha.getCode());
        //圖形驗證碼寫出，可以寫出到文件，也可以寫出到流
        try {
            lineCaptcha.write(response.getOutputStream());
            //存儲session
            session.setAttribute(captchaProperties.getSession().getKey(),lineCaptcha.getCode());
            session.setAttribute(captchaProperties.getSession().getDate(), new Date());
            response.getOutputStream().close();
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }

    @RequestMapping("/check")
    public Boolean check(String inputCode, HttpSession session){

        //驗證碼生成的內容, 和用戶輸入的進行比較
        if (!StringUtils.hasLength(inputCode)){
            return false;
        }
        //從session獲取信息
        String savedCode = (String) session.getAttribute(captchaProperties.getSession().getKey());
        Date saveDate = (Date) session.getAttribute(captchaProperties.getSession().getDate());
        if (inputCode.equalsIgnoreCase(savedCode)){
            //判斷驗證碼是否過期
            if (saveDate!=null && System.currentTimeMillis()-saveDate.getTime() < session_valid_timeout){
                return true;
            }
        }

        return false;
    }

}

前端代碼

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>驗證碼</title>
    <style>
        #inputCaptcha {
            height: 30px;
            vertical-align: middle;
        }
        #verificationCodeImg{
            vertical-align: middle;
        }
        #checkCaptcha{
            height: 40px;
            width: 100px;
        }
    </style>
</head>
<body>
<h1>輸入驗證碼</h1>
<div id="confirm">
    <input type="text" name="inputCaptcha" id="inputCaptcha">
    <img id="verificationCodeImg" src="/captcha/get" style="cursor: pointer;" title="看不清？換一張" />
    <input type="button" value="提交" id="checkCaptcha">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
    $("#verificationCodeImg").click(function(){
        $(this).hide().attr('src', '/captcha/get?dt=' + new Date().getTime()).fadeIn();
    });
    $("#checkCaptcha").click(function () {
        console.log('按鈕被點擊了');  // 調試信息
        $.ajax({
            url: "/captcha/check",
            type: "post",
            data: {
                inputCode: $("#inputCaptcha").val()
            },
            success: function(result){
                console.log(result);
                if(result){
                    location.href = "success.html";
                } else {
                    alert("驗證碼錯誤或者過期");
                }
            },
            error: function(xhr, status, error) {
                console.error('請求失敗:', status, error);  // 調試信息
            }
        });
    });
</script>
</body>
</html>

success.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>驗證成功頁</title>
</head>
<body>
<h1>驗證成功</h1>
</body>
</html>