hi, 大家好, 我是徐小夕, 今天給大家分享一款非常有意思的開(kāi)源組件, 可以實(shí)現(xiàn)我們平時(shí)開(kāi)發(fā)中的滑動(dòng)驗(yàn)證碼需求, 當(dāng)然也是技術(shù)圈小伙伴奮戰(zhàn)了無(wú)數(shù)個(gè)黑夜和白天的結(jié)果, 值得好好推薦一下.

圖片

react-rotate-captcha 是一款開(kāi)箱即用的滑動(dòng)驗(yàn)證碼 React 組件，基于 isszz/rotate-captcha 做的二次開(kāi)發(fā)；結(jié)合了騰訊防水墻，增加安全策略.

具體策略由兩部分組成：

• policie默認(rèn)策略
• rules策略組規(guī)則

策略規(guī)則：

• limit: 上限次數(shù)，達(dá)到峰值后重新驗(yàn)證，0不限制
• time: 使用期限，過(guò)期后重新驗(yàn)證，0不限制
• routers: 匹配要授權(quán)的路由組，null全匹配

這里的路由是指驗(yàn)證通過(guò)后，要執(zhí)行操作的路由，而不是驗(yàn)證操作時(shí)的路由

圖片

原理：

• 驗(yàn)證通過(guò)后將頒發(fā)：sid、ticket
• 執(zhí)行操作時(shí)驗(yàn)證決定是否通過(guò)，通過(guò)就去和執(zhí)行的route進(jìn)行匹配
• 從而避免跨權(quán)，跨范圍執(zhí)行

優(yōu)點(diǎn)：

• 針對(duì)不同應(yīng)用場(chǎng)景提供驗(yàn)證
• 例如登錄驗(yàn)證有效期30分鐘，后臺(tái)操作按次數(shù)進(jìn)行身份驗(yàn)證

后端提供 Laravel 擴(kuò)展：levi/laravel-rotate-captcha ，可直接使用或根據(jù) Api 接口定制.

效果如下:

圖片

設(shè)計(jì)思路

圖片

具體的使用安裝方式如下:

// yarn安裝
yarn add react-rotate-captcha

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

使用方式如下:

// 1. 通過(guò)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. 通過(guò)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>
    );
}

當(dāng)然我們也可以使用 ref 來(lái)實(shí)現(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>
    );
}

基本屬性介紹:

圖片

同時(shí)該組件接受5個(gè)方法，只有 onClose 和 result 是同步函數(shù)，其余全部為異步函數(shù):

圖片

更詳細(xì)的用法大家可以在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 體驗(yàn).