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中会更好。

相关推荐
科兴第一吴彦祖4 分钟前
基于Spring Boot + Vue 3的乡村振兴综合服务平台
java·vue.js·人工智能·spring boot·推荐算法
ajassi20006 分钟前
开源 java android app 开发(十八)最新编译器Android Studio 2025.1.3.7
android·java·开源
纤瘦的鲸鱼10 分钟前
Spring Gateway 全面解析:从入门到进阶实践
java·spring·gateway
努力的白熊嗨16 分钟前
多台服务器文件共享存储
服务器·后端
调试人生的显微镜17 分钟前
CSS开发工具推荐与实战经验,让样式开发更高效、更精准
后端
渣哥23 分钟前
多环境配置利器:@Profile 在 Spring 项目中的实战价值
javascript·后端·面试
用户32941900421624 分钟前
Java接入DeepSeek实现流式、联网、知识库以及多轮问答
java
东百牧码人24 分钟前
还在使用ToList太Low了
后端
Knight_AL28 分钟前
浅拷贝与深拷贝详解:概念、代码示例与后端应用场景
android·java·开发语言
缓存征服者29 分钟前
CompletableFuture并行化改造,我将接口响应时间从300ms优化到50ms
后端