一款小而美的開源滑動驗證碼組件
作者：徐小夕
react-rotate-captcha? 是一款開箱即用的滑動驗證碼 React? 組件，基于 isszz/rotate-captcha 做的二次開發(fā)；結(jié)合了騰訊防水墻，增加安全策略.
hi, 大家好, 我是徐小夕, 今天給大家分享一款非常有意思的開源組件, 可以實現(xiàn)我們平時開發(fā)中的滑動驗證碼需求, 當然也是技術(shù)圈小伙伴奮戰(zhàn)了無數(shù)個黑夜和白天的結(jié)果, 值得好好推薦一下.
圖片
react-rotate-captcha 是一款開箱即用的滑動驗證碼 React 組件，基于 isszz/rotate-captcha 做的二次開發(fā)；結(jié)合了騰訊防水墻，增加安全策略.
具體策略由兩部分組成：
- policie默認策略
- rules策略組規(guī)則
策略規(guī)則：
- limit: 上限次數(shù)，達到峰值后重新驗證，0不限制
- time: 使用期限，過期后重新驗證，0不限制
- routers: 匹配要授權(quán)的路由組，null全匹配
這里的路由是指驗證通過后，要執(zhí)行操作的路由，而不是驗證操作時的路由
圖片
原理：
- 驗證通過后將頒發(fā)：sid、ticket
- 執(zhí)行操作時驗證決定是否通過，通過就去和執(zhí)行的route進行匹配
- 從而避免跨權(quán)，跨范圍執(zhí)行
優(yōu)點：
- 針對不同應(yīng)用場景提供驗證
- 例如登錄驗證有效期30分鐘，后臺操作按次數(shù)進行身份驗證
后端提供 Laravel 擴展：levi/laravel-rotate-captcha ，可直接使用或根據(jù) Api 接口定制.
效果如下:
圖片
設(shè)計思路
圖片
具體的使用安裝方式如下:
// 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 來實現(xiàn)同樣的效果:
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 是同步函數(shù)，其余全部為異步函數(shù):
圖片
更詳細的用法大家可以在github上學(xué)習(xí)參考:
https://github.com/cgfeel/react-rotate-captcha
demo 目前提供了 webpack 和 vite 版本的, 可以在: https://codesandbox.io/p/devbox/react-rotate-captcha-ts-react-vite-t23lcq 體驗.
責任編輯：武曉燕
來源：
趣談前端
