当前位置：首页 > news >正文

前端 React 弹窗式滑动验证码实现

news 来源：原创 2025/8/28 9:11:46

一、安装依赖

1、rc-slider-captcha

2、create-puzzle

二、个人封装好的组件拿去用

三、效果展示

一、安装依赖

这里需要引入两个依赖，若有后端图片接入，可以不引入第二个依赖

1、rc-slider-captcha

滑动验证码生成的库

国内网：rc-slider-captcha - npm

外网演示：https://caijf.github.io/rc-slider-captcha

yarn add rc-slider-captcha

2、create-puzzle

这个库可以让图片生成拼图

地址：create-puzzle - npm

yarn add create-puzzle

二、个人封装好的组件拿去用

注意：引入的图片尺寸需要对应，否则可能出现比例问题。

280 x 173

/*** @author: Dragon Wu* @since: 2025/4/10 17:40* @description: 弹窗显示滑动验证码*/import React, {useRef} from "react";
import SliderCaptcha from "rc-slider-captcha";
import {Modal} from "antd";
// 引入生成拼图的库
import createPuzzle from "create-puzzle";export type Result = {bgUrl: string;          // 背景图puzzleUrl: string;      // 拼图x?: number;              // x 轴偏移值。如果使用该值校验，建议前后阈值增减 5 的范围y?: number;             // y 轴偏移值，等高拼图时值始终为 0
};const ModalSliderCaptcha: React.FC<{open: boolean,                                  // 是否打开onCancel: () => void,                           // 关闭时调用range?: number,                                 // 误差范围format?: "dataURL" | "blob",                    // 拼图库format类型，默认dataURL即base64格式onVerify?: (data?: Result) => void | boolean    // 是否校验成功。非后端验证模式下，data存在代表成功，data为空代表失败request?: () => Promise<undefined | Result>     // 请求后端验证码参数modalProps?: {},                                // Modal组件的属性，见：https://ant.design/components/modal-cn#apisliderCaptchaProps?: {},                        // SliderCaptcha的属性，详情见：https://www.npmjs.com/package/rc-slider-captcha
}> = React.memo(({modalProps, sliderCaptchaProps, open, onCancel,format = "dataURL", range = 5, onVerify, request}) => {const offsetXRef = useRef(0)    // x 轴偏移值const handleOffsetX = (res?: Result) => {offsetXRef.current = res?.x ?? 0return {bgUrl: res?.bgUrl,puzzleUrl: res?.puzzleUrl}}const requestCaptcha = async () => {if (request) {return request().then(handleOffsetX)} else {return createPuzzle("/assets/img/source/captcha-bg.png", {format,width: 60,height: 60,bgWidth: 280,bgHeight: 173,quality: 1.0,       // 图片质量，默认0.8}).then(handleOffsetX)}}const onVerifyCaptcha = (data?: Result) => {if (request) {// 后端验证码模式下if (onVerify) {if (onVerify(data)) {// 后端校验通过，验证成功return Promise.resolve()}}} else {// 非后端验证模式下if (data?.x && data?.x >= offsetXRef.current - range && data?.x < offsetXRef.current + range) {if (onVerify) {onVerify(data)}return Promise.resolve()}if (onVerify) {onVerify()}}return Promise.reject()}return (<Modal {...{title: "安全验证",zIndex: 1024,style: {maxWidth: "100%",},styles: {content: {padding: 20}},centered: true,width: 320,footer: false,...modalProps}}onCancel={onCancel}open={open}><SliderCaptcha request={requestCaptcha as any}onVerify={onVerifyCaptcha as any}bgSize={{width: 280,height: 173}}tipText={{default: "向右👉拖动完成拼图",loading: "👩🏻‍💻🧑‍💻努力中...",}}style={{"--rcsc-primary": "#6153FC","--rcsc-primary-light": "#efecfc",}}loadingDelay={300}{...sliderCaptchaProps}/></Modal>)
});ModalSliderCaptcha.displayName = "ModalSliderCaptcha";export default ModalSliderCaptcha;

三、效果展示

