欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于SpringBoot和Hutool工具包實現驗證碼的案例

 更新時間：2024年05月20日 09:50:42   作者：new Random()  
隨著安全性的要求越來越高,目前項目中很多都會使用驗證碼,只要涉及到登錄,絕大多數都會有驗證的要求,驗證碼的形式也是多種多樣,更復雜的圖形驗證碼和行為驗證碼已經成為了更流行的趨勢,本文給大家介紹了SpringBoot Hutool實現驗證碼的案例,需要的朋友可以參考下

驗證碼案例

隨著安全性的要求越來越高，目前項目中很多都會使用驗證碼，只要涉及到登錄，絕大多數都會有驗證的要求，驗證碼的形式也是多種多樣，更復雜的圖形驗證碼和行為驗證碼已經成為了更流行的趨勢。

驗證碼的實現方式很多，可以前端實現，也可以后端實現。網上也有比較多的插件或者工具包可以使用，這里選擇使用 Hutool工具包 來實現一個簡單的驗證碼案例。完整代碼見文章末尾。

1. 需求

最終實現的驗證碼界面如下圖所示：

1. 頁面生成驗證碼

2. 輸入驗證碼，點擊提交，驗證用戶輸入驗證碼是否正確且是否超時，正確且未超時則進行頁面跳轉，錯誤或已超時則進行提示，并更換驗證碼

2. 準備工作

創(chuàng)建SpringBoot項目，引入Spring-Web-MVC和Lombok的依賴包，前端界面會在后面提供.

3. 約定前后端交互接口 

需求分析

后端需要提供兩個服務：

  • 生成驗證碼，并返回驗證碼.
  • 校驗驗證碼是否正確.

接口定義

1）生成驗證碼

請求： 

請求URL：/captcha/get

響應：瀏覽器顯示圖片內容

瀏覽器給服務器發(fā)送一個 /captcha/get 請求，服務器返回一個圖片，瀏覽器顯示在頁面上

2）校驗驗證碼是否正確

請求：

請求URL：/captcha/check
請求參數：captcha=驗證碼字符串

響應：

true or false
根據用戶輸入的驗證碼，校驗驗證碼是否正確，并判斷驗證碼是否超時

4. Hutool 工具介紹

Hutool官網：https://hutool.cn/

Hutool參考文檔：https://hutool.cn/docs/#/

要使用Hutool工具包，需要在pom.xml文件中添加對應的依賴，參考文檔中有詳細介紹：

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

在Hutolol參考文檔中找到圖形驗證碼部分：

接下來可以就可以參考Hutool工具提供的方法，快速生成驗證碼，里面的介紹非常清晰，很容易看懂。此處使用如下格式驗證碼：

5. 實現驗證碼

項目目錄結構如下：

后端代碼 

實現接口

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.LineCaptcha;
import cn.hxxy.captchademo.config.CaptchaProperties;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
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;
 
@RestController
@RequestMapping("/captcha")
public class CaptchaController {
 
    @Autowired
    private CaptchaProperties captchaProp;
 
    @RequestMapping("/get")
    public void getCaptcha(HttpServletResponse response, HttpSession session) {
        //定義圖形驗證碼的長和寬(配置默認值)
        LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(captchaProp.getWidth(), captchaProp.getHeight());
        //細節(jié)問題，不影響程序
        //設置返回類型
        response.setContentType("image/jpeg");
        //靜止緩存
        response.setHeader("Progma", "No-cache");
        try {
            //圖形驗證碼寫出，可以寫出到文件，也可以寫出到流
            lineCaptcha.write(response.getOutputStream());
            //同時將驗證碼內容和當前時間戳存儲到Session中
            //此處Session的鍵可以配置成常量
            session.setAttribute(captchaProp.getSession().getKey(), lineCaptcha.getCode());
            session.setAttribute(captchaProp.getSession().getDate(), new Date());
            //關流
            response.getOutputStream().close();
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }
 
    //驗證碼生效時間限制
    private static final long VALID_MILLIS_TIME = 60 * 1000;
 
    @RequestMapping("/check")
    public boolean checkCaptcha(String captcha, HttpSession session) {
        //保證傳過來的參數是合法的
        if (StringUtils.hasLength(captcha)) {
            //根據配置的默認session信息獲取key和date
            String key = (String) session.getAttribute(captchaProp.getSession().getKey());
            Date date = (Date) session.getAttribute(captchaProp.getSession().getDate());
            //1.驗證碼正確(不區(qū)分大小寫)  2.驗證碼還未失效
            return key.equalsIgnoreCase(captcha)
                    && System.currentTimeMillis() - date.getTime() < VALID_MILLIS_TIME;
        }
        return false;
    }
}

代碼解析：

