SpringBoot實(shí)現(xiàn)圖形驗(yàn)證碼的操作方法

更新時(shí)間：2024年07月18日 10:58:21 作者：楠枬

隨著安全性的要求越來越高,目前許多項(xiàng)目中都使用了驗(yàn)證碼,驗(yàn)證碼也有各種類型,如圖形驗(yàn)證碼、短信驗(yàn)證碼、郵件驗(yàn)證碼、人臉識(shí)別等,本文給大家介紹SpringBoot實(shí)現(xiàn)圖形驗(yàn)證碼的方法,感興趣的朋友跟隨小編一起看看吧

隨著安全性的要求越來越高，目前許多項(xiàng)目中都使用了驗(yàn)證碼，驗(yàn)證碼也有各種類型，如 圖形驗(yàn)證碼、短信驗(yàn)證碼、郵件驗(yàn)證碼、人臉識(shí)別等，這些不同類型的驗(yàn)證碼可以根據(jù)實(shí)際需求和安全性要求進(jìn)行選擇和應(yīng)用，保護(hù)網(wǎng)站和用戶免受惡意攻擊

在本篇文章中，我們來學(xué)習(xí)圖形驗(yàn)證碼的實(shí)現(xiàn)

驗(yàn)證碼的實(shí)現(xiàn)方式有很多，可以由前端實(shí)現(xiàn)，也可以由后端進(jìn)行實(shí)現(xiàn)，也有很多的插件和工具包可以使用，在這里，我們使用 Hutool 提供的小工具實(shí)現(xiàn)

驗(yàn)證碼需要實(shí)現(xiàn)功能：

1. 頁面生成驗(yàn)證碼，點(diǎn)擊圖片可進(jìn)行刷新

2. 輸入驗(yàn)證碼，點(diǎn)擊提交，驗(yàn)證用戶輸入驗(yàn)證碼是否正確，正確則進(jìn)行頁面跳轉(zhuǎn)

項(xiàng)目創(chuàng)建

我們首先創(chuàng)建項(xiàng)目，并引入相關(guān)依賴

前端代碼實(shí)現(xiàn)

接下來，我們實(shí)現(xiàn)兩個(gè)簡(jiǎn)單的前端界面：

1. 驗(yàn)證碼界面

2. 驗(yàn)證成功后跳轉(zhuǎn)的界面

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>驗(yàn)證碼</title>
  <style>
    #inputCaptcha {
      height: 30px;
      vertical-align: middle; 
    }
    #verificationCodeImg{
      vertical-align: middle; 
    }
    #checkCaptcha{
      height: 40px;
      width: 100px;
    }
  </style>
</head>
<body>
  <h1>輸入驗(yàn)證碼</h1>
  <div id="confirm">
    <input type="text" name="inputCaptcha" id="inputCaptcha">
    <img id="verificationCodeImg" src="/captcha/getCaptcha" 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/getCaptcha?dt=' + new Date().getTime()).fadeIn();
    });
    $("#checkCaptcha").click(function () {
        alert("判斷驗(yàn)證碼是否正確");
    });
  </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>驗(yàn)證成功</title>
</head>
<body>
    <h1>驗(yàn)證成功</h1>
</body>
</html>

約定前后端交互接口

需求分析

后端需要提供兩個(gè)服務(wù)：

1. 生成驗(yàn)證碼，并返回

2. 校驗(yàn)驗(yàn)證碼是否正確

接口定義

1. 生成驗(yàn)證碼

[URL]
GET /captcha/getCaptcha
[請(qǐng)求參數(shù)]
[響應(yīng)]
{
   驗(yàn)證碼圖片內(nèi)容
}

2. 校驗(yàn)驗(yàn)證碼是否正確

[URL]
POST /captcha/check
[請(qǐng)求參數(shù)]
captcha=xmad
[響應(yīng)]
{
   true
}

根據(jù)用戶輸入的驗(yàn)證碼，校驗(yàn)驗(yàn)證碼是否正確，校驗(yàn)成功，返回true；校驗(yàn)失敗，返回false

Hutool工具

我們使用 Hutool 提供的小工具來實(shí)現(xiàn)驗(yàn)證碼

Hutool是一個(gè)Java工具包類庫，對(duì)文件、流、加密解密、轉(zhuǎn)碼、正則、線程、XML等JDK方法進(jìn)行封裝，組成各種Util工具類

Hutool是一個(gè)小而全的Java工具類庫，通過靜態(tài)方法的封裝，降低相關(guān)API學(xué)習(xí)成本，提高效率

Hutool官網(wǎng)：https://hutool.cn

實(shí)現(xiàn)服務(wù)器端代碼

引入依賴

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

由于我們只需要實(shí)現(xiàn)驗(yàn)證碼相關(guān)功能，因此只需要引入驗(yàn)證碼部分依賴

獲取驗(yàn)證碼

我們可以通過提供的指南來學(xué)習(xí)如何使用

其中提供了：線段干擾驗(yàn)證碼、圓圈干擾驗(yàn)證碼、扭曲干擾驗(yàn)證碼以及自定義驗(yàn)證碼

我們通過其提供的例子來學(xué)習(xí)：

我們?cè)?strong> test 中學(xué)習(xí)驗(yàn)證碼的生成：

