SpringBoot实现验证码的案例分享

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

验证码可以有效防止其他人对某一个特定的注册用户用特定的程序,破解方式进行不断的登录尝试,我们其实很经常看到,登录一些网站其实是需要验证码的,所以本文给大家分享了SpringBoot实现验证码的案例,需要的朋友可以参考下

实现逻辑

1、后端功能：随机生成验证码图片，并把交给前端、接收用户输入，验证用户输入的验证码是否正确、

2、前端功能：显示验证码，提供输入框供用户输入他们看到的验证码，把用户输入的数据交给后端，接收后端返回的验证结果

前后端交互接口

后端需要完成的两个工作：1、生成验证码，2、校验验证码的正确性

接口定义：

1、生成验证码

请求url：/captcha/getCaptcha

响应：返回验证码的图片

2、校验验证码的正确性

请求url：/captcha/check

请求参数:用户输入的验证码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，当用户验证码输入正确时展示的内容

展示效果：

在这里插入图片描述

代码如下：

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

        //不区分大小写
        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实现验证码的案例分享的详细内容，更多关于SpringBoot验证码案例的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

java后端返回数据给前端时去除值为空或NULL的属性、忽略某些属性代码示例
在Java开发中我们处理JSON数据时经常会遇到空值(null)的情况,这篇文章主要给大家介绍了关于java后端返回数据给前端时去除值为空或NULL的属性、忽略某些属性的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-07-07
Spring中的事务传播行为示例详解
这篇文章主要给大家介绍了关于Spring中事务传播行为的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Spring具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-08-08
Java实现邮件发送功能
这篇文章主要为大家详细介绍了Java实现邮件发送功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
java门禁系统面向对象程序设计
这篇文章主要为大家详细介绍了java门禁系统面向对象程序设计，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-01-01
Java实现时间和字符串互转
这篇文章主要为大家详细介绍了如何通过Java实现时间对象和字符串互相转换,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-10-10
关于springBoot yml文件的list读取问题总结(亲测)
这篇文章主要介绍了关于springBoot yml文件的list读取问题总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2021-12-12
maven repository详解
这篇文章主要介绍了maven repository的相关知识，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-05-05
Java实现商品的查找、添加、出库、入库操作完整案例
这篇文章主要介绍了Java实现商品的查找、添加、出库、入库操作,结合完整实例形式分析了java基于面向对象的商品信息添加、删除、查找等相关操作技巧,需要的朋友可以参考下
2019-11-11
java实现波雷费密码算法示例代码
这篇文章主要介绍了java实现波雷费密码算法示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01
SpringBoot实现ImportBeanDefinitionRegistrar动态注入
在阅读Spring Boot源码时,看到Spring Boot中大量使用ImportBeanDefinitionRegistrar来实现Bean的动态注入,它是Spring中一个强大的扩展接口,本文就来详细的介绍一下如何使用,感兴趣的可以了解一下
2024-02-02

SpringBoot实现验证码的案例分享

目录

实现逻辑

前后端交互接口

前端代码

后端代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具