  1. 通過@Autowired注解注入了一個CaptchaProperties對象，這個對象是用來配置圖形驗證碼的屬性的。使用這種方式是因為代碼中的有些屬性可能會在別處使用，且它們都是固定的，例如圖形驗證碼的長和寬，Session的字段名等。將這些屬性封裝在一個對象中，并通過讀取配置文件的方式綁定屬性值。

  2. 在@RequestMapping注解的getCaptcha方法中，使用Hutool包的CaptchaUtil.createLineCaptcha方法創(chuàng)建了一個圖形驗證碼對象lineCaptcha，其大小由配置文件中的captchaProp.getWidth()和captchaProp.getHeight()決定。然后，將驗證碼內容和當前時間戳存儲到HttpSession中，以便后續(xù)校驗驗證碼的時候使用。最后，將圖形驗證碼寫出到HttpServletResponse的輸出流中，以返回給前端頁面顯示。

  3. 在@RequestMapping注解的checkCaptcha方法中，首先判斷傳入的驗證碼參數是否合法。如果合法，則從HttpSession中獲取存儲的驗證碼內容和時間戳信息，并進行比較。如果驗證碼正確且未過期，則返回true，否則返回false。

CaptchaProperties類的實現和配置文件(.yml)信息如下

import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Configuration;
 
@Data
@Configuration
@ConfigurationProperties(prefix = "captcha")
public class CaptchaProperties {
    private Integer width;
    private Integer height;
    private Session session; //使用自定義的Session類
 
    @Data
    public static class Session {
        private String key;
        private String date;
    }
}
spring:
  application:
    name:
      captcha-demo
 
captcha:
  width: 200
  height: 100
  session:
    key: CAPTCHA_SESSION_KEY
    date: CAPTCHA_SESSION_DATE

此處還沒有前端代碼，但是已經可以先測試了，通常寫好一個接口就可以測試一下。

啟動項目，再訪問 http://127.0.0.1:8080/captcha/get  顯示驗證碼圖片如下：

通過 Fiddler 進行抓包，HTTP請求和響應數據如下，圖片就在響應的body部分：

前端代碼

注意前端代碼要放在resources的static目錄下

index.html（重點關注script標簽內的代碼）：

<!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();
        //使用attr()方法修改src屬性值，獲取一個新的驗證碼圖片，后面添加一個時間戳參數來保證每次請求的驗證碼圖片都是不同的
        $(this).attr('src', '/captcha/get?dt=' + new Date().getTime());
    });
    //點擊提交按鈕，進行驗證碼校驗
    $("#checkCaptcha").click(function () {
        $.ajax({
            url: "/captcha/check",
            type: "post",
            data: {
                captcha: $("#inputCaptcha").val()
            },
            success: function (result) {
                if (result) {
                    location.href = "success.html";
                } else {
                    alert("驗證碼錯誤或已超時");
                    //驗證碼錯誤，重新生成驗證碼
                    $("#verificationCodeImg").attr('src', '/captcha/get?dt=' + new Date().getTime());
                    $("#inputCaptcha").val("");
                }
            }
        });
    });
 
</script>
</body>
 
</html>