@SpringBootTest
class CaptchaControllerTest {
    @Test
    void getCaptcha() {
        //定義圖形驗(yàn)證碼的長(zhǎng)和寬
        LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(200, 100);
        //圖形驗(yàn)證碼寫出，可以寫出到文件，也可以寫出到流
        lineCaptcha.write("d:/line.png");
        //輸出code
        System.out.println("生成驗(yàn)證碼:" + lineCaptcha.getCode());
    }
}

運(yùn)行，觀察結(jié)果：

且在D盤下成功生成驗(yàn)證碼：

同樣的，我們可以生成圓圈干擾驗(yàn)證碼、扭曲干擾驗(yàn)證碼等，大家可自行進(jìn)行實(shí)現(xiàn)

接下來，我們實(shí)現(xiàn)驗(yàn)證碼的生成

在實(shí)現(xiàn)驗(yàn)證碼時(shí)，需要指定圖片的長(zhǎng)、寬和驗(yàn)證碼的過期時(shí)間（也可指定驗(yàn)證碼字符個(gè)數(shù)、干擾元素個(gè)數(shù)等），我們?cè)?Constants 中進(jìn)行定義

public class Constants {
    public static final Integer CAPTCHA_WIDTH = 100;
    public static final Integer CAPTCHA_HEIGHT = 40;
    public static final long EXPIRATION_TIME = 60 * 1000;
}

由于當(dāng)用戶輸入驗(yàn)證碼時(shí)，我們需要進(jìn)行校驗(yàn)，因此，我們需要對(duì)生成的驗(yàn)證碼進(jìn)行存儲(chǔ)，同時(shí)，需要存儲(chǔ)驗(yàn)證碼的生成時(shí)間，以便判斷驗(yàn)證碼是否超時(shí)

public class Constants {
    public static final Integer CAPTCHA_WIDTH = 100;
    public static final Integer CAPTCHA_HEIGHT = 40;
    public static final long EXPIRATION_TIME = 60 * 1000;
    public static final String CAPTCHA_KEY = "captcha";
    public static final String CAPTCHA_DATE = "date";
}

接下來我們來實(shí)現(xiàn) CaptchaController

@RequestMapping("/captcha")
@RestController
@Slf4j
public class CaptchaController {
    /**
     * 生成驗(yàn)證碼
     * @param session
     * @param response
     */
    @GetMapping("/getCaptcha")
    public void getCaptcha(HttpSession session, HttpServletResponse response) {
        // 定義圖形驗(yàn)證碼的長(zhǎng)和寬
        LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(Constants.CAPTCHA_WIDTH, Constants.CAPTCHA_HEIGHT);
        // 設(shè)置返回?cái)?shù)據(jù)類型
        response.setContentType("image/jpeg");
        // 禁止使用緩存
        response.setHeader("Pragma", "No-cache");
        try {
            // 輸出到頁面
            lineCaptcha.write(response.getOutputStream());
            // 將 生成的驗(yàn)證碼 和 驗(yàn)證碼生成時(shí)間 存儲(chǔ)到session中
            session.setAttribute(Constants.CAPTCHA_KEY, lineCaptcha.getCode());
            session.setAttribute(Constants.CAPTCHA_DATE, new Date());
            // 關(guān)閉流
            response.getOutputStream().close();
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }
}

運(yùn)行程序，此時(shí)成功生成驗(yàn)證碼

驗(yàn)證碼校驗(yàn)

    /**
     * 驗(yàn)證碼校驗(yàn)
     * @param captcha
     * @param session
     * @return
     */
    @PostMapping("/check")
    public boolean checkCaptcha(String captcha, HttpSession session) {
        log.info("接收到驗(yàn)證碼: {}", captcha);
        // 參數(shù)校驗(yàn)
        if(!StringUtils.hasLength(captcha)) {
            return false;
        }
        // 獲取存儲(chǔ)的驗(yàn)證碼和生成時(shí)間
        String code = (String) session.getAttribute(Constants.CAPTCHA_KEY);
        Date createTime = (Date) session.getAttribute(Constants.CAPTCHA_DATE);
        // 判斷驗(yàn)證碼是否正確(驗(yàn)證碼一般忽略大小寫)
        if(captcha.equalsIgnoreCase(code)) {
            // 判斷驗(yàn)證碼是否過時(shí)
            if(createTime == null || System.currentTimeMillis() - createTime.getTime() < Constants.EXPIRATION_TIME) {
                return true;
            }
            return false;
        }
        return false;
    }

將用戶輸入的驗(yàn)證碼與存儲(chǔ)在 session 中的驗(yàn)證碼進(jìn)行對(duì)比，判斷其是否相同，若相同且在1min內(nèi)，則驗(yàn)證成功

在這里，我們就不對(duì)其進(jìn)行測(cè)試了，在調(diào)整前端代碼后，一起進(jìn)行測(cè)試

調(diào)整前端代碼

接下來，我們修改 index.html

  <script>
    $("#verificationCodeImg").click(function(){
      $(this).hide().attr('src', '/captcha/getCaptcha?dt=' + new Date().getTime()).fadeIn();
    });
    $("#checkCaptcha").click(function () {
        $.ajax({
          url: "/captcha/check",
          type: "post",
          data: {
            captcha: $("#inputCaptcha").val()
          },
          success: function(result) {
            if(result) {
              location.href = "success.html";
            }else {
              alert("驗(yàn)證碼錯(cuò)誤或已超時(shí)");
            }
          }
        })
    });
  </script>

再次運(yùn)行程序，此時(shí)輸入驗(yàn)證碼進(jìn)行驗(yàn)證：