5 分钟快速上手图形验证码，防止接口被恶意刷量！

5 分钟快速上手图形验证码，防止接口被恶意刷量！

大家好，我是程序员小白条，今天来给大家介绍一个快速实现图形验证码的优秀框架 AJ-Captcha。

需求分析

如果注册接口没有验证码这种类型的限制，很容易会被刷量，因此，一般都会使用邮箱验证码或者图形验证码进行限制，防止被恶意刷接口。邮箱验证码比较容易的是 QQ 验证码，直接配合 SpringMail 即可实现，本文主要实现图形验证码。

文字验证如下

滑动验证如下

后端

1）pom.xml 引入官方依赖包

<!-- 接入滑动验证 https://ajcaptcha.beliefteam.cn/captcha-doc/captchaDoc/java.html-->
<dependency><groupId>com.anji-plus</groupId><artifactId>spring-boot-starter-captcha</artifactId><version>1.3.0</version>
</dependency>

2）设置配置文件 properties 或者 yml 格式

# 滑动验证，底图路径，不配置将使用默认图片
# 支持全路径
# 支持项目路径,以classpath:开头,取resource目录下路径,例：classpath:images/jigsaw
aj:captcha:
#    jigsaw: "classpath:images/jigsaw"#滑动验证，底图路径，不配置将使用默认图片##支持全路径# 支持项目路径,以classpath:开头,取resource目录下路径,例：classpath:images/pic-click
#    pic-click: "classpath:images/pic-click"# 对于分布式部署的应用，我们建议应用自己实现CaptchaCacheService，比如用Redis或者memcache，# 参考CaptchaCacheServiceRedisImpl.java# 如果应用是单点的，也没有使用redis，那默认使用内存。# 内存缓存只适合单节点部署的应用，否则验证码生产与验证在节点之间信息不同步，导致失败。# ！！！ 注意啦，如果应用有使用spring-boot-starter-data-redis，# 请打开CaptchaCacheServiceRedisImpl.java注释。# redis ----->  SPI： 在resources目录新建META-INF.services文件夹(两层)，参考当前服务resources。# 缓存local/redis...cache-type: local# local缓存的阈值,达到这个值，清除缓存#cache-number: 1000# local定时清除过期缓存(单位秒),设置为0代表不执行#timing-clear: 180#spring.redis.host: 10.108.11.46#spring.redis.port: 6379#spring.redis.password:#spring.redis.database: 2#spring.redis.timeout: 6000# 验证码类型default两种都实例化。type: default# 汉字统一使用Unicode,保证程序通过@value读取到是中文，可通过这个在线转换;yml格式不需要转换# https://tool.chinaz.com/tools/unicode.aspx 中文转Unicode# 右下角水印文字(我的水印)water-mark: "\u6211\u7684\u6c34\u5370"# 右下角水印字体(不配置时，默认使用文泉驿正黑)# 由于宋体等涉及到版权，我们jar中内置了开源字体【文泉驿正黑】# 方式一：直接配置OS层的现有的字体名称，比如：宋体# 方式二：自定义特定字体，请将字体放到工程resources下fonts文件夹，支持ttf\ttc\otf字体#water-font: WenQuanZhengHei.ttf# 点选文字验证码的文字字体(文泉驿正黑)#font-type: WenQuanZhengHei.ttf# 校验滑动拼图允许误差偏移量(默认5像素)slip-offset: 5# aes加密坐标开启或者禁用(true|false)aes-status: true# 滑动干扰项(0/1/2)interference-options: 2#点选字体样式 默认Font.BOLDfont-style: 1#点选字体字体大小font-size: 25#点选文字个数,存在问题，暂不支持修改#click-word-count: 4history-data-clear-enable: false# 接口请求次数一分钟限制是否开启 true|falsereq-frequency-limit-enable: false# 验证失败5次，get接口锁定req-get-lock-limit: 5# 验证失败后，锁定时间间隔,sreq-get-lock-seconds: 360# get接口一分钟内请求数限制req-get-minute-limit: 30# check接口一分钟内请求数限制req-check-minute-limit: 60# verify接口一分钟内请求数限制req-verify-minute-limit: 60

3）创建一个配置类，让 SpringBoot 启动时，扫描到即可

@Configuration
public class CaptchaConfig {@Bean(name = "CaptchaCacheService")@Primarypublic CaptchaCacheService captchaCacheService(AjCaptchaProperties config){//缓存类型redis/local/....CaptchaCacheService ret = CaptchaServiceFactory.getCache(config.getCacheType().name());return ret;}
}

4）创建默认实现类，跟 application.yml 的配置有关

public class DefaultCaptchaServiceImpl extends AbstractCaptchaService {DefaultCaptchaServiceImpl() {//document why this constructor is empty}//这个需要实现，如果返回 redis 那就是使用 redis 那套public String captchaType() {return "default";}@Overridepublic void init(Properties config) {for (String s : CaptchaServiceFactory.instances.keySet()) {if (!this.captchaType().equals(s)) {this.getService(s).init(config);}}}@Overridepublic void destroy(Properties config) {for (String s : CaptchaServiceFactory.instances.keySet()) {if (!this.captchaType().equals(s)) {this.getService(s).destroy(config);}}}private CaptchaService getService(String captchaType) {return CaptchaServiceFactory.instances.get(captchaType);}@Overridepublic ResponseModel get(CaptchaVO captchaVO) {if (captchaVO == null) {return RepCodeEnum.NULL_ERROR.parseError("captchaVO");} else {return StringUtils.isEmpty(captchaVO.getCaptchaType()) ? RepCodeEnum.NULL_ERROR.parseError("类型") : this.getService(captchaVO.getCaptchaType()).get(captchaVO);}}@Overridepublic ResponseModel check(CaptchaVO captchaVO) {if (captchaVO == null) {return RepCodeEnum.NULL_ERROR.parseError("captchaVO");} else if (StringUtils.isEmpty(captchaVO.getCaptchaType())) {return RepCodeEnum.NULL_ERROR.parseError("类型");} else {return StringUtils.isEmpty(captchaVO.getToken()) ? RepCodeEnum.NULL_ERROR.parseError("token") : this.getService(captchaVO.getCaptchaType()).check(captchaVO);}}@Overridepublic ResponseModel verification(CaptchaVO captchaVO) {if (captchaVO == null) {return RepCodeEnum.NULL_ERROR.parseError("captchaVO");} else if (StringUtils.isEmpty(captchaVO.getCaptchaVerification())) {return RepCodeEnum.NULL_ERROR.parseError("二次校验参数");} else {try {String codeKey = String.format(REDIS_SECOND_CAPTCHA_KEY, captchaVO.getCaptchaVerification());if (!CaptchaServiceFactory.getCache(cacheType).exists(codeKey)) {return ResponseModel.errorMsg(RepCodeEnum.API_CAPTCHA_INVALID);}CaptchaServiceFactory.getCache(cacheType).delete(codeKey);} catch (Exception var3) {this.logger.error("验证码坐标解析失败", var3);return ResponseModel.errorMsg(var3.getMessage());}return ResponseModel.success();}}
}
后端接口

获取验证码接口：http://你的项目地址/captcha/get

请求参数：

{"captchaType": "blockPuzzle",  //验证码类型 clickWord"clientUid": "唯一标识"  //客户端UI组件id,组件初始化时设置一次，UUID（非必传参数）
}

响应参数：

{"repCode": "0000","repData": {"originalImageBase64": "底图base64","point": {    //默认不返回的，校验的就是该坐标信息，允许误差范围"x": 205,"y": 5},"jigsawImageBase64": "滑块图base64","token": "71dd26999e314f9abb0c635336976635", //一次校验唯一标识"secretKey": "16位随机字符串", //aes秘钥，开关控制，前端根据此值决定是否加密"result": false,"opAdmin": false},"success": true,"error": false
}

核对验证码接口接口：http://:/captcha/check

请求参数：

{"captchaType": "blockPuzzle","pointJson": "QxIVdlJoWUi04iM+65hTow==",  //aes加密坐标信息"token": "71dd26999e314f9abb0c635336976635"  //get请求返回的token
}

响应参数：

{"repCode": "0000","repData": {"captchaType": "blockPuzzle","token": "71dd26999e314f9abb0c635336976635","result": true,"opAdmin": false},"success": true,"error": false
}

5）完成前面四步后，即可测试接口是否成功被调用，可以用 postman 或者 apifox 等测试工具。

6）在用户注册的 dto 实体类加入新字段 captchaVerification。

@Data
public class UserRegisterRequest implements Serializable {private static final long serialVersionUID = 3191241716373120793L;private String userAccount;private String userPassword;private String checkPassword;private String captchaVerification;}

7）在注册接口，加上检验图形验证码的服务。

先自动注入依赖

@Resource
private CaptchaService captchaService;

再加上这段代码即可

		CaptchaVO captchaVO = new CaptchaVO();captchaVO.setCaptchaVerification(userRegisterRequest.getCaptchaVerification());ResponseModel response = captchaService.verification(captchaVO);if(!response.isSuccess()) {//验证码校验失败，返回信息告诉前端//repCode  0000  无异常，代表成功//repCode  9999  服务器内部异常//repCode  0011  参数不能为空//repCode  6110  验证码已失效，请重新获取//repCode  6111  验证失败//repCode  6112  获取验证码失败,请联系管理员throw new BusinessException(ErrorCode.FORBIDDEN_ERROR, "验证码错误请重试");}

前端

1）引入依赖

npm install aj-captcha-react

2）定义一个函数

 const ref = useRef();const click = () => {ref.current?.verify();console.log(ref.current?.verify());};

3）使用组件，这边 valueData 就是注册时带的数据，注意：path 是项目的前缀路径，你的项目可能是 8101 端口，这边是 8204 端口，api 是项目的前缀！

const [valueData, setValueData] = useState<API.UserRegisterRequest>();

<Captcha
onSuccess={async (data) => {const value = valueData;if (value) {value.captchaVerification = data.captchaVerification;await handleSubmit(value);}
}}
path="http://localhost:8204/api"
type="auto"
ref={ref}></Captcha>

完整 tsx 代码如下

const Register: React.FC = () => {const ref = useRef();const click = () => {ref.current?.verify();console.log(ref.current?.verify());};const [type, setType] = useState<string>('register');const containerClassName = useEmotionCss(() => {return {display: 'flex',flexDirection: 'column',height: '100vh',overflow: 'auto',backgroundImage:"url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",backgroundSize: '100% 100%',};});const [valueData, setValueData] = useState<API.UserRegisterRequest>();const handleSubmit = async (values: API.UserRegisterRequest) => {// 1.先判断两次输入的密码是否一致const {userPassword, checkPassword} = values;if (userPassword != checkPassword) {return message.info("两次输入的密码不一致", 1.5)}// 2.密码一致const res =  await userRegister(values);if(res.code !== 0){return message.error(res.message+"-注册失败，请重试",1.5)}message.success('注册成功，请登录账号',1.5);history.push('/user/login');};return (<div className={containerClassName}><Helmet><title>{Settings.title}</title></Helmet><divstyle={{flex: '1',padding: '32px 0',}}><LoginFormsubmitter={{searchConfig: {submitText: '注册',},}}contentStyle={{minWidth: 280,maxWidth: '75vw',}}logo={<img alt="logo" style={{height: '100%'}} src="/logo.svg"/>}title="小白条前端模板"subTitle={'快速开发属于自己的前端项目'}initialValues={{autoLogin: true,}}onFinish={async (values) => {click();setValueData(values);}}><TabsactiveKey={type}onChange={setType}centereditems={[{key: 'register',label: '用户注册',},]}/>{type === 'register' && (<><ProFormTextname="userAccount"fieldProps={{size: 'large',prefix: <UserOutlined/>,}}placeholder={'请输入账号'}rules={[{required: true,message: '账号是必填项！',},{min: 6,type: 'string',message: '长度不能小于 6',},]}/><ProFormText.Passwordname="userPassword"fieldProps={{size: 'large',prefix: <LockOutlined/>,}}placeholder={'请输入密码'}rules={[{required: true,message: '密码是必填项！',},{min: 8,type: 'string',message: '长度不能小于 8',},]}/><ProFormText.Passwordname="checkPassword"fieldProps={{size: 'large',prefix: <LockOutlined/>,}}placeholder="请再次输入密码"rules={[{required: true,message: '确认密码是必填项！',},{min: 8,type: 'string',message: '长度不能小于 8',},]}/></>)}<divstyle={{marginBottom: 24,textAlign: 'right',}}><a onClick={() => {history.push("/user/login")}}>用户登录</a></div><CaptchaonSuccess={async (data) => {const value = valueData;if (value) {value.captchaVerification = data.captchaVerification;await handleSubmit(value);}}}path="http://localhost:8102/api"type="auto"ref={ref}></Captcha></LoginForm></div><Footer/></div>);
};
export default Register;

完成之后即可看到效果图，可以自定义水印和图片，具体可以看官方文档。

官方文档地址：https://ajcaptcha.beliefteam.cn/captcha-doc/

我的 GitHub 地址：https://github.com/luoye6

个人项目：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

欢迎 Follow 💕 和 Star~⭐

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

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

相关文章

protobuf —— 快速上手

protobuf —— 快速上手

protobuf —— 快速上手 创建 .proto 文件添加注释指定proto3语法package 声明符定义消息&#xff08;message&#xff09; 定义消息字段字段定义基本格式字段名称命名规范字段类型字段唯一编号示例 转换关系示例&#xff1a;增加姓名和年龄字段 字段唯一编号字段编号范围编码效…
阅读更多...
英伟达SSD视觉算法，jetson.inference在jetson nano中部署

英伟达SSD视觉算法，jetson.inference在jetson nano中部署

一、用官方镜像刷机 安装SD卡擦除工具SD Card Formatter https://www.sdcardformatter.com/download/ 格式化SD卡 下载官方镜像 https://developer.nvidia.com/jetson-nano-sd-card-image 安装刷机工具balenaEtcher https://www.balena.io/etcher 将上面下载的镜像压缩包解…
阅读更多...
spark的简单学习二

spark的简单学习二

一 spark sql基础 1.1 Dataframe 1.介绍&#xff1a; DataFrame也是一个分布式数据容器。然而DataFrame更像传统数据库的二维表 格&#xff0c;除了数据以外&#xff0c;还掌握数据的结构信息&#xff0c;即schema。同时&#xff0c;与Hive类似&#xff0c;DataFrame也支 持…
阅读更多...
gin框架精通篇（二）

gin框架精通篇（二）

原生数据库使用 导入模块&#xff1a;go get -u github.com/go-sql-driver/mysql 安装 mysql 数据库 安装数据库可能遇到的问题&#xff1a;&#xff08;网上的方法基本可以解决&#xff09; ERROR 1045 (28000): Access denied for user ‘-root’‘localhost’ (using passwo…
阅读更多...
HTML 页面布局

HTML 页面布局

慢慢生活&#xff0c;慢慢变好 —— 24.5.28 页面布局 盒子: 页面中所有的元素(标签)&#xff0c;都可以看做是一个盒子&#xff0c;由盒子将页面中的元素包含在一个矩形区域内&#xff0c;通过盒子的视角更方便的进行页面布局 盒子模型组成: 内容区域(content)、内边距区域(pa…
阅读更多...
React中useRef的使用

React中useRef的使用

在 React 中&#xff0c;useRef 是一个钩子&#xff0c;用于返回一个可变的 ref 对象&#xff0c;其 .current 属性被初始化为传递的参数&#xff08;initialValue&#xff09;。这个返回的对象在组件的整个生命周期内保持不变。useRef 可以用来直接访问 DOM 元素或存储任何不会…
阅读更多...
Oracle逻辑备库异构平台支持列表

Oracle逻辑备库异构平台支持列表

关于oracle逻辑备库支持的OS平台列表&#xff0c;以及oracle DG主备版本支持情况&#xff0c;通过参考oracle 官方文档来做个整理总结&#xff0c;希望能帮到大家。 ​一.Oracle逻辑备库异构平台支持列表 oracle DG是否异构是通过platform_id来判断&#xff0c;通过查询v$dat…
阅读更多...
UOS开通22端口用于SSH

UOS开通22端口用于SSH

主机虚拟机能相互ping通&#xff0c;但是mobaxterm等(远程ssh软件)连接不了 原因很有可能是虚拟机未安装SSH服务 检测是否已安装ssh服务&#xff0c;输入以下命令 ssh localhost 如果出现&#xff1a; ssh: connect to host localhost port 22: Connection refused 表明没有…
阅读更多...
数据结构的希尔排序（c语言版）

数据结构的希尔排序（c语言版）

一.希尔排序的概念 1.希尔排序的基本思想 希尔排序是一种基于插入排序算法的优化排序方法。它的基本思想如下: 选择一个增量序列 t1&#xff0c;t2&#xff0c;......&#xff0c;tk&#xff0c;其中 ti > tj, 当 i < j&#xff0c;并且 tk 1。 按增量序列个数k&#…
阅读更多...
Centos安装，window、ubuntus双系统基础上安装Centos安装

Centos安装，window、ubuntus双系统基础上安装Centos安装

文章目录 前言一、准备工作二、开始安装1、2、首先选择DATE&TIME2、选择最小安装3、 选择安装位置 总结 前言 因工作需要&#xff0c;我需要在工控机上额外装Centos7系统&#xff0c;不过我是装在机械硬盘上了不知道对性能是否有影响&#xff0c;若有影响&#xff0c;后面…
阅读更多...
基于C#开发web网页管理系统模板流程-主界面管理员入库和出库功能完善

基于C#开发web网页管理系统模板流程-主界面管理员入库和出库功能完善

前言 紧接上篇->基于C#开发web网页管理系统模板流程-主界面管理员录入和编辑功能完善-CSDN博客 本篇将完善主界面的管理员入库和出库功能&#xff0c;同样的&#xff0c;管理员入库和出库的设计套路适用于动态表的录入和编辑 首先还是介绍一下本项目将要实现的功能 &#xf…
阅读更多...
【sass数据类型简介以及使用方法】

【sass数据类型简介以及使用方法】

Sass&#xff08;Syntactically Awesome Stylesheets&#xff09;是一种CSS预处理器&#xff0c;它允许你使用变量、嵌套规则、混合&#xff08;mixin&#xff09;、函数等功能来编写更易于维护和组织的CSS代码。Sass具有自己的数据类型系统&#xff0c;这些数据类型在编写Sass…
阅读更多...
[Android]项目打包APK时报错PKCS12 keystore not in version 3 format

[Android]项目打包APK时报错PKCS12 keystore not in version 3 format

报错&#xff1a; PKCS12 keystore not in version 3 format Execution failed for task :app:packageRelease. > A failure occurred while executing com.android.build.gradle.tasks.PackageAndroidArtifact$IncrementalSplitterRunnable > com.android.ide.commo…
阅读更多...
如何使用 FastAPI 部署 NLP 模型？

如何使用 FastAPI 部署 NLP 模型？

模型部署是将训练好的自然语言处理模型集成到生产环境中的过程。模型接收输入数据&#xff0c;预测输出。 有多种将 NLP 模型部署到生产环境的方法&#xff0c;包括 Flask、Django、Bottle 等框架。 本文将分享使用 FastAPI 构建和部署 NLP 模型。 在本文中&#xff0c;你将…
阅读更多...
揭开Java序列化的神秘面纱（上）Serializable使用详解

揭开Java序列化的神秘面纱（上）Serializable使用详解

Java序列化(Serialization)作为一项核心技术&#xff0c;在Java应用程序的多个领域都有着广泛的应用。无论是通过网络进行对象传输&#xff0c;还是实现对象的持久化存储&#xff0c;序列化都扮演着关键的角色。然而&#xff0c;这个看似简单的概念蕴含着丰富的原理和用法细节&…
阅读更多...
如何为个人网站部署SSL安全证书，以实现网站的 HTTPS 加密协议访问？

如何为个人网站部署SSL安全证书，以实现网站的 HTTPS 加密协议访问？

哈喽&#xff0c;大家好呀&#xff01;这里是码农后端。完成了域名的备案与解析后&#xff0c;就可以通过域名来访问我们的网站了。本篇将介绍如何为我们的网站部署SSL安全证书&#xff0c;实现网站的 HTTPS 加密协议访问。 1、购买SSL证书 未进行SSL证书部署&#xff0c;访问网…
阅读更多...
数据保存MySQL语法

数据保存MySQL语法

文章目录 一、导包二、链接数据库三、创建操作工具【游标 cursor】四、执行命令1.创建表2.插入数据 五、数据库提交 一、导包 import pymysql二、链接数据库 db pymysql.connect(hostlocalhost,port3306,userroot,passwordroot123,dbpython案例,charsetutf8 )三、创建操作工…
阅读更多...
回答篇二：测试开发高频面试题目

回答篇二：测试开发高频面试题目

引用之前文章&#xff1a;测试开发高频面试题目 本篇文章是回答篇&#xff08;持续更新中&#xff09; 1. 在测试开发中使用哪些自动化测试工具和框架&#xff1f;介绍一下你对其中一个工具或框架的经验。 a. 测试中经常是用的自动化测试工具和框架有Selenium、Pytest、Postman…
阅读更多...
调整表格大小

调整表格大小

方法一&#xff1a;使用鼠标拖动表格边框或右下角的调整控点 在Word文档中&#xff0c;选中要缩小的表格&#xff0c;将鼠标指针放在表格的边框线上&#xff0c;直到指针变成双箭头的形状。 按住鼠标左键&#xff0c;拖动边框线&#xff0c;调整表格的宽度或高度。如果同时按住…
阅读更多...
leetcode328-Odd Even Linked List

leetcode328-Odd Even Linked List

题目 给定单链表的头节点 head &#xff0c;将所有索引为奇数的节点和索引为偶数的节点分别组合在一起&#xff0c;然后返回重新排序的列表。 第一个节点的索引被认为是 奇数 &#xff0c; 第二个节点的索引为 偶数 &#xff0c;以此类推。 请注意&#xff0c;偶数组和奇数组内…
阅读更多...
最新文章

Copyright @ 2022~2023