Spring验证码

news2024/9/9 4:38:10

前言：使用Hutool

1.什么是Hutool？

2.代码复制到test类中

3.代码爆红，说明需要引入依赖

4.根据名取Maven仓库相关依赖

5.在pom.xml文件中进行配置

6.引入成功

7. 运行程序

打开d盘，发现已经生成了验证码的图片，路径在上面提示有。

使用其他验证码的方式相同，不赘述。

1.验证码项目

功能：后端实现验证码实现逻辑，前端负责返回的数据进行页面的提示。

实现：用户进行验证码输入，输入正确则跳转验证成功的页面，没输入或者输入不对，有弹窗提示，有60s的验证时间。

2.写生成验证码后端接口

1.先简单编写后端接口captcha(类CaptchaController）

2.验证是否成功

3.配置文件

为什么要配置文件？

好进行封装，因为图片长宽高，session,date等都是可以设置的常量

session的key是拿到用户输入的验证码进行比较

date指的是验证码的是时效。

这些都是可以设置为常量，你也可以在一个类中设置这些常量，但是如果有多个类要进行使用呢？

当然前期学习时我们是创建一个对象进行存储常量，但是我们这里是进行配置的学习啦。

这里把默认的application.properties修改成yml。

之所以修改单纯是为了练习。

4. 创建一个CaptchaProperties对象

代码：

package com.example.demo.model;

import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

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

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

}

为什么要创建一个对象？

比如拿现在有个常量要接受，你是要定义五个变量接收呢，还是使用一个对象接收?

代码：

package com.example.demo.controller;  
  
import cn.hutool.captcha.CaptchaUtil;  
import cn.hutool.captcha.LineCaptcha;  
import com.example.demo.model.CaptchaProperties;  
import jakarta.servlet.http.HttpServletRequest;  
import jakarta.servlet.http.HttpServletResponse;  
import jakarta.servlet.http.HttpSession;  
import org.springframework.beans.factory.annotation.Autowired;  
import org.springframework.web.bind.annotation.RequestMapping;  
import org.springframework.web.bind.annotation.RestController;  
  
import java.io.IOException;  
import java.util.Date;  
  
/**  
 * 验证码控制器，用于处理验证码的生成和验证  
 */  
@RequestMapping("/captcha")  
@RestController  
public class CaptchaController {  
    // 设置验证码在Session中的有效时间（毫秒）  
    private final static long SESSION_VALID_TIMEOUT = 60 * 1000;  
  
    // 注入CaptchaProperties配置类，用于获取验证码的配置信息  
    @Autowired  
    private CaptchaProperties captchaProperties;  
  
    /**  
     * 获取验证码图片  
     *   
     * @param session 用于存储验证码及其生成时间的HttpSession  
     * @param response 用于输出验证码图片的HttpServletResponse  
     */  
    @RequestMapping("/get")  
    public void getCaptcha(HttpSession session, HttpServletResponse response) {  
        // 根据CaptchaProperties中的配置生成一个线性验证码  
        LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(captchaProperties.getWidth(), captchaProperties.getHeight());  
  
        // 设置响应的内容类型为图片  
        response.setContentType("image/jpg");  
  
        // 禁止浏览器缓存验证码图片  
        response.setHeader("Pragma", "No-cache");  
  
        // 将验证码图片写入到响应的输出流中  
        try {  
            lineCaptcha.write(response.getOutputStream());  
  
            // 将验证码文本存储在Session中，用于后续的验证  
            session.setAttribute(captchaProperties.getSession().getKey(), lineCaptcha.getCode());  
  
            // 可选：将验证码的生成时间也存储在Session中，以便进行过期检查  
            session.setAttribute(captchaProperties.getSession().getDate(), new Date());  
  
            // 关闭响应的输出流  
            response.getOutputStream().close();  
        } catch (IOException e) {  
            // 如果发生IO异常，则抛出运行时异常  
            throw new RuntimeException(e);  
        }  
    }  
}

3.写校验验证码check接口

代码：

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

        //验证码生成的内容, 和用户输入的进行比较
        if (!StringUtils.hasLength(inputCode)){
            return false;
        }
        //从session获取信息
        String savedCode = (String) session.getAttribute(captchaProperties.getSession().getKey());
        Date saveDate = (Date) session.getAttribute(captchaProperties.getSession().getDate());
        if (inputCode.equalsIgnoreCase(savedCode)){
            //判断验证码是否过期
            if (saveDate!=null && System.currentTimeMillis()-saveDate.getTime() < session_valid_timeout){
                return true;
            }
        }

        return false;
    }

}

4.写前端代码index.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({
          url: "/captcha/check",
          type: "post",
          data: {
            inputCode: $("#inputCaptcha").val()
          },
          success:function(result){
            if(result){
              location.href = "success.html";
            }else{
              alert("验证码错误或者过期");
            }
          }
        });
    });

  </script>
</body>

</html>

5.写前端代码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>
</head>
<body>
    <h1>验证成功</h1>
</body>
</html>

6.展示：