JavaScript代碼中主要包含兩部分邏輯：

  1. 點擊圖片，切換驗證碼： 當id為"verificationCodeImg"的圖片被點擊時，會觸發(fā)click事件的回調函數?；卣{函數通過修改圖片的src屬性，向后端發(fā)送一個請求來獲取新的驗證碼圖片，并使用當前時間戳作為參數，以確保每次請求的驗證碼圖片都是不同的。最后，將獲取到的新圖片顯示出來。

  2. 點擊提交按鈕，進行驗證碼校驗： 當id為"checkCaptcha"的按鈕被點擊時，會觸發(fā)click事件的回調函數?；卣{函數通過使用jQuery的ajax方法發(fā)送一個POST請求到"/captcha/check"接口，并傳遞了一個名為"captcha"的參數，該參數的值為id為"inputCaptcha"的輸入框中用戶輸入的驗證碼。

    在請求成功后的回調函數中，會根據后端返回的結果(result)進行處理。如果校驗成功，則跳轉到"success.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>

6. 運行測試 

啟動項目，瀏覽器訪問 http://127.0.0.1:8080/index.html 或 http://localhost:8080/index.html

輸入錯誤的驗證碼： 

提示正確，且驗證碼能正確刷新，超時同樣會提示以上錯誤。且點擊驗證碼圖片時，會重新生成驗證碼。

驗證成功，頁面正確跳轉，測試完成。

以上就是基于SpringBoot和Hutool工具包實現驗證碼的案例的詳細內容，更多關于SpringBoot Hutool驗證碼的資料請關注腳本之家其它相關文章！

相關文章

  • springboot基于docsify?實現隨身文檔

    springboot基于docsify?實現隨身文檔

    這篇文章主要介紹了springboot基于docsify實現隨身文檔的相關資料,需要的朋友可以參考下
    2022-09-09
  • 關于@Valid注解大全以及用法規(guī)范

    關于@Valid注解大全以及用法規(guī)范

    這篇文章主要介紹了關于@Valid注解大全以及用法規(guī)范，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-01-01
  • Java8 forEach常用場景代碼實例

    Java8 forEach常用場景代碼實例

    這篇文章主要介紹了Java8 forEach常用場景代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-09-09
  • 關于Spring?Ioc和DI注解的問題

    關于Spring?Ioc和DI注解的問題

    這篇文章主要介紹了Spring?Ioc和DI注解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-03-03
  • Java原生方法實現 AES 算法示例

    Java原生方法實現 AES 算法示例

    這篇文章主要介紹了Java原生方法實現 AES 算法,結合實例形式分析了Java實現AES加密算法的相關操作技巧,需要的朋友可以參考下
    2019-03-03
  • 深入Spring Boot實現對Fat Jar jsp的支持

    深入Spring Boot實現對Fat Jar jsp的支持

    這篇文章主要介紹了深入Spring Boot實現對Fat Jar jsp的支持，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-06
  • java中Executor，ExecutorService，ThreadPoolExecutor詳解

    java中Executor，ExecutorService，ThreadPoolExecutor詳解

    這篇文章主要介紹了java中Executor，ExecutorService，ThreadPoolExecutor詳解的相關資料,需要的朋友可以參考下
    2017-02-02
  • 淺談一下Java中的ReentrantLock

    淺談一下Java中的ReentrantLock

    這篇文章主要介紹了淺談一下Java中的ReentrantLock,這個類是JUC工具包中對線程安全問題提供的一種解決方案,它主要是用來給對象上鎖,保證同一時間這能有一個線程在訪問當前對象,需要的朋友可以參考下
    2023-09-09
  • SpringBoot3.x循環(huán)依賴問題解決方案

    SpringBoot3.x循環(huán)依賴問題解決方案

    這篇文章主要介紹了SpringBoot3.x循環(huán)依賴的相關知識,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2023-06-06
  • java基于servlet編寫上傳下載功能 類似文件服務器

    java基于servlet編寫上傳下載功能 類似文件服務器

    這篇文章主要為大家詳細介紹了java基于servlet編寫上傳下載功能，類似文件服務器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-07-07

最新評論