SpringBoot整合EasyCaptcha实现图形验证码功能

 更新时间:2024年02月02日 11:45:49   作者:gengduc  
这篇文章主要介绍了SpringBoot整合EasyCaptcha实现图形验证码功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

简介

EasyCaptcha:https://github.com/ele-admin/EasyCaptcha

Java图形验证码,支持gif、中文、算术等类型,可用于Java Web、JavaSE等项目。

添加依赖

<dependency>
    <groupId>com.github.whvcse</groupId>
    <artifactId>easy-captcha</artifactId>
    <version>1.6.2</version>
</dependency>

需求分析

前后端分离,前端使用 Vue3 开发,后端使用 Spring Boot 开发。组件首次挂载时,获取验证码。点击图片刷新获取验证码,验证码存储到 Redis 数据库中。

代码实现

前端

api

/**
 * 后端响应的验证码参数格式
 */
export interface CaptchaResponse {
  /**
   * redis中的验证码缓存key
   */
  captchaKey: string;
  /**
   * 验证码图片Base64字符串
   */
  captchaBase64: string;
}
/**
 * 获取验证码api
 */
export function getCaptchaApi(): AxiosPromise<CaptchaResponse> {
  return request({
    url: '/auth/captcha',
    method: 'get'
  })
}

vue组件

<el-form-item prop="verCode">
  <el-input placeholder="验证码" size="large" style="width: 67%;" :prefix-icon="Aim" v-model="loginForm.verCode">
  </el-input>
  <div class="login-code">
    <el-image :src="captchaResponse.captchaBase64" style="height: 38px;" @click="getCaptcha" title="刷新图片验证码">
      <template #error>
        <div class="image-slot">
          <el-icon color="#A1A4AB"><icon-picture /></el-icon>
        </div>
      </template>
    </el-image>
  </div>
</el-form-item>

<script setup lang='ts'>
/**
 * 后端响应的验证码参数
 */
const captchaResponse = ref<CaptchaResponse>({
  captchaKey: '', // redis中的验证码缓存key
  captchaBase64: '', // 验证码图片Base64字符串
})
/**
 * 获取图片验证码
 */
function getCaptcha() {
  getCaptchaApi().then((response) => {
    captchaResponse.value = response.data
  }).catch((error) => {
    return Promise.reject(error)
  })
}
/**
 * 组件挂载时,获取图片验证码
 */
onMounted(() => {
  getCaptcha()

})
</script>

后端

package com.lcloud.controller;

import com.lcloud.dto.UserLoginDTO;
import com.lcloud.response.Response;
import com.lcloud.service.AuthService;
import com.lcloud.vo.CaptchaVO;
import com.lcloud.vo.UserLoginVO;
import com.wf.captcha.SpecCaptcha;
import io.swagger.v3.oas.annotations.Operation;
import io.swagger.v3.oas.annotations.tags.Tag;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.web.bind.annotation.*;

import java.util.UUID;

@Slf4j
@RestController
@RequestMapping("/auth")
@Tag(name = "授权管理")
public class AuthController {

    @Autowired
    private RedisTemplate<String, Object> redisTemplate;

    /**
     * 获取图片验证码
     *
     * @return 图片验证码的key和base64编码字符串
     * @throws Exception 抛出异常
     */
    @GetMapping("/captcha")
    @Operation(summary = "获取图片验证码")
    public Response<CaptchaVO> captcha() throws Exception {
        // 设置图片验证码的属性(宽、高、长度、字体)
        SpecCaptcha specCaptcha = new SpecCaptcha(100, 38, 4);
        specCaptcha.setFont(1);
        // 图片验证码转换成base64编码字符串
        String captchaBase64 = specCaptcha.toBase64();
        // 图片验证码结果
        String key = UUID.randomUUID().toString();
        //log.info("key: {}", key);
        String verCode = specCaptcha.text().toLowerCase();
        // (key,value)=》(uuid,verCode)存入redis
        redisTemplate.opsForValue().set(key, verCode);
        // 返回图片验证码的key和base64编码字符串
        CaptchaVO captchaVO = CaptchaVO.builder().captchaKey(key).captchaBase64(captchaBase64).build();
        return Response.success(captchaVO);
    }
}

测试

image-20240125212212926

image-20240125212310817

以上就是SpringBoot整合EasyCaptcha实现图形验证码功能的详细内容,更多关于SpringBoot EasyCaptcha验证码的资料请关注脚本之家其它相关文章!

相关文章

  • 关于springBoot yml文件的list读取问题总结(亲测)

    关于springBoot yml文件的list读取问题总结(亲测)

    这篇文章主要介绍了关于springBoot yml文件的list读取问题总结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-12-12
  • Java基础之ClassLoader详解

    Java基础之ClassLoader详解

    这篇文章主要介绍了Java基础之ClassLoader详解,文中对ClassLoader有非常详细的解说,对正在学习java基础的小伙伴们有非常好的帮助,需要的朋友可以参考下
    2021-04-04
  • 在Spring异步调用中传递上下文的方法

    在Spring异步调用中传递上下文的方法

    这篇文章主要给大家介绍了关于如何在Spring异步调用中传递上下文的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Spring具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • Dubbo本地调试的几种方式总结

    Dubbo本地调试的几种方式总结

    dubbo服务方启动时需要加载的东西太多,如果跑单元测试把服务开启会浪费不少时间,而且单元测试没法保持服务一直开启的状态,这篇文章主要给大家介绍了关于Dubbo本地调试的几种方式,需要的朋友可以参考下
    2022-11-11
  • JAVA设计模式之访问者模式原理与用法详解

    JAVA设计模式之访问者模式原理与用法详解

    这篇文章主要介绍了JAVA设计模式之访问者模式,简单说明了访问者模式的原理,并结合实例分析了java访问者模式的定义与用法,需要的朋友可以参考下
    2017-08-08
  • SpringBoot项目中建议关闭Open-EntityManager-in-view原因

    SpringBoot项目中建议关闭Open-EntityManager-in-view原因

    这篇文章主要为大家解析了在Spring Boot项目中建议关闭Open-EntityManager-in-view的原因示例分析,有需要的朋友可以借鉴参考下,希望能够有所帮助
    2022-02-02
  • Eclipse中实现JS代码提示功能(图文教程)

    Eclipse中实现JS代码提示功能(图文教程)

    本文通过图文并茂的形式给大家介绍了Eclipse中实现JS代码提示功能,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-11-11
  • Java设计模式之抽象工厂模式实例详解

    Java设计模式之抽象工厂模式实例详解

    这篇文章主要介绍了Java设计模式之抽象工厂模式,结合实例形式分析了抽象工厂模式的概念、功能、定义与使用方法,需要的朋友可以参考下
    2017-09-09
  • Scala中的mkString的具体使用方法

    Scala中的mkString的具体使用方法

    这篇文章主要介绍了Scala中的mkString的具体方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • springboot整合mongodb并实现crud步骤详解

    springboot整合mongodb并实现crud步骤详解

    这篇文章主要介绍了springboot整合mongodb并实现crud,本文分步骤通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-08-08

最新评论