SpringBoot实现验证码案例

目录

实现逻辑

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

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

前后端交互接口

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

接口定义:

1、生成验证码

请求url:/captcha/getCaptcha

响应:返回验证码的图片

2、校验验证码的正确性

请求url:/captcha/check

请求参数:用户输入的验证码captcha

响应:验证码正确返回true,错误返回false

前端代码

index.html

展示效果:

用户点击图片之后,可以更新验证码图片

代码如下:

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,当用户验证码输入正确时展示的内容

展示效果:

代码如下:

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中添加依赖:

xml 复制代码
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-captcha</artifactId>
    <version>5.8.26</version>
</dependency>

CaptchaController类:

java 复制代码
@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类:

java 复制代码
@ConfigurationProperties(prefix = "captcha")
@Configuration
@Data
public class CaptchaProperties {
    private Integer height;
    private Integer width;

}

MySession类:

java 复制代码
@Data
public class MySession {
    private String key;
    private String datetime;
}

配置文件 application.yml:

yaml 复制代码
captcha:
  height: 50
  width: 150
  session:
    key: CaptchaCode
    datetime: CaptchaDate
相关推荐
YaHuiLiang几秒前
小微互联网公司与互联网创业公司 -- 学历之殇
前端·后端·面试
冬天的风滚草4 分钟前
Higress开源版 大规模 MCP Server 部署配置方案
后端
雨落倾城夏未凉4 分钟前
4.信号与槽
后端·qt
岁忧12 分钟前
(LeetCode 每日一题) 1865. 找出和为指定值的下标对 (哈希表)
java·c++·算法·leetcode·go·散列表
YuTaoShao16 分钟前
【LeetCode 热题 100】240. 搜索二维矩阵 II——排除法
java·算法·leetcode
考虑考虑1 小时前
JDK9中的dropWhile
java·后端·java ee
想躺平的咸鱼干1 小时前
Volatile解决指令重排和单例模式
java·开发语言·单例模式·线程·并发编程
hqxstudying2 小时前
java依赖注入方法
java·spring·log4j·ioc·依赖
·云扬·2 小时前
【Java源码阅读系列37】深度解读Java BufferedReader 源码
java·开发语言
martinzh3 小时前
Spring AI 项目介绍
后端