腳本之家服務器常用軟件

快捷導航

SpringBoot實現(xiàn)驗證碼的案例分享

更新時間：2024年11月04日 08:41:26 作者：vampire-wpre

驗證碼可以有效防止其他人對某一個特定的注冊用戶用特定的程序,破解方式進行不斷的登錄嘗試,我們其實很經(jīng)常看到,登錄一些網(wǎng)站其實是需要驗證碼的,所以本文給大家分享了SpringBoot實現(xiàn)驗證碼的案例,需要的朋友可以參考下

實現(xiàn)邏輯

1、后端功能：隨機生成驗證碼圖片，并把交給前端、接收用戶輸入，驗證用戶輸入的驗證碼是否正確、

2、前端功能：顯示驗證碼，提供輸入框供用戶輸入他們看到的驗證碼，把用戶輸入的數(shù)據(jù)交給后端，接收后端返回的驗證結果

前后端交互接口

后端需要完成的兩個工作：1、生成驗證碼，2、校驗驗證碼的正確性

接口定義：

1、生成驗證碼

請求url：/captcha/getCaptcha

響應：返回驗證碼的圖片

2、校驗驗證碼的正確性

請求url：/captcha/check

請求參數(shù):用戶輸入的驗證碼captcha

響應：驗證碼正確返回true，錯誤返回false

前端代碼

index.html

展示效果：

用戶點擊圖片之后，可以更新驗證碼圖片

在這里插入圖片描述

代碼如下：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>驗證碼</title>
        <style>
            body {
                font-family: 'Arial', sans-serif;
                background-color: #f7f7f7;
                margin: 0;
                padding: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
            }
            #container {
                text-align: center;
                background: white;
                padding: 50px;
                border-radius: 8px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            }
            h1 {
                color: #333;
                font-size: 2em;
                margin-bottom: 20px;
            }
            #inputCaptcha {
                height: 40px;
                margin-right: 10px;
                vertical-align: middle;
                border: 1px solid #ddd;
                border-radius: 4px;
                padding: 0 10px;
            }
            #verificationCodeImg {
                vertical-align: middle;
                border: 1px solid #ddd;
                cursor: pointer;
                transition: transform 0.2s;
            }
            #verificationCodeImg:hover {
                transform: scale(1.05);
            }
            #checkCaptcha {
                height: 40px;
                width: 120px;
                background-color: #5cb85c;
                color: white;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                transition: background-color 0.2s;
            }
            #checkCaptcha:hover {
                background-color: #4cae4c;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <h1>輸入驗證碼</h1>
            <div id="confirm">
                <input type="text" name="inputCaptcha" id="inputCaptcha">
                <img id="verificationCodeImg" src="http://127.0.0.1:8080/captcha/getCaptcha" style="cursor: pointer;"
                     title="看不清？換一張"/>
                <input type="button" value="提交" id="checkCaptcha">
            </div>
        </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', 'http://127.0.0.1:8080/captcha/getCaptcha?dt=' + new Date().getTime()).fadeIn();
            });

            $("#checkCaptcha").click(function () {
                $.ajax({
                    type: "post",
                    url: "captcha/check",
                    data: {
                        captcha: $("#inputCaptcha").val()
                    },
                    success: function (result) {
                        if (result) {
                            location.href = "success.html"
                        } else {
                            alert("驗證碼錯誤")
                        }
                    }
                });
            });
        </script>
    </body>

</html>

success.html，當用戶驗證碼輸入正確時展示的內(nèi)容

展示效果：

在這里插入圖片描述

代碼如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>驗證成功頁</title>
        <style>
            body {
                font-family: 'Arial', sans-serif;
                background-color: #f7f7f7;
                margin: 0;
                padding: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
            }
            .container {
                text-align: center;
                background: white;
                padding: 50px;
                border-radius: 8px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            }
            h1 {
                color: green;
                font-size: 2.5em;
                margin: 0;
            }
            p {
                color: blue;
                font-size: 1.2em;
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>驗證成功</h1>
        </div>
    </body>
</html>

后端代碼

結構如下：

在這里插入圖片描述

在pom.xml中添加依賴：

在這里插入圖片描述

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

CaptchaController類：

@RestController
@RequestMapping("/captcha")
public class CaptchaController {

    //注入
    @Autowired
    private CaptchaProperties captchaProperties;

    @Value("${captcha.session.key}")
    private String key;
    @Value("${captcha.session.datetime}")
    private String datetime;


    @RequestMapping("/getCaptcha")
    public void getCaptcha(HttpServletResponse response, HttpSession session) throws IOException {
        //定義圖形驗證碼的長和寬
        LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(captchaProperties.getWidth(), captchaProperties.getHeight());

        String code = lineCaptcha.getCode();

        //設置session,把驗證碼信息存儲到session中
        session.setAttribute(key, code);
        session.setAttribute(datetime, new Date());


        //驗證碼寫入瀏覽器
        lineCaptcha.write(response.getOutputStream());

        //設置ContentType
        response.setContentType("image/jpeg");
        //設置編碼
        response.setCharacterEncoding("utf8");
        //防止瀏覽器緩存驗證碼圖片
        response.setHeader("Pragma", "No-cache");

    }

    @RequestMapping("/check")
    public boolean check(String captcha, HttpSession session) {
        String code = (String) session.getAttribute(key);


        if (!StringUtils.hasLength(captcha)) {
            return false;
        }

        //從session中獲取時間
        Date date = (Date) session.getAttribute(datetime);

        if (date == null || System.currentTimeMillis() - date.getTime() > 60 * 1000) {
            //session為null,或者session過期(超過一分鐘就算過期)
            //System.currentTimeMillis() - date.getTime(): 當前時間-請求時間
            return false;
        }

        //不區(qū)分大小寫
        return captcha.equalsIgnoreCase(code);
    }
}

CaptchaProperties類：

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

}

MySession類：

@Data
public class MySession {
    private String key;
    private String datetime;
}

配置文件 application.yml：

captcha:
  height: 50
  width: 150
  session:
    key: CaptchaCode
    datetime: CaptchaDate

以上就是SpringBoot實現(xiàn)驗證碼的案例分享的詳細內(nèi)容，更多關于SpringBoot驗證碼案例的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

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

SpringBoot實現(xiàn)驗證碼的案例分享

目錄

實現(xiàn)邏輯

前后端交互接口

前端代碼

后端代碼

相關文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具