hi, 大家好, 我是徐小夕, 今天给大家分享一款非常有意思的开源组件, 可以实现我们平时开发中的滑动验证码需求, 当然也是技术圈小伙伴奋战了无数个黑夜和白天的结果, 值得好好推荐一下.
图片
react-rotate-captcha 是一款开箱即用的滑动验证码 React 组件，基于 isszz/rotate-captcha 做的二次开发；结合了腾讯防水墙，增加安全策略.
具体策略由两部分组成：
策略规则：
这里的路由是指验证通过后，要执行操作的路由，而不是验证操作时的路由
图片
原理：
优点：
后端提供 Laravel 扩展：levi/laravel-rotate-captcha ，可直接使用或根据 Api 接口定制.
效果如下:
图片
图片
具体的使用安装方式如下:
// 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> );}基本属性介绍:
图片
同时该组件接受5个方法，只有 onClose 和 result 是同步函数，其余全部为异步函数:
图片
更详细的用法大家可以在github上学习参考:
https://github.com/cgfeel/react-rotate-captcha
demo 目前提供了 webpack 和 vite 版本的, 可以在: https://codesandbox.io/p/devbox/react-rotate-captcha-ts-react-vite-t23lcq 体验.
本文链接：http://www.28at.com/showinfo-26-39506-0.html一款小而美的开源滑动验证码组件
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号