将组件放在自己的其他组件上，通过Antd Modal的open属性来控制开关，点击按钮实现弹窗滑块验证码功能。后续，将加入如何用SpringBoot来实现滑块验证码图片生成，以完成前后端滑动验证码功能。

前端部分总结到此！

前端 React 弹窗式滑动验证码实现

目录一、安装依赖 1、rc-slider-captcha 2、create-puzzle 二、个人封装好的组件拿去用三、效果展示一、安装依赖这里需要引入两个依赖，若有后端图片接入，可以不引入第二个依赖 1、rc-slider-captcha 滑动验证码生成的库国内网&#xff1a…...

编程日记 2025/8/28 9:11:46

【触想智能】工业触摸一体机在金融智能设备领域上应用的优势

工业触摸一体机在金融智能设备领域上具有许多独特的优势。这些设备结合了工业级的强度和耐用性，以及先进的触控技术和高性能处理能力，为金融机构提供全面可靠的解决方案。下面将介绍工业触摸一体机在金融智能设备领域上的应用优势。触想嵌入式工业触摸一…...

编程日记 2025/8/26 7:04:12

本地实现Rtsp视频流推送

简言：使用ffmpeg实现本地视频流推送 srs存储（延时推送） 准备工作安装包： ffmpeg：http://ffmpeg.org/download.html EasyDarwin：EasyDarwin流媒体音视频资源汇总 srs安装教程地址：http://…...

编程日记 2025/8/28 5:03:33

人工智能中的卷积神经网络（CNN）综述

文章目录前言 1. CNN的基本原理 1.1 卷积层 1.2 池化层 1.3 全连接层 2. CNN的发展历程 2.1 LeNet-5 2.2 AlexNet 2.3 VGGNet 2.4 ResNet 3. CNN的主要应用 3.1 图像分类 3.2 目标检测 3.3 语义分割 3.4 自然语言处理 4. 未来研究方向 4.1 模型压缩与加速 4.2 自监督学习 4.3 …...

编程日记 2025/8/28 15:51:52

Mac电脑交叉编译iphone设备可以运行的redsocks, openssl, libsevent

准备：intel x86_64芯片的mac电脑，系统为mac os15.3.1，iphone为6s的ios14.4(rootful越狱) 第一步：准备工具链（推荐使用 theos clang） 如果你已经安装过 Theos（或 NewTheos）&#x…...

编程日记 2025/8/28 15:52:18

入门51单片机(1)-----点灯大师梦开始的地方

前言这一次的博客主要是要记录一下学习的记录的,方便以后去复习一下的，当然这篇博客还是针于零基础的伙伴萌，看完这篇博客，大家就可以学会点灯了。安装软件方法一下一下来教！！萌新宝贝萌可以学会的！帮…...

编程日记 2025/8/28 15:52:17

[1-01-09].第08节：基础语法 - 数组常见算法 + Arrays工具类 + 数组中常见异常

