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

相关推荐
hymuuuu2 分钟前
【最新案例】智能物料称重柜/生鲜称重售卖柜系统, 共享自助管理系统, 物联网应用定制开发
java
编程绿豆侠11 分钟前
力扣HOT100之栈:394. 字符串解码
java·算法·leetcode
周全全13 分钟前
基于 Vue 和 Spring Boot 实现滑块验证码的机器验证
前端·vue.js·spring boot
hstar952727 分钟前
三十四、面向对象底层逻辑-SpringMVC九大组件之FlashMapManager接口设计哲学
java·spring·设计模式·架构
yuren_xia31 分钟前
Spring MVC执行流程简介
java·spring·mvc
黄雪超1 小时前
JVM——对象模型:JVM对象的内部机制和存在方式是怎样的?
java·开发语言·jvm
凌冰_1 小时前
Tomcat 安装和配置
java·tomcat
一只叫煤球的猫1 小时前
虚拟线程生产事故复盘:警惕高性能背后的陷阱
java·后端·性能优化
周杰伦fans2 小时前
C#中用于控制自定义特性(Attribute)
后端·c#
是烟花哈2 小时前
IDEA中的debug使用技巧
java·ide·intellij-idea