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中的验证码缓存keycaptchaBase64: '', // 验证码图片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 {@Autowiredprivate 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)存入redisredisTemplate.opsForValue().set(key, verCode);// 返回图片验证码的key和base64编码字符串CaptchaVO captchaVO = CaptchaVO.builder().captchaKey(key).captchaBase64(captchaBase64).build();return Response.success(captchaVO);}
}

测试

image-20240125212212926

image-20240125212310817

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/656352.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从公有云对象存储迁移到回私有化 MinIO需要了解的所有信息

我们上一篇文章《如何从 AWS S3 遣返到 MinIO》的反响非常出色 - 我们已经接到了数十个企业的电话&#xff0c;要求我们提供遣返建议。我们已将这些回复汇总到这篇新文章中&#xff0c;其中我们更深入地研究了与遣返相关的成本和节省&#xff0c;以便您更轻松地进行自己的分析。…

使用马可波罗API查询商品信息的方法

马可波罗是一个知名的B2B平台&#xff0c;提供各种商品的查询和交易服务。为了方便用户获取商品信息&#xff0c;马可波罗提供了API接口。通过API&#xff0c;用户可以轻松地获取到商品的详细信息。以下是如何使用马可波罗API查询商品信息的方法&#xff1a; 注册并登录马可波…

多语言游戏网站

语言包 Steam&#xff1a;Steam 使用 VDF&#xff08;Valve Data Format&#xff09;语言包。VDF 是一种基于 JSON 的数据格式&#xff0c;用于存储游戏数据和其他信息。Steam 的语言包包含特定语言翻译的文本、图像和音频等内容。Epic Games Store&#xff1a;Epic Games Sto…

【MyBatis】快速入门MyBatis(保姆式教学),你值得一看

文章目录 &#x1f4c4;前言一. Mybatis简介✈️1. 什么是Mybatis&#x1f680;2. 为什么使用Mybatis 二. Mybatis快速入门&#x1f346;1. mybatis使用前准备1.1 创建springboot项目并引入相关依赖1.2 在 application.ym中进行数据源的配置1.3 创建数据表&#xff0c;准备表数…

Walrus 0.5发布:重构交互流程,打造开箱即用的部署体验

开源应用管理平台 Walrus 0.5 已于近日正式发布&#xff01; Walrus 0.4 引入了全新应用模型&#xff0c;极大程度减少了重复的配置工作&#xff0c;并为研发团队屏蔽了云原生及基础设施的复杂度。Walrus 0.5 在这一基础上&#xff0c;通过重构交互流程、增强抽象能力&#xff…

走80端口域名需要实名吗

用国内服务器走80端口域名需要实名吗&#xff1f; 需要&#xff0c;凡是在我国注册的域名&#xff0c;无论是用于搭建网站还是其他用途&#xff0c;亦或者是直接赠送给他人&#xff0c;都必须要先完成实名认证。域名如果没有实名&#xff0c;则无法解析且无法进行其他操作。根…

Git命令总结

廖雪峰的Git教程总结 &#x1f600;基本命令 命令作用git add <file>将文件更新添加到暂存区git commit -m "message"将当前暂存区的内容添加到版本库生成一个commitgit status展示工作区和暂存区的状态git diff比较工作区和暂存区的差异git log显示从最近到最…

C++中 this指针、构造函数、析构函数

1.this指针 我们定义一个日期类来举例子 对于上述类&#xff0c;有这样一个问题&#xff0c;Date类中有Init和Print这两个成员函数&#xff0c;函数体中没有关于不同对象的区分&#xff0c;那d1调用函数的时候&#xff0c;编译器是如和来确定d1而不是d2呢&#xff1f;C通过引入…

github请求超时解决方法

github请求超时解决办法 我使用windows执行如下git命令,提示超时 git clone xxxxx命令行提示如下&#xff1a; Failed to connect to github.com port 443: Timed out问题排查 可我Chrome可以正常访问github甚至ChatGPT&#xff0c;但是为什么在命令行里面却无法访问&#…

【Servlet】Smart Tomcat插件简化Servlet开发流程及解决常见问题

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【Servlet】 本专栏旨在分享学习Servlet的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 一、Smart Tomcat插件二…

