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

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

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

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

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

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

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

1. 頁面生成驗證碼，點擊圖片可進行刷新

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

項目創(chuàng)建

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

前端代碼實現(xiàn)

接下來，我們實現(xiàn)兩個簡單的前端界面：

1. 驗證碼界面

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

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/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("判斷驗證碼是否正確");
    });
  </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>

約定前后端交互接口

需求分析

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

1. 生成驗證碼，并返回

2. 校驗驗證碼是否正確

接口定義

1. 生成驗證碼

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

2. 校驗驗證碼是否正確

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

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

Hutool工具

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

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

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

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

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

引入依賴

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

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

獲取驗證碼

我們可以通過提供的指南來學習如何使用

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

我們通過其提供的例子來學習：

我們在 test 中學習驗證碼的生成：

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

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

且在D盤下成功生成驗證碼：

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

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

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

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 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";
}

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

@RequestMapping("/captcha")
@RestController
@Slf4j
public class CaptchaController {
    /**
     * 生成驗證碼
     * @param session
     * @param response
     */
    @GetMapping("/getCaptcha")
    public void getCaptcha(HttpSession session, HttpServletResponse response) {
        // 定義圖形驗證碼的長和寬
        LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(Constants.CAPTCHA_WIDTH, Constants.CAPTCHA_HEIGHT);
        // 設(shè)置返回數(shù)據(jù)類型
        response.setContentType("image/jpeg");
        // 禁止使用緩存
        response.setHeader("Pragma", "No-cache");
        try {
            // 輸出到頁面
            lineCaptcha.write(response.getOutputStream());
            // 將 生成的驗證碼 和 驗證碼生成時間 存儲到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);
        }
    }
}

運行程序，此時成功生成驗證碼

驗證碼校驗

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

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

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

調(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("驗證碼錯誤或已超時");
            }
          }
        })
    });
  </script>

再次運行程序，此時輸入驗證碼進行驗證：