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

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

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

具体策略由两部分组成:

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

策略规则:

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

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

原理:

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

优点:

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

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

效果如下:

设计思路

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

csharp 复制代码
// yarn安装
yarn add react-rotate-captcha

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

使用方式如下:

js 复制代码
// 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 来实现同样的效果:

js 复制代码
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>
    );
}

基本属性介绍:

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

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

github.com/cgfeel/reac...

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

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

更多推荐

相关推荐
腾讯TNTWeb前端团队2 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰5 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪5 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪5 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy6 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom7 小时前
快速开始使用 n8n
后端·面试·github
uhakadotcom7 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom7 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom7 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom7 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试