快捷導(dǎo)航

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

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

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

實(shí)現(xiàn)邏輯

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

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

前后端交互接口

后端需要完成的兩個(gè)工作：1、生成驗(yàn)證碼，2、校驗(yàn)驗(yàn)證碼的正確性

接口定義：

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

請(qǐng)求url：/captcha/getCaptcha

響應(yīng)：返回驗(yàn)證碼的圖片

2、校驗(yàn)驗(yàn)證碼的正確性

請(qǐng)求url：/captcha/check

請(qǐng)求參數(shù):用戶輸入的驗(yàn)證碼captcha

響應(yīng)：驗(yàn)證碼正確返回true，錯(cuò)誤返回false

前端代碼

index.html

展示效果：

用戶點(diǎn)擊圖片之后，可以更新驗(yàn)證碼圖片

在這里插入圖片描述

代碼如下：

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

    <head>
        <meta charset="utf-8">
        <title>驗(yàn)證碼</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>輸入驗(yàn)證碼</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("驗(yàn)證碼錯(cuò)誤")
                        }
                    }
                });
            });
        </script>
    </body>

</html>

success.html，當(dāng)用戶驗(yàn)證碼輸入正確時(shí)展示的內(nèi)容

展示效果：

在這里插入圖片描述

代碼如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>驗(yàn)證成功頁(yè)</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>驗(yàn)證成功</h1>
        </div>
    </body>
</html>

后端代碼

結(jié)構(gòu)如下：

在這里插入圖片描述

在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 {
        //定義圖形驗(yàn)證碼的長(zhǎng)和寬
        LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(captchaProperties.getWidth(), captchaProperties.getHeight());

        String code = lineCaptcha.getCode();

        //設(shè)置session,把驗(yàn)證碼信息存儲(chǔ)到session中
        session.setAttribute(key, code);
        session.setAttribute(datetime, new Date());


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

        //設(shè)置ContentType
        response.setContentType("image/jpeg");
        //設(shè)置編碼
        response.setCharacterEncoding("utf8");
        //防止瀏覽器緩存驗(yàn)證碼圖片
        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中獲取時(shí)間
        Date date = (Date) session.getAttribute(datetime);

        if (date == null || System.currentTimeMillis() - date.getTime() > 60 * 1000) {
            //session為null,或者session過(guò)期(超過(guò)一分鐘就算過(guò)期)
            //System.currentTimeMillis() - date.getTime(): 當(dāng)前時(shí)間-請(qǐng)求時(shí)間
            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實(shí)現(xiàn)驗(yàn)證碼的案例分享的詳細(xì)內(nèi)容，更多關(guān)于SpringBoot驗(yàn)證碼案例的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

目錄

實(shí)現(xiàn)邏輯

前后端交互接口

前端代碼

后端代碼

相關(guān)文章

最新評(píng)論

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

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

常用在線小工具