SpringBoot+hutool實現圖片驗證碼

2022-08-16 18:01:11

一、理解 “ 伺服器 / 瀏覽器 ”溝通流程（3步）

第1步：瀏覽器使用<img src="/test/controller”>標籤請求特定 Controller 路徑。

第2步：伺服器 Controller 返回圖片的二進位制資料。

第3步：瀏覽器接收到資料，顯示圖片。

二、開發前準備：

Spring Boot開發常識

hutool工具（hutool是一款Java輔助開發工具，利用它可以快速生成驗證碼圖片，從而避免讓我們編寫大量重複程式碼，具體使用請移至官網）

<!-- pom 導包：hutool 工具 -->
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-captcha</artifactId>
    <version>5.8.5</version>
</dependency>

三、程式碼實現

【 index.html 】頁面

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>驗證碼頁面</title>
</head>
<body>
  
<form action="#" method="post">
  
  	<!-- img標籤負責向伺服器 Controller 請求圖片資源 -->
    <img src="/test/code" id="code" onclick="refresh();">
  
</form>
  
</body>

<!-- 「點選驗證碼圖片，自動重新整理」 指令碼 -->
<script>
    function refresh() {
        document.getElementById("code").src = 
          "/test/code?time" + new Date().getTime();
    }
</script>
</html>

【SpringBoot後端】

@RestController
@RequestMapping("test")
public class TestController {
  
    @Autowired
    HttpServletResponse response;
    @Autowired
    HttpSession session;

    @GetMapping("code")
    void getCode() throws IOException {
   		  // 利用 hutool 工具，生成驗證碼圖片資源
        CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 5);
        // 獲得生成的驗證碼字元
        String code = captcha.getCode();
        // 利用 session 來儲存驗證碼
        session.setAttribute("code",code);
      	// 將驗證碼圖片的二進位制資料寫入【響應體 response 】
        captcha.write(response.getOutputStream());
    }
}

四、“點選驗證碼圖片自動重新整理” 是如何實現的？

HTML 規範規定，在 <img src=“xxx”> 標籤中，每當 src 路徑發生變化時，瀏覽器就會自動重新請求資源。所以我們可以編寫一個簡單的 js 指令碼，只要驗證碼圖片被點選，src 路徑就會被加上當前【時間戳】，從而達到改變 src 路徑的目的。

 <img src="/test/code" id="code" onclick="refresh();">

......

<!-- 「點選驗證碼圖片，自動重新整理」 指令碼 -->
<script>
    function refresh() {
        document.getElementById("code").src = 
          "/test/code?time" + new Date().getTime();
    }
</script>