Day32贪心_买卖股票的最佳时机_跳跃游戏Ⅰ、Ⅱ

文章目录 [122 买卖股票的最佳时机](https://programmercarl.com/0122.%E4%B9%B0%E5%8D%96%E8%82%A1%E7%A5%A8%E7%9A%84%E6%9C%80%E4%BD%B3%E6%97%B6%E6%9C%BAII.html)[55 跳跃游戏](https://programmercarl.com/0055.%E8%B7%B3%E8%B7%83%E6%B8%B8%E6%88%8F.html)[45 跳跃游戏Ⅱ…

快速上手Git

目录 一、Git概述 二、Git的常用命令 Git全局配置 获取Git仓库 基本概念 本地仓库操作 远程仓库操作 分支操作 标签操作 三、在IDEA中使用Git 在IDEA中配置Git 本地仓库操作 远程仓库操作 分支操作 冲突解决 一、Git概述 Git是一个分布式版本控制工具&…

Kubernetes Ingress 用法

Service的表现形式为IP地址端口号的方式&#xff0c;即工作在TCP/IP层&#xff0c;而对于基于HTTP的服务来说&#xff0c;Service机制很难实现&#xff0c;7层应用的复杂转发逻辑。kubernetes在1.1版本开始引入ingress资源对象&#xff0c;用于将集群外部的客户端请求路由到集群…

Elasticsearch 中使用MustNot等同于不等于遇到的坑

1、在写关键词推荐时,需要把当前文章过滤掉,不能再推荐自己的文章,所以再es中需要用到 MustNot属性查询 /// <summary> /// 服务中心es检索 /// </summary> /// <param name="input"></param> /// <returns></…

http代理与socks5代理有什么差异,http代理出现502错误如何修复?

一、HTTP代理与SOCKS5代理的差异HTTP代理和SOCKS5代理都是网络代理服务的两种主要类型&#xff0c;但它们在实现方式和应用场景上存在明显的差异。1.协议差异HTTP代理基于HTTP协议&#xff0c;是一种应用层代理&#xff0c;主要用于代理HTTP请求和响应。而SOCKS5代理则基于SOCK…

js实现贪吃蛇

文章目录 实现方法_11实现效果2 实现步骤2.1 移动场地2.2 游戏难度2.3 造蛇和食物2.4 蛇的移动2.5 产生食物的随机位置 3 全部代码 实现方法_21 实现效果2实现想法2.1 蛇的存储和显示2.2 蛇的移动(重难点)2.3 吃食物 3 完整代码 实现方法_1 1实现效果 2 实现步骤 html部分忽略…

Activity启动流程分析一 总体流程步骤分析

Launcher进程启动App进程MainActivity Launcher主线程捕获onClick()点击事件后&#xff0c;调用Launcher.startActivitySafely()方法。Launcher.startActivitySafely()内部调用了Launcher.startActivity()方法&#xff0c;Launcher.startActivity()内部调用了Launcher的父类Ac…

java heap dump文件简单快速查看

如何 查看 堆内存的对象占用情况 1 准备工具&#xff1a; idea , 2、 步骤&#xff1a; 1、jmap 或者其他工具&#xff0c;获取到 heap 快照 2、更改该文件的后缀名为 xxxx.hprof 3、用idea open 这个文件 如图&#xff1a; 5、点击biggest tab , calculate xxxx 即可…

Flask 入门1:一个简单的 Web 程序

1. 关于 Flask Flask诞生于2010年&#xff0c; Armin Ronacher的一个愚人节玩笑。不过现在已经是一个用python语言基于Werkzeug工具箱编写的轻量级web开发框架&#xff0c;它主要面向需求简单&#xff0c;项目周期短的小应用。 Flask本身相当于一个内核&#xff0c;其他几乎所…

ElasticSearch性能优化篇

目录 一、 架构的设计 1.1 一个节点只承担一个角色的配置 1.2 主节点设计 二、 索引的设计 2.1 冷热数据分离 1. 在配置文件中标记节点 2. 设置索引分配到热节点上 2.2 节点数的选择 2.3 索引的拆分 2.4 索引分片的设计 一、 架构的设计 1.1 一个节点只承担一个角…