一、数组的常见算法 1.1 数值型数组特征值统计这里的特征值涉及到：平均值、最大值、最小值、总和等 **举例1：**数组统计：求总和、均值 public class TestArrayElementSum {public static void main(String[] args) {int[] arr {4,5,6,…...

编程日记 2025/8/28 15:51:53

dnf install openssl失败的原因和解决办法

网上有很多编译OpenSSL源码(3.x版本)为RPM包的文章，这些文章在安装RPM包时都是执行rpm -ivh openssl-xxx.rpm --nodeps --force 这个命令能在缺少依赖包的情况下能强行执行安装其实根据Centos的文档，安装RPM包一般是执行yum install或dnf install。后者…...

编程日记 2025/8/28 15:54:08

UE5 Chaos ：官方文献总结 + 渲染网格体 (Render Mesh）和模拟网格体是如何关联的？为什么模拟网格体可以驱动渲染网格体？

官方文献：https://dev.epicgames.com/community/learning/tutorials/pv7x/unreal-engine-panel-cloth-editor 1. 流程概述本文档介绍了如何通过面板编辑器（Panel Editor）在Unreal Engine中生成基于面板的布料资源。流程主要包含从Marvelou…...

编程日记 2025/8/20 22:58:57

Swift观察机制新突破：如何用AsyncSequence实现原子化数据监听？

网罗开发 （小红书、快手、视频号同名） 大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、Harmony OS、Java、Python等…...

编程日记 2025/8/28 15:55:31

Lombok库

文章目录 Lombok1.介绍2.主要注解2.1如何使用 Lombok2.1.1添加依赖2.1.2 使用Lombok注解2.1.3Lombok的其他常用注解ValueBuilderGoF23种设计模式之一：建造模式使用Builder注解自动生成建造模式的代码 SingularSlf4j使用选择合适的注解 Lombok 1.介绍 Lombok 是一个…...

编程日记 2025/8/28 5:05:08

算法思想之模拟

欢迎拜访：雾里看山-CSDN博客本篇主题：算法思想之模拟发布时间：2025.4.14 隶属专栏：算法目录滑动窗口算法介绍核心特点常见问题优化方向例题替换所有的问号题目链接题目描述算法思路代码实现提莫攻击题目链接题目描述算法思路…...

编程日记 2025/8/28 15:54:07

Windows 系统如何使用Redis 服务

前言在学习过程中，我们长期接触到的是Mysql 关系型数据库，也是够我们平时练习项目用的，但是后面肯定会有大型数据的访问就要借助新的新的工具。一、什么是Redis Redis（Remote Dictionary Server）是一个基于内存的键…...

编程日记 2025/8/28 15:54:07

2025年常见渗透测试面试题-红队面试宝典上（题目+回答）

网络安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。目录一、如何判断是否是域环境？ 二、定位域控的 IP 三、定位域管所在机器四、Kerberos 核心…...

编程日记 2025/8/28 15:54:34

Base64在线编码解码 - 加菲工具

Base64在线编码解码 - 加菲工具打开网站加菲工具选择“Base64 在线编码解码” 或者直接打开https://www.orcc.top/tools/base64 输入需要编码/解码的内容，点击“编码”/“解码”按钮编码： 解码： 复制已经编码/解码后的内容。...

编程日记 2025/8/28 15:57:06

前端面试宝典---闭包

闭包介绍使用闭包： 在函数内声明一个变量，避免外部访问在该函数内再声明一个函数访问上述变量（闭包）返回函数内部的函数使用完毕建议闭包函数null;译放内存 function createCounter() {let count 0;return function () {coun…...

编程日记 2025/8/28 10:23:30

算法：有一个整数数组，长度为n。她希望通过一系列操作将数组变成一个回文数组。

小红有一个整数数组，长度为n。她希望通过一系列操作将数组变成一个回文数组。每次操作可以选择数组中任意两个相邻的元素 ai和 ai1，将它们的值同时加一。请你计算至少需要多少次操作使得数组变成一个回文数组。如果不可能，则输出-1。否则输出…...

编程日记 2025/8/28 12:38:30

数字人：开启医疗领域的智慧变革新时代（5/10）

摘要：数字人技术作为医疗变革的基石，通过多学科融合实现虚拟医生、手术模拟、医学教育等多元应用，贯穿诊前、术中、术后全流程，显著提升医疗效率、优化资源分配、推动个性化服务。尽管面临技术、伦理、数据安全等挑战，…...

编程日记 2025/8/28 15:56:52

正则表达式在线校验(RegExp) - 加菲工具

正则表达式在线校验 - 加菲工具打开网站加菲工具选择“正则表达式在线校验” 或者直接打开https://www.orcc.top/tools/regexp 输入待校验的源文本与正则表达式，点击“校验”按钮需要注意检验后的内容可能存在多空格，可以拉下去看看~...

编程日记 2025/8/28 15:53:20

某车企面试备忘

记录两个关于Binder的问题，我感觉面试官提的非常好，作一下备忘。 1.通过Binder进行的IPC（进程间通信）是线程阻塞的吗？ 参考答案： Binder是Android平台的一种跨进程通信（IPC）机制&…...

编程日记 2025/8/28 15:51:54

从Ampere到Hopper：GPU架构演进对AI模型训练的颠覆性影响

一、GPU架构演进的底层逻辑 AI大模型训练效率的提升始终与GPU架构的迭代深度绑定。从Ampere到Hopper的演进路径中，英伟达通过‌张量核心升级‌、‌显存架构优化‌、‌计算范式革新‌三大技术路线，将LLM（大语言模型）训练效率提升至…...

编程日记 2025/8/28 3:29:25

【JavaEE】SpringBoot 统一功能处理

目录一、拦截器1.1 使用1.1 定义拦截器1.2 注册配置拦截器 1.2 拦截器详解1.2.1 拦截路径1.2.2 拦截器执⾏流程 1.3 适配器模式二、统一数据返回格式2.1 简单用法2.2 问题及解决三、统一异常处理一、拦截器拦截器：拦截器是Spring框架提供的核⼼功能之⼀&#…...

编程日记 2025/8/28 15:56:52

杨辉三角(力扣 118)

118. 杨辉三角 - 力扣（LeetCode） 示例 1: 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]]示例 2: 输入: numRows 1 输出: [[1]] vector<vector<int>> generate(int numRows) { //生成有numRows个元素(vector<in…...

编程日记 2025/8/28 15:53:21

三周年创作纪念日

文章目录回顾与收获三年收获的五个维度未来的展望致谢与呼唤亲爱的社区朋友们，大家好！ 今天是 2025 年 4 月 14 日，距离我在 2022 年 4 月 14 日发布第一篇技术博客《SonarQube 部署》整整 1,095 天。在这条创作之路上，我既感慨…...

编程日记 2025/8/27 19:53:17

[c语言日记]轮转数组算法（力扣189）

【作者主页】siy2333 【专栏介绍】⌈c语言日寄⌋：这是一个专注于C语言刷题的专栏，精选题目，搭配详细题解、拓展算法。从基础语法到复杂算法，题目涉及的知识点全面覆盖，助力你系统提升。无论你是初学者，还是…...

编程日记 2025/8/28 15:55:32

【Unity笔记】Unity超时检测器开发：支持自定义重试次数与事件触发

在Unity游戏或应用开发中，我们经常会遇到需要检测超时的场景，比如： 等待用户在限定时间内完成某个交互；等待网络请求或资源加载是否在规定时间内返回；控制AI角色等待某个事件发生，超时后执行备选逻辑。在…...

编程日记 2025/8/28 15:54:32

【微服务管理】注册中心：分布式系统的基石

在分布式系统日益普及的当下，如何高效地管理众多服务实例成为关键问题。注册中心应运而生，它犹如分布式系统的 “指挥中枢”，承担着服务注册、发现等核心任务，为整个系统的稳定运行和高效协作提供坚实保障。本文将深入探讨注册中心…...

编程日记 2025/8/28 15:56:53

P10413 [蓝桥杯 2023 国 A] 圆上的连线

题意： 给定一个圆，圆上有 n2023 个点从 1 到 n 依次编号。问有多少种不同的连线方式，使得完全没有连线相交。当两个方案连线的数量不同或任何一个点连接的点在另一个方案中编号不同时，两个方案视为不同。答案可能很大&#x…...

编程日记 2025/8/28 15:55:32

计算机操作系统——存储器管理

系列文章目录 1.存储器的层次结构 2.程序的装入和链接 3.连续分配存储管理方式（内存够用） 4.对换（Swapping）(内存不够用) 5.分页存储管理方式 6.分段存储管理方式文章目录系列文章目录前言一、存储器的存储结构寄存器&…...

编程日记 2025/8/28 15:54:33

TCPIP详解卷1协议四地址解析协议

4.1——地址解析协议(ARP) 对于TCP/IP网络，地址解析协议（ARP）[RFC0826]提供了一种在IPv4地址和各种网络技术使用的硬件地址之间的映射。ARP仅用于IPv4。IPv6使用邻居发现协议，它被合并入ICMPv6。当两个局域网的主机之间传输的以太…...

编程日记 2025/8/28 9:53:35

履带小车+六轴机械臂（2）

本次介绍原理图部分开发板部分，电源供电部分，六路舵机，PS2手柄接收器，HC-05蓝牙模块，蜂鸣器，串口，TB6612电机驱动模块，LDO线性稳压电路，按键部分 1、开发板部分需要注…...

编程日记 2025/8/28 15:52:18

耘想WinNAS：以聊天交互重构NAS生态，开启AI时代的存储革命

一、传统NAS的交互困境与范式瓶颈在传统NAS（网络附加存储）领域，用户需通过复杂的图形界面或命令行工具完成文件管理、权限配置、数据检索等操作，学习成本高且效率低下。例如，用户若需搜索特定文件，需手动…...

编程日记 2025/8/28 12:26:55

如何通过自动化解决方案提升企业运营效率？

引言在现代企业中，运营效率直接影响着企业的成本、速度与竞争力。尤其是随着科技的不断发展，传统手工操作和低效的流程逐渐无法满足企业的需求。自动化解决方案正成为企业提升运营效率、降低成本和提高生产力的关键。无论是大型跨国公司，还…...

编程日记 2025/8/27 19:05:38

【笔记ing】AI大模型-03深度学习基础理论

神经网络：A neural network is a network or circuit of neurons,or in a modern sense,an artificial neural network,composed of artificial neurons or nodes.神经网络是神经元的网络或回路，或者在现在意义上来说，是一个由人工神经元或节…...

编程日记 2025/8/28 15:55:31

Spring-注解编程

注解基础概念 1.什么是注解编程指的是在类或者方法上加入特定的注解(XXX) 完成特定功能的开发 Component public classXXX{} 2.为什么要讲注解编程 1.注解开发方便代码简洁开发速度大大提高 2.Spring开发潮流 Spring2.x引入注解 Spring3.x完善注解 Springboot普及推广注解…...

编程日记 2025/8/28 15:53:22

大数据学习栈记——MongoDB安装

本文介绍NoSQL技术：MongoDB的安装。操作系统：Ubuntu24.04 MongoDB介绍 MongoDB是一个基于分布式文件存储的数据库，由C语言编写，旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB是一个介于关系数据库和非关系数据库之…...

编程日记 2025/8/27 18:53:13

linux 系统编程基础部分 day1

常用指令创建修改用户组查看当前用户组：whoami 创建用户 sudo adduser 用户 sudo addgroup 组名添加权限：chmod [u,g,o,a][x,w,r] 数字表示法r4 w2 x1 chmod 471 每个权限种类想加给文件换所属用户 chown 新用户名文件名 chgrp …...

编程日记 2025/8/27 11:00:19

访问不到服务器上启动的llamafactory-cli webui

采用SSH端口转发有效，在Windows上面进行访问在服务器上启动 llamafactory-cli webui 后，访问方式需根据服务器类型和网络环境选择以下方案： 一、本地服务器（物理机/虚拟机） 1. 直接访问若服务器与操作设备处于同一…...

编程日记 2025/8/27 0:38:44

论文阅读笔记——Generating Long Sequences with Sparse Transformers

Sparse Transformer 论文解决了 Transformer 在长序列建模时的计算开销和内存过大的问题。可视化了一个 128 层自注意力在 CIFAR-10 的数据集上学习到的注意力模式，发现：1）稀疏性普遍存在：大多数层在多数数据点上表现出稀疏注意…...

编程日记 2025/8/28 12:06:27

【信息系统项目管理师】高分论文：论信息系统项目的整合管理（旅游景区导游管理平台）

更多内容请见：备考信息系统项目管理师-专栏介绍和目录文章目录论文一、制定项目章程二、制订项目管理计划三、指导和管理项目工作四、管理项目知识五、监控项目工作六、实施整体变更控制七、结束项目或阶段论文在国家《中国旅游“十三五”发展规划信息化专项规划的背景下…...

编程日记 2025/8/26 18:08:39

C++ 用红黑树封装map/set

前言一、源码结构分析二、模拟实现map/set 2.1 套上KeyOfT 2.2 普通迭代器实现 2.3 const迭代器实现 2.4 解决key不能修改的问题 2.5 map的[]实现 2.6 map/set以及红黑树源码 2.6.1 RBTree.h 2.6.2 set.h 2.6.3 map.h 总结前言之前的文章讲解了红黑树的具体实…...

编程日记 2025/8/26 18:44:26

VirtualBox虚拟机与主机之间无法复制粘贴的问题

插入出现问题，需要把其他的dvd弹出，比如系统安装镜像。 https://www.cnblogs.com/jianmuzi/p/17788084.html...

编程日记 2025/8/28 5:08:21

【HDFS入门】HDFS核心组件Secondary NameNode角色职责与运行机制解析

目录 1 Secondary NameNode的角色定位与常见误解 2 核心职责详解 2.1 核心功能职责 2.2 与NameNode的协作关系 3 运行机制深度剖析 3.1 检查点触发机制 3.2 元数据合并流程 4 与Hadoop 2.0 HA架构的对比 5 配置调优指南 5.1 关键配置参数 5.2 性能优化建议 6 实践应…...

编程日记 2025/8/25 5:26:12

AI知识补全（十六）：A2A - 谷歌开源的agent通信协议是什么？

名人说：一笑出门去，千里落花风。——辛弃疾《水调歌头我饮不须劝》创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 上一篇：AI知识补全（十五）：AI可解…...

编程日记 2025/8/25 3:27:57

OOM问题排查和解决

问题 java.lang.OutOfMemoryError: Java heap space 排查排查手段 jmap命令 jmap -dump,formatb,file<file-path> <pid> 比如 jmap -dump:formatb,file./heap.hprof 44532 使用JVisualVM工具： JVisualVM是一个图形界面工具，它可以帮…...

编程日记 2025/8/24 5:50:44

黑马头条day01

1)课程对比 2)项目概述 2.1)能让你收获什么 2.2)项目课程大纲 2.3)项目概述随着智能手机的普及，人们更加习惯于通过手机来看新闻。由于生活节奏的加快，很多人只能利用碎片时间来获取信息，因此，对于移动资讯客户端的需求也越来越…...

编程日记 2025/8/23 21:03:48

关于IDEA中使用ctrl跳转源码出现???的解决方案

最近在学习大数据相关课程的时候使用ctrl查看源码时出现源码是问号的情况。写一篇博客来分享一下自己的解决方案： 但我使用ctrl查看源码的时候具体函数的细节使用???来代替，而且点击上方的Download按钮没有反应，这个时候我们需要手动指定…...

编程日记 2025/8/27 11:44:01

第三方API——Spring Boot 集成阿里云短信发送功能

目录一. 创建阿里云OSS服务并获取密钥，开通短信服务 1.1 注册阿里云服务器 1.2 开通短信服务 1.3 创建对象存储OSS服务 1.4 RAM用户授权短信权限 1.5 新增用户并授权用户短信权限 1.6 获取 AccessKey ID 和 AccessKey Secret 二. 创建项目集成短信发送 2.1…...

编程日记 2025/8/28 15:27:53

【C++】前向声明（Forward Declaration）

前向声明（Forward Declaration）是在C、C等编程语言中，在使用一个类、结构体或其他类型之前，仅声明其名称而不给出完整定义的一种方式。作用减少编译依赖：当一个源文件包含大量头文件时，编译时间会显著增…...

编程日记 2025/8/26 9:46:50

Golang｜抽奖相关

文章目录抽奖核心算法生成抽奖大转盘抽奖接口实现抽奖核心算法我们可以根据单商品库存量/总商品库存量得到每个商品被抽中的概率，可以想象这样一条 0-1 的数轴，数轴上的每一段相当于一种商品，概率之和为1。抽奖时，我们会生…...

编程日记 2025/8/25 1:16:47

一、安装依赖

1、rc-slider-captcha

2、create-puzzle

二、个人封装好的组件拿去用

三、效果展示

相关文章：