一款小而美的开源滑动验证码组件

简介: 一款小而美的开源滑动验证码组件

hi, 大家好, 我是徐小夕, 今天给大家分享一款非常有意思的开源组件, 可以实现我们平时开发中的滑动验证码需求, 当然也是技术圈小伙伴奋战了无数个黑夜和白天的结果, 值得好好推荐一下.

image.png

react-rotate-captcha 是一款开箱即用的滑动验证码 React 组件,基于 isszz/rotate-captcha 做的二次开发;结合了腾讯防水墙,增加安全策略.

具体策略由两部分组成:

  • policie默认策略
  • rules策略组规则

策略规则:

  • limit: 上限次数,达到峰值后重新验证,0不限制
  • time: 使用期限,过期后重新验证,0不限制
  • routers: 匹配要授权的路由组,null全匹配

这里的路由是指验证通过后,要执行操作的路由,而不是验证操作时的路由

image.png

原理:

  • 验证通过后将颁发:sid、ticket
  • 执行操作时验证决定是否通过,通过就去和执行的route进行匹配
  • 从而避免跨权,跨范围执行

优点:

  • 针对不同应用场景提供验证
  • 例如登录验证有效期30分钟,后台操作按次数进行身份验证

后端提供 Laravel 扩展:levi/laravel-rotate-captcha ,可直接使用或根据 Api 接口定制.

效果如下:

image.png

设计思路

image.png

image.png

具体的使用安装方式如下:

// yarn安装
yarn add react-rotate-captcha
// pnpm安装
pnpm add react-rotate-captcha

使用方式如下:

// 1. 通过status唤起
import { useState } from 'react';
import RotateCaptcha from "react-rotate-captcha";
function App() {
    const [open, setOpen] = useState(true);
    return <RotateCaptcha open={open} onClose={() => setOpen(false)} />
}
// 2. 通过Instance唤起
import RotateCaptcha from "react-rotate-captcha";
function Page() {
    const captcha = RotateCaptcha.useCaptchaInstance();
    return (
        <button onClick={() => captcha.open()}>click it</button>
    );
}
function App() {
    return (
        <RotateCaptcha>
            <Page />
        </RotateCaptcha>
    );
}

当然我们也可以使用 ref 来实现同样的效果:

import { useRef } from 'react';
import RotateCaptcha, { CaptchaInstance } from "react-rotate-captcha";
function App() {
    const ref = useRef<CaptchaInstance>(null);
    return (
        <RotateCaptcha ref={ref}>
            <button onClick={() => ref.current!.open()}>click it</button>
        </RotateCaptcha>
    );
}

基本属性介绍:

image.png

同时该组件接受5个方法,只有 onCloseresult 是同步函数,其余全部为异步函数:

image.png

更详细的用法大家可以在github上学习参考:

github.com/cgfeel/reac…

demo 目前提供了 webpackvite 版本的, 可以在: codesandbox.io/p/devbox/re… 体验.

如果大家觉得不错, 欢迎点赞反馈, 不辜负每一位开源贡献者的努力, 让技术更美好~


目录
相关文章
|
小程序
小程序wx.switchTab的跳转传参问题
小程序wx.switchTab的跳转传参问题
418 0
|
12月前
针对react-captcha-code第三方插件不能每次触发深颜色的处理
针对`react-captcha-code`插件生成浅色验证码的问题,通过改造成class组件`MyCaptcha.js`,自定义颜色和验证码生成逻辑,解决了颜色问题。
147 1
针对react-captcha-code第三方插件不能每次触发深颜色的处理
|
8月前
|
人工智能 自然语言处理 API
阿里云百炼xWaytoAGI共学课DAY1 - 必须了解的企业级AI应用开发知识点
本课程旨在介绍阿里云百炼大模型平台的核心功能和应用场景,帮助开发者和技术小白快速上手,体验AI的强大能力,并探索企业级AI应用开发的可能性。
2516 85
|
11月前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
1496 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
|
容器
Vue3弹出确认(Popconfirm)
这是一个基于Vue3的弹出确认框组件(Popconfirm),提供了丰富的自定义选项和事件处理功能。组件支持设置标题、描述、按钮文本及样式等,并可通过slot进行自定义内容。
458 1
Vue3弹出确认(Popconfirm)
|
Java 开发者 索引
Java List全攻略:从ArrayList到LinkedList,一网打尽!
【6月更文挑战第17天】Java List详解:ArrayList依赖动态数组,擅长随机访问和遍历,适合少次插入删除;LinkedList基于双向链表,插入删除高效,尤其在头尾操作,但随机访问慢。选择取决于应用场景,理解特性以优化代码。探索ArrayList与LinkedList,提升编程效率!
158 0
|
小程序
微信小程序调试、断点调试
微信小程序调试、断点调试
604 0
|
算法 测试技术 开发工具
【软件设计师备考 专题 】系统设计基础:从总体到详细
【软件设计师备考 专题 】系统设计基础:从总体到详细
465 0
|
网络协议 Linux 网络安全
linux服务器防火墙的开启及关闭
linux服务器防火墙的开启及关闭
1545 1