一个开箱即用的滑动验证码React组件，基于[isszz/rotate-captcha]做的二次开发；结合了腾讯防水墙，增加安全策略，查看：设计思路

后端提供Laravel扩展：levi/laravel-rotate-captcha [查看]，可直接使用或参考下方Api接口定制

🎙️ 演示 (Demo)

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

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

视频演示：

https://github.com/cgfeel/laravel-rotate-captcha/assets/578141/afa169d1-05c3-43d6-b7e7-cabaa8c5dbc5

📦 安装 (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>
    );
}

更多请见下方Api

📍 参数 (Props)

Captcha Props

| 参数 | 说明 | 类型 | 默认值 | | ----- | ----- | ----- | ----- | | className | 验证浮窗顶层样式名，用于覆盖默认主题样式 | string | - | | close | 自定义关闭按钮，设置null屏蔽按钮 | ReactNode │ null | - | | lang | 语言，默认提供en和zh_CN，接受传入LangType对象自定义语言 | LangType │ string | zh_CN | | limit | 试错次数，需要和服务端设置一致 | number | 2 | | mask | 自定义背景层，设置null屏蔽背景层 | ReactNode │ null | - | | open | true打开验证码，否则关闭 | boolean | - | | tips | 自定义底部提示 | ReactNode | - | | theme | 提供两个主体dark和light，自定义主题通过自定义样式变量 | string | light | | zIndex | 浮窗样式层级 | number | 999 |

• 主题样式变量请参考样式源文件：[查看]
• LangType类型：[查看]

Captcha Event Props

接受5个方法，只有onClose和result是同步函数，其余全部为异步函数

| 参数 | 说明 | 参数 | 返回值 | | ----- | ----- | ----- | ----- | | get | 初始获取验证码信息 | - | Promise<resultType<tokenType>> | | load | 提取tokenType中的str去换图片，返回图片URL路径或图片base64字符 | path: string | Promise<string> | | onClose | 关闭浮窗触发，以status唤起的验证，必须提供onClose来关闭 | - | void | | result | 提取正确或错误的票据结果，可选，也可以通过verify直接获取结果 | info: resultType<ticketType> | void | | verify | 滚动验证，返回票据信息 | token: string，deg: number | Promise<resultType<ticketType>> |

• Captcha数据类型：[查看]
• 请通过下方提供的Api接口，自行获取验证数据，组件内部不提供数据获取

Captcha Instance

通过ref或useCaptchaInstance返回的Captcha实例，接受3个方法，所有方法都返回void，具体如下：

| 参数 | 说明 | 参数 | | ----- | ----- | ----- | | close | 关闭浮窗，参数force默认值false，设为true将强制销毁验证浮窗 | force?: boolean | | open | 打开浮窗 | - | | reload | 重新获取验证码图片 | - |

• 通过status唤起的验证，不支持强制销毁

CaptchaContext

通过useContent提供上下文CaptchaContext，方便自定义提示栏：

CurrentlyType: [0|1|2|3|4, string, boolean?]，验证状态：

• 状态：0.正确; 1.错误; 2.待获取; 3.待提交; 4.提交中
• 提示信息
• 是否强制停止流程，例如初始信息加载失败

LangType使用的语言：[查看]

captcha，Captcha实例，如果只获取实例建议通过ref或useCaptchaInstance

🎯 接口 (Api)

这里以开源的levi/laravel-rotate-captcha（查看）举例，提供了5个接口（查看），请求参数和返回数据如下：

获取验证码信息

• URL: /rotate.captcha
• method: GET
• response: { code: 0|1; msg: string; data: { ${str}: string } }
• res header: X-Captchatoken: ${token}

str换image

• URL: /rotate.captcha/${str}
• method: GET
• response: image url or base64

验证信息，token换ticket

• URL: /rotate.captcha/verify/${angle}/${token?}
• method: GET
• response: { code: 0|1|2; msg: string; data?: { ${sid}: string; ${ticket}: string; } }
• req header: X-Captchatoken: ${token}

URL中或req header中的，至少有一处提供${token?}

鉴权测试，请根据实际情况替换鉴权接口

• URL: /rotate.captcha/test/action
• method: GET|POST
• response: { code: 0|1|2; msg: string; }
• req header: X-Captchasid: ${sid}; X-Captchaticket: ${ticket}; X-Captchapolicie?: ${police}

请求可以通过header或POST formData或POST raw提交；安全策略police根据服务器配置决定是否提交

自定义获取验证信息

当需要匹配不同尺寸的设备时，或者一些老的设备不支持webp的情况下，通过这个接口获取定制的验证图片

• URL: /rotate.captcha
• method: POST
• formData: { size?: number; output?: 'jpg'|'png'|'webp' }
• response: { code: 0|1; msg: string; data: { ${str}: string } }
• res header: X-Captchatoken: ${token}

code的状态：0.正常; 1.错误可继续; 2.错误重新开始; 注意：小于0的值为内部保留状态，请勿使用

📜 组件类型引导 (TypeScript)

如果安装后获取不到组件类型，请在tsconfig.json的compilerOptions添加如下引导：

    "typeRoots": [
        "./node_modules/@types"
    ]

🛟 设计思路 (Design)

安全策略详细见laravel-rotate-captcha [查看]，在提供允许的情况下，前端发送X-Captchapolici这个header，申请对应的权限。

高级用法：

• 验证流程中ua实际并不局限使用User-Agent，可以通过自定义头部加密拼接增加安全系数
• 除了头部，包括图片路径，都可以在本地通过二次加密encryption的方式增加安全系数

✂️ 物料 (Material)

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

🗓️ 更新日志 (Changelog)

具体请查看文档：更新日志

🔗 相关产品 (Product)

Laravel扩展

后端提供Laravel扩展：levi/laravel-rotate-captcha [查看]，可直接使用或参考上方Api接口定制

isszz/rotate-captcha

第三方仓库，提供了react和laravel之外的生态扩展 [点击打开]

包含：

• 前端：vue、uni-app
• 后端：php、ThinkPHP

MrXujiang/react-slider-vertify

基于react实现的滑动验证码组件 [点击打开]