利用redis做一个验证码

1，导入依赖

 <!--        验证码支持多种验证码https://gitee.com/ele-admin/EasyCaptcha.git-->
        <dependency>
            <groupId>com.github.whvcse</groupId>
            <artifactId>easy-captcha</artifactId>
            <version>1.6.2</version>
        </dependency>
        <!--        redis-->
          <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-redis</artifactId>
        </dependency>

2.验证码接口
初始化redis

import com.fasterxml.jackson.annotation.JsonAutoDetect;
import com.fasterxml.jackson.annotation.JsonTypeInfo;
import com.fasterxml.jackson.annotation.PropertyAccessor;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.jsontype.impl.LaissezFaireSubTypeValidator;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.data.redis.connection.RedisConnectionFactory;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.data.redis.serializer.Jackson2JsonRedisSerializer;
import org.springframework.data.redis.serializer.StringRedisSerializer;

@Configuration
public class RedisConfig {
    @Bean
    public RedisTemplate<String, Object> redisTemplate(RedisConnectionFactory factory) {

        RedisTemplate<String, Object> template = new RedisTemplate<>();

        template.setConnectionFactory(factory);

        Jackson2JsonRedisSerializer<Object> jackson2JsonRedisSerializer = new Jackson2JsonRedisSerializer<>(Object.class);

        ObjectMapper om = new ObjectMapper();

        om.setVisibility(PropertyAccessor.ALL, JsonAutoDetect.Visibility.ANY);

//        om.enableDefaultTyping(ObjectMapper.DefaultTyping.NON_FINAL);
//        过期换了
        om.activateDefaultTyping(
                LaissezFaireSubTypeValidator.instance,
                ObjectMapper.DefaultTyping.NON_FINAL,
                JsonTypeInfo.As.WRAPPER_ARRAY);
        jackson2JsonRedisSerializer.setObjectMapper(om);

        StringRedisSerializer stringRedisSerializer = new StringRedisSerializer();

        // key采用String的序列化方式

        template.setKeySerializer(stringRedisSerializer);

        // hash的key也采用String的序列化方式

        template.setHashKeySerializer(stringRedisSerializer);
        // value序列化方式采用jackson

        template.setValueSerializer(jackson2JsonRedisSerializer);

        // hash的value序列化方式采用jackson

        template.setHashValueSerializer(jackson2JsonRedisSerializer);

        template.afterPropertiesSet();

        return template;

    }


}

工具类

https://blog.csdn.net/weixin_48143279/article/details/124407350

验证码接口

 @Autowired
    RedisUtil redisUtil;
    @GetMapping("/captcha")
    @ApiOperation("验证码接口")
//    HttpServletRequest request, HttpServletResponse response
//    法一验证码过滤器，登录时通过key来获取缓存中的验证码
    public Result captcha() throws Exception {
        SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);
        String verCode = specCaptcha.text().toLowerCase();
        String key = UUID.randomUUID().toString();
        // 存入redis并设置过期时间为30分钟  工具类单位为秒
        redisUtil.set(key, verCode, 30 * 60);
        HashMap<String, Object> map = new HashMap<>();
        map.put("key", key);
        map.put("image", specCaptcha.toBase64());
        // 将key和base64返回给前端（返回类自己写）
        return Result.success(200, "验证码生成成功", map);
    }

接口发送2个数据，一个键，一个二进制图片数据

2，前端显示
vue写的前端（我自己用了框架的，自己可以直接用axios来）

  <el-form-item prop="code" >
         <span class="svg-container">
           <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
        </span>
        <el-input
          v-model="loginForm.code"
          auto-complete="off"
          placeholder="验证码"
          style="width: 63%"
        >
        </el-input>
        <div class="login-code">
          <img :src="changeImage" @click="handleClickImage" class="login-code-img"/>
        </div>
      </el-form-item>

方法

import {captchaImage} from '@/api/user'
export function captchaImage() {
  return request({
    url: '/captcha',
    method: 'get',
    params:{}
  })
}
//这是我自己用的框架调用接口，可以直接用axios来的
data() {
    return {
      changeImage: '',
      //key值是给登录列表的，用于后端去redis拿取验证码比较
      loginForm: {
        username: '',
        password: '',
        key:'',
        code:''
      },
handleClickImage(){
      captchaImage().then(res => {
        this.changeImage = res.data.image;
        this.loginForm.key=res.data.key
      }).catch(err => {
        // console.log(err)
      });
    },

3，后端比较
本人用的spring-secrity（自己写的话可以直接在登录中判断就可以）

 // 校验验证码逻辑
    private void validate(HttpServletRequest httpServletRequest) {
//		输入的字符转小写
        String code = httpServletRequest.getParameter("code").toLowerCase();
        String key = httpServletRequest.getParameter("key");
//		System.out.println(key);
        if (StringUtils.isBlank(code) || StringUtils.isBlank(key)) {
            throw new CaptchaException("验证码错误");
        }
        if (!code.equals(redisUtil.get(key))) {
            throw new CaptchaException("验证码错误");
        }
        // 一次性使用删除缓存
        redisUtil.del(key);
    }

最终样式