{"id":20448378,"url":"https://github.com/caijf/rc-slider-captcha","last_synced_at":"2025-05-16T13:02:48.163Z","repository":{"id":58898673,"uuid":"533835106","full_name":"caijf/rc-slider-captcha","owner":"caijf","description":"React 滑块验证码组件","archived":false,"fork":false,"pushed_at":"2025-04-22T11:39:46.000Z","size":14249,"stargazers_count":147,"open_issues_count":1,"forks_count":19,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-22T12:48:01.907Z","etag":null,"topics":["captcha","react","slider-captcha"],"latest_commit_sha":null,"homepage":"https://caijf.github.io/rc-slider-captcha/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/caijf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-09-07T15:51:03.000Z","updated_at":"2025-04-22T11:38:36.000Z","dependencies_parsed_at":"2024-04-16T07:38:51.150Z","dependency_job_id":"69d0f60b-5f85-4c84-b5e8-911eca48c4ea","html_url":"https://github.com/caijf/rc-slider-captcha","commit_stats":{"total_commits":62,"total_committers":1,"mean_commits":62.0,"dds":0.0,"last_synced_commit":"72c32b9cf4798cb50200a23d15a9a27722fd3160"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caijf%2Frc-slider-captcha","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caijf%2Frc-slider-captcha/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caijf%2Frc-slider-captcha/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caijf%2Frc-slider-captcha/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/caijf","download_url":"https://codeload.github.com/caijf/rc-slider-captcha/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254535792,"owners_count":22087397,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["captcha","react","slider-captcha"],"created_at":"2024-11-15T10:34:39.199Z","updated_at":"2025-05-16T13:02:48.135Z","avatar_url":"https://github.com/caijf.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rc-slider-captcha\n\n[![npm][npm]][npm-url] ![GitHub](https://img.shields.io/github/license/caijf/rc-slider-captcha.svg)\n\nReact 滑块验证码组件。\n\n[查看文档和示例][site]\n\n[![example](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d2d8d7dc28d4ad2aa114449ddced512~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp)][site]\n\n[掘金文章介绍地址](https://juejin.cn/post/7160519128950767652)\n\n## 特性\n\n- 简单易用\n- 适配 PC 和移动端\n- 兼容 IE11 和现代浏览器\n- 使用 TypeScript 开发，提供完整的类型定义文件\n\n## 安装\n\n```shell\nnpm install rc-slider-captcha\n```\n\n```shell\nyarn add rc-slider-captcha\n```\n\n```shell\npnpm add rc-slider-captcha\n```\n\n## 使用\n\n```typescript\nimport SliderCaptcha from 'rc-slider-captcha';\n\nconst Demo = () =\u003e {\n  return (\n    \u003cSliderCaptcha\n      request={async () =\u003e {\n        return {\n          bgUrl: 'background image url',\n          puzzleUrl: 'puzzle image url'\n        };\n      }}\n      onVerify={async (data) =\u003e {\n        console.log(data);\n        // verify data\n        return Promise.resolve();\n      }}\n    /\u003e\n  );\n};\n```\n\n## API\n\n```typescript\nimport SliderCaptcha, {\n  SliderCaptchaProps,\n  VerifyParam,\n  Status,\n  ActionType\n} from 'rc-slider-captcha';\n```\n\n### SliderCaptcha\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| request | 请求背景图和拼图 | `() =\u003e Promise\u003c{ bgUrl:string; puzzleUrl:string;}\u003e` | - |\n| onVerify | 用户操作滑块完成后触发，主要用于验证，返回 `resolve` 表示验证成功，`reject` 表示验证失败。 | `(data: VerifyParam) =\u003e Promise\u003cany\u003e` | - |\n| mode | 显示模式。`embed` - 嵌入式， `float` - 触发式， `slider` - 只有滑块无拼图。 | `'embed' \\| 'float' \\| 'slider'` | `'embed'` |\n| bgSize | 背景图尺寸 | `{ width: number; height: number; }` | `{ width: 320, height: 160 }` |\n| puzzleSize | 拼图尺寸和偏移调整，默认宽度 `60`，高度为背景图高度。 | `{ width: number; height: number; left: number; top: number; }` | `{ width: 60 }` |\n| tipText | 提示文本配置 | `{ default: ReactNode; loading: ReactNode; moving: ReactNode; verifying: ReactNode; success: ReactNode; error: ReactNode; errors: ReactNode; loadFailed: ReactNode; }` | - |\n| tipIcon | 提示图标配置 | `{ default: ReactNode; loading: ReactNode; error: ReactNode; success: ReactNode; refresh: ReactNode; loadFailed: ReactNode; }` | - |\n| actionRef | 常用操作，比如`刷新`。 | `React.MutableRefObject\u003cActionType \\| undefined\u003e;` | - |\n| showRefreshIcon | 显示右上角刷新图标 | `boolean` | `true` |\n| limitErrorCount | 限制连续错误次数。当连续错误次数达到限制时，不允许操作滑块和刷新图标，必须手动点击操作条刷新。`0` 表示不限制错误次数。 | `number` | `0` |\n| jigsawContent | 拼图区域自定义内容，需要自己定义绝对定位和 zIndex 。 | `ReactNode` | - |\n| loadingBoxProps | 拼图区域加载配置，支持 div 属性。 | `{ icon: ReactNode; text: ReactNode }` | - |\n| autoRequest | 自动发起请求 | `boolean` | `true` |\n| autoRefreshOnError | 验证失败后自动刷新 | `boolean` | `true` |\n| errorHoldDuration | 错误停留多少毫秒后自动刷新，仅在 `autoRefreshOnError=true` 时生效。 | `number` | `500` |\n| loadingDelay | 设置 `loading` 状态延迟的时间，避免闪烁，单位为毫秒。 | `number` | `0` |\n| placement | 浮层位置。仅在 `mode=float` 时生效。 | `'top' \\| 'bottom'` | `'top'` |\n| precision | 数字精度。为避免内部计算产生精度问题，只对 `onVerify` 方法参数 `x` `y` `sliderOffsetX` 生效。 | `number \\| false` | `7` |\n| className | 容器类名 | `string` | - |\n| style | 容器样式 | `CSSProperties` | - |\n| styles | 配置内置模块样式 | `{ panel?: CSSProperties; jigsaw?: CSSProperties; bgImg?: CSSProperties; puzzleImg?: CSSProperties; control?: CSSProperties; indicator?: CSSProperties; }` | - |\n\n\u003e 连续错误次数说明：当用户操作滑块验证成功后，将重置连续错误次数为 0 。当用户点击限制错误次数操作条刷新时也将错误次数重置为 0 。\n\n### VerifyParam\n\n```typescript\ntype VerifyParam = {\n  x: number; // 拼图 x 轴移动值。（拼图和滑块按钮移动距离不一样，这里指的是计算后的拼图移动距离。）\n  y: number; // 用户操作按钮或拼图 y 轴移动值。（按下鼠标到释放鼠标 y 轴的差值。）\n  sliderOffsetX: number; // 滑块 x 轴偏移值。（暂时没有什么场景会用到。）\n  duration: number; // 操作持续时长，单位毫秒。\n  trail: [number, number][]; // 移动轨迹\n  targetType: 'puzzle' | 'button'; // 操作 dom 目标。 puzzle-拼图 button-滑块按钮。\n  errorCount: number; // 连续错误次数\n};\n```\n\n如果对安全比较重视的，可以通过 `y` `duration` `trail` 等结合算法判断是否人为操作，防止一些非人为操作破解滑块验证码。\n\n大部分情况下，只需要将 `x` 传给后端即可（如果背景图和滑块有比例缩放，可能需要自己计算 `x` 乘以缩放比例）。\n\n### actionRef\n\n提供给外部的操作，便于一些特殊场景自定义。\n\n```typescript\nexport type ActionType = {\n  refresh: (resetErrorCount?: boolean) =\u003e void; // 刷新，参数为是否重置连续错误次数为0\n  status: Status; // 每次获取返回当前的状态，注意它不是引用值，而是一个静态值。部分场景下配合自定义刷新操作使用。\n};\n\nexport enum Status {\n  Default = 1, // 默认\n  Loading, // 加载中\n  Verify, // 验证中\n  Success, // 验证成功\n  Error, // 验证失败\n  LoadFailed // 加载失败\n}\n```\n\n### CSS 变量\n\n| 变量名 | 说明 | 默认值 |\n| --- | --- | --- |\n| --rcsc-primary | 主色 | `#1991fa` \u003cinput type='color' value='#1991fa' disabled /\u003e |\n| --rcsc-primary-light | 主色-浅 | `#d1e9fe` \u003cinput type='color' value='#d1e9fe' disabled /\u003e |\n| --rcsc-error | 错误色 | `#f57a7a` \u003cinput type='color' value='#f57a7a' disabled /\u003e |\n| --rcsc-error-light | 错误色-浅 | `#fce1e1` \u003cinput type='color' value='#fce1e1' disabled /\u003e |\n| --rcsc-success | 成功色 | `#52ccba` \u003cinput type='color' value='#52ccba' disabled /\u003e |\n| --rcsc-success-light | 成功色-浅 | `#d2f4ef` \u003cinput type='color' value='#d2f4ef' disabled /\u003e |\n| --rcsc-border-color | 边框色 | `#e4e7eb` \u003cinput type='color' value='#e4e7eb' disabled /\u003e |\n| --rcsc-bg-color | 背景色 | `#f7f9fa` \u003cinput type='color' value='#f7f9fa' disabled /\u003e |\n| --rcsc-text-color | 文本色 | `#45494c` \u003cinput type='color' value='#45494c' disabled /\u003e |\n| --rcsc-button-color | 按钮颜色 | `#676d73` \u003cinput type='color' value='#676d73' disabled /\u003e |\n| --rcsc-button-hover-color | 鼠标移入时，按钮颜色 | `#ffffff` \u003cinput type='color' value='#ffffff' disabled /\u003e |\n| --rcsc-button-bg-color | 按钮背景颜色 | `#ffffff` \u003cinput type='color' value='#ffffff' disabled /\u003e |\n| --rcsc-panel-border-radius | 图片容器边框圆角 | `2px` |\n| --rcsc-control-height | 滑轨高度 | `42px` |\n\n\u003e \\*注意 IE11 不支持 css 变量，如果你的项目需要兼容 IE11，尽量不使用 css 变量改变样式。\n\n[site]: https://caijf.github.io/rc-slider-captcha/\n[npm]: https://img.shields.io/npm/v/rc-slider-captcha.svg\n[npm-url]: https://npmjs.com/package/rc-slider-captcha\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaijf%2Frc-slider-captcha","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaijf%2Frc-slider-captcha","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaijf%2Frc-slider-captcha/lists"}