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

相关推荐
程序员岳焱8 分钟前
Java 与 MySQL 性能优化:Java 实现百万数据分批次插入的最佳实践
后端·mysql·性能优化
FrankYoou12 分钟前
Jenkins 与 GitLab CI/CD 的核心对比
java·docker
麦兜*38 分钟前
Spring Boot启动优化7板斧(延迟初始化、组件扫描精准打击、JVM参数调优):砍掉70%启动时间的魔鬼实践
java·jvm·spring boot·后端·spring·spring cloud·系统架构
KK溜了溜了1 小时前
JAVA-springboot 整合Redis
java·spring boot·redis
大只鹅1 小时前
解决 Spring Boot 对 Elasticsearch 字段没有小驼峰映射的问题
spring boot·后端·elasticsearch
ai小鬼头1 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
天河归来1 小时前
使用idea创建springboot单体项目
java·spring boot·intellij-idea
weixin_478689761 小时前
十大排序算法汇总
java·算法·排序算法
码荼1 小时前
学习开发之hashmap
java·python·学习·哈希算法·个人开发·小白学开发·不花钱不花时间crud
IT_10242 小时前
Spring Boot项目开发实战销售管理系统——数据库设计!
java·开发语言·数据库·spring boot·后端·oracle