SpringBoot 实现图形验证码

一、最终结果展示

二、前端代码

2.1 index.html

html 复制代码

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

  $("#checkCaptcha").click(function () {

    $.ajax({
      type: "post",
      url: "/captcha/check",
      data:{
        captchaCode: $("#inputCaptcha").val()
      },
      success:function(result){
        if(result){
          location.href = "success.html";
        }else{
          alert("验证码错误!!");
        }
      }
    });
  });

</script>
</body>

</html>

2.2 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>
</head>
<body>
    <h1>验证成功</h1>
</body>
</html>

三、后端代码

3.1 引入依赖

html 复制代码

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

3.2 配置yml

html 复制代码

captcha:
  width: 100
  height: 40
  session:
    code: CAPTCHA_SESSION_CODE
    date: CAPTCHA_SESSION_DATE

3.3 CaptchaController.java

java 复制代码

package com.example.captchademo.controller;

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.ICaptcha;
import com.example.captchademo.model.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;

/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: 
 * Date: 2024-07-24
 * Time: 21:40
 */

@RequestMapping("/captcha")
@RestController
public class CaptchaController {
    @Autowired
    private CaptchaProperties captchaProperties;

    private static long VALID_TIME = 60*1000;

    @RequestMapping("/get")
    public void getCaptcha(HttpSession session, HttpServletResponse response){
        ICaptcha captcha = CaptchaUtil.createLineCaptcha(captchaProperties.getWidth(), captchaProperties.getHeight());
        try {
            captcha.write(response.getOutputStream());
            //禁止缓存
            response.setHeader("Prama", "No-cache");
            //设置返回的格式
            response.setContentType("image/jpeg");
            //打印验证码
            System.out.println(captcha.getCode());
            //存储Session
            session.setAttribute(captchaProperties.getSession().getCode(), captcha.getCode());
            session.setAttribute(captchaProperties.getSession().getDate(), System.currentTimeMillis());
            //Servlet的OutputStream记得自行关闭哦！
            response.getOutputStream().close();
        } catch (IOException e) {
            throw new RuntimeException(e);
        }

    }

    @RequestMapping("/check")
    public Boolean check(String captchaCode,HttpSession session){

        System.out.println("接收captchaCode:"+captchaCode);
        //参数校验
        //判断用户输入的验证码是否和session中存储的一致
        //是否在有效期内
        if (!StringUtils.hasLength(captchaCode)){
            return false;
        }
        String sessionCode = (String)session.getAttribute(captchaProperties.getSession().getCode());
        Long sessionDate = (Long)session.getAttribute(captchaProperties.getSession().getDate());
        if (captchaCode.equalsIgnoreCase(sessionCode)
                && sessionDate!=null
                && (System.currentTimeMillis() - sessionDate) < VALID_TIME){
            return true;
        }
        return false;

    }
}

3.4 CaptchaProperties.java

java 复制代码

package com.example.captchademo.model;

import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Configuration;

/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: 
 * Date: 2024-07-24
 * Time: 22:16
 */


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

    @Data
    public static class Session {
        private String code;
        private String date;
    }
}

前端代码可放置在"captcha-demo\src\main\resources\static"路径下，然后启动项目，在浏览器输入URL：http://127.0.0.1:8080/index.html 即可。