react-rotate-captcha

!logo-react

       

一个开箱即用的滑动验证码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唤起

`tsx
import { useState } from 'react';
import RotateCaptcha from "react-rotate-captcha";

function App() {
const [open, setOpen] = useState(true);
return setOpen(false)} />
}
`

通过Instance唤起

`tsx
import RotateCaptcha from "react-rotate-captcha";

function Page() {
const captcha = RotateCaptcha.useCaptchaInstance();
return (
captcha.open()}>click it
);
}

function App() {
return (



);
}
`

通过ref唤起

`tsx
import { useRef } from 'react';
import RotateCaptcha, { CaptchaInstance } from "react-rotate-captcha";

function App() {
const ref = useRef(null);
return (

ref.current!.open()}>click it

);
}
`

更多请见下方Api

📍 参数 (Props)

$3

| 参数 | 说明 | 类型 | 默认值 |
| ----- | ----- | ----- | ----- |
| 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类型：[查看]

$3

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

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

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

$3

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

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

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

$3

通过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个接口（查看），请求参数和返回数据如下：

$3

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

$3

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

$3

- 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?}

$3

- 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根据服务器配置决定是否提交

$3

当需要匹配不同尺寸的设备时，或者一些老的设备不支持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的方式增加安全系数

!New Board

✂️ 物料 (Material)

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

!911700882740_ pic

🗓️ 更新日志 (Changelog)

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

🔗 相关产品 (Product)

$3

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

$3

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

包含：

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

$3

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