spring boot整合kaptcha验证码

引入依赖

复制代码
<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency>

创建验证码生成配置类 KaptchaConfig.java

复制代码
@Configuration
public class KaptchaConfig {
    
    @Bean
    public DefaultKaptcha kaptcha() {
        DefaultKaptcha kaptcha = new DefaultKaptcha();
        Properties properties = new Properties();
        // 配置验证码生成属性
        properties.setProperty("kaptcha.border", "no");
        properties.setProperty("kaptcha.textproducer.font.color", "black");
        // 更多配置属性...
        Config config = new Config(properties);
        kaptcha.setConfig(config);
        return kaptcha;
    }
}

创建验证码接口 CaptchaController.java

复制代码
@Autowired
    private DefaultKaptcha kaptcha;
    
    @GetMapping("/captcha")
    public ResponseEntity<byte[]> generateCaptcha(HttpServletRequest request) {
        // 生成验证码
        String text = kaptcha.createText();
        BufferedImage image = kaptcha.createImage(text);
        
        try {
            ByteArrayOutputStream baos = new ByteArrayOutputStream();
            ImageIO.write(image, "jpg", baos);
            baos.flush();
            
            HttpHeaders headers = new HttpHeaders();
            headers.setContentType(MediaType.IMAGE_JPEG);
            
            // 将验证码存储到会话中,以便后续校验
            HttpSession session = request.getSession();
            session.setAttribute("captcha", text);
            
            return new ResponseEntity<>(baos.toByteArray(), headers, HttpStatus.OK);
        } catch (IOException e) {
            return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
        }
    }

前端

复制代码
<template>
  <div>
    <img :src="captchaUrl" alt="captcha">
    <input v-model="inputCaptcha" placeholder="请输入验证码">
    <button @click="verifyCaptcha">提交</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      captchaUrl: '',    // 验证码图片地址
      inputCaptcha: '',  // 用户输入的验证码
      captchaId: ''      // 验证码唯一标识符
    };
  },
  mounted() {
    this.generateCaptcha();  // 页面加载时生成验证码
  },
  methods: {
    generateCaptcha() {
      axios.get('/captcha')
        .then(response => {
          this.captchaUrl = 'data:image/jpeg;base64,' + response.data.image;
          this.captchaId = response.data.captchaId;
        })
        .catch(error => {
          console.error(error);
        });
    },
    verifyCaptcha() {
      axios.post('/captcha/verify', {
          captchaId: this.captchaId,
          captcha: this.inputCaptcha
        })
        .then(response => {
          console.log('验证码校验成功');
          // TODO: 验证码校验成功后的处理
        })
        .catch(error => {
          console.error('验证码校验失败');
          // TODO: 验证码校验失败后的处理
        });
    }
  }
};
</script>

注:

校验验证码的方法写在登录请求token中会更好。

相关推荐
stein_java16 分钟前
springMVC-10验证及国际化
java·spring
weixin_4786897619 分钟前
C++ 对 C 的兼容性
java·c语言·c++
LUCIAZZZ1 小时前
HikariCP数据库连接池原理解析
java·jvm·数据库·spring·springboot·线程池·连接池
考虑考虑1 小时前
Springboot3.5.x结构化日志新属性
spring boot·后端·spring
涡能增压发动积1 小时前
一起来学 Langgraph [第三节]
后端
sky_ph1 小时前
JAVA-GC浅析(二)G1(Garbage First)回收器
java·后端
涡能增压发动积1 小时前
一起来学 Langgraph [第二节]
后端
TTDreamTT1 小时前
SpringBoot十二、SpringBoot系列web篇之过滤器Filte详解
spring boot
IDRSolutions_CN2 小时前
PDF 转 HTML5 —— HTML5 填充图形不支持 Even-Odd 奇偶规则?(第二部分)
java·经验分享·pdf·软件工程·团队开发
hello早上好2 小时前
Spring不同类型的ApplicationContext的创建方式
java·后端·架构