开源的旋转验证码库

前后端全开源的旋转验证码解决方案，结合腾讯防水墙设计了安全策略。开箱即用，无需复杂的配置即可实现旋转验证码；并提供物料、接口、开发设计用于私有化定制。可用于行为检测，诸如：短信验证行为检测、授权信息行为检测等场景。

✨ 特性：

• 开箱即用，前后端完全开源
• Typescript开发，也可用于普通的 JavaScript
• 支持多语言
• 支持多主题
• 支持私有化定制
• 提供验证图片定期更新的解决方案
• 提供跨域解决方案
• 支持安全策略鉴权行为

🎙️ 演示 (Demo)

以下演示全部都一样，分别展示了多主题，多语言、多个唤起方式；在不同的环境下的演示，可根据自己的情况选择一个环境查看演示和演示的代码

• CodeSondbox：Webpack+TS+React [查看]
• CodeSondbox：Webpack+JS+React [查看]
• CodeSondbox：Vite+TS+React [查看]
• Stackblitz：ts+react [查看]

视频演示：

1701247930163032.mp4

📦 安装 (Installing)

Using NPM

npm install react-rotate-captcha

Using Yarn

yarn add react-rotate-captcha

Using PNPM

pnpm add react-rotate-captcha

🔨 使用 (Usage)

通过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)} />
}

通过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>
    );
}

后端部分见Laravel扩展：levi/laravel-rotate-captcha [查看]

🛟 设计思路 (Design)

UA和图片路径部分可以通过header拼合的方式二次加密，支持私有化定制。

✂️ 物料 (Material)

即时设计的向量稿件，包含组件设计规范：查看

🔗 包含的产品 (Product)

• react-rotate-captcha：React前端开源库 [查看]
• laravel-rotate-captcha：Laravel后端扩展 [查看]
• 即时设计物料：向量稿，提供设计规范 [查看]