{"_id":"@chenshuai2144/rc-slider-captcha","_rev":"1-e461bbc8c314ddf54aec3227cc299db5","name":"@chenshuai2144/rc-slider-captcha","dist-tags":{"latest":"1.3.2"},"versions":{"1.3.1":{"name":"@chenshuai2144/rc-slider-captcha","version":"1.3.1","description":"React slider captcha component.","keywords":["react","component","slider-captcha"],"main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"types/index.d.ts","scripts":{"test":"jest","start":"dumi dev","docs:build":"dumi build","build":"rm -rf dist && rollup -c && npm run build:types","build:types":"rm -rf types && tsc -p tsconfig.types.json","lint":"npm run lint:js && npm run lint:style","lint:js":"eslint --ext .js,.jsx,.ts,.tsx src","lint-fix:js":"npm run lint:js -- --fix","lint:style":"stylelint src/**/*.less","lint-fix:style":"npm run lint:stylelint -- --fix","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","prepublishOnly":"npm run build && npm test","commit":"cz","tsc":"tsc --noEmit","prepare":"husky"},"config":{"commitizen":{"path":"@commitlint/cz-commitlint"}},"lint-staged":{"**/*.{css,less}":"stylelint --fix","**/*.{js,jsx,ts,tsx}":"eslint","*.{js,jsx,ts,tsx,less,md,json}":"prettier -w"},"repository":{"type":"git","url":"git+https://github.com/caijf/rc-slider-captcha.git"},"author":{"name":"caijf"},"license":"MIT","bugs":{"url":"https://github.com/caijf/rc-slider-captcha/issues"},"homepage":"https://github.com/caijf/rc-slider-captcha#readme","dependencies":{"classnames":"^2.3.2","rc-hooks":"^3.0.7","tslib":"^2.6.2"},"devDependencies":{"@babel/core":"~7.22.20","@babel/preset-env":"~7.22.20","@babel/preset-react":"~7.22.15","@babel/preset-typescript":"~7.22.15","@commitlint/cli":"^19.2.1","@commitlint/config-conventional":"^19.1.0","@commitlint/cz-commitlint":"^19.2.0","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.6","@testing-library/jest-dom":"^6.4.2","@testing-library/react":"^14.2.2","@types/jest":"^29.5.12","@types/react":"^18.2.67","@types/react-dom":"^18.2.22","@types/react-test-renderer":"^18.0.7","@typescript-eslint/eslint-plugin":"^7.3.1","@typescript-eslint/parser":"^7.3.1","antd":"^5.15.3","autoprefixer":"^10.4.19","babel-jest":"^29.7.0","commitizen":"^4.3.0","create-puzzle":"^2.0.2","doly-icons":"^1.5.3","dumi":"^1.1.54","element-remove":"^1.0.4","eslint":"^8.57.0","eslint-plugin-react":"^7.34.1","eslint-plugin-react-hooks":"^4.6.0","husky":"^9.0.11","inquirer":"9","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","less":"^4.2.0","lint-staged":"^15.2.2","postcss":"^8.4.38","postcss-css-variables":"^0.19.0","prettier":"^3.2.5","prettier-plugin-two-style-order":"^1.0.1","react":"^18.2.0","react-dom":"^18.2.0","react-test-renderer":"^18.2.0","rollup":"^4.13.0","rollup-plugin-postcss":"^4.0.2","stylelint":"^14.16.1","stylelint-config-css-modules":"^4.4.0","stylelint-config-prettier":"^9.0.5","stylelint-config-rational-order":"^0.1.2","stylelint-config-standard":"^28.0.0","stylelint-declaration-block-no-ignored-properties":"^2.8.0","stylelint-no-unsupported-browser-features":"^5.0.4","typescript":"^5.4.3","ut2":"^1.7.1"},"peerDependencies":{"react":">=16.9.0"},"resolutions":{"react":"18","react-dom":"18","@types/react":"18","@types/react-dom":"18","@babel/generator":"~7.19.0","@babel/types":"~7.19.0","@babel/traverse":"~7.19.0","@babel/helper-compilation-targets":"~7.21.5"},"browserslist":{"development":["last 1 version"],"production":["last 1 version","> 1%","ie 11"]},"publishConfig":{"registry":"https://registry.npmjs.org/"},"gitHead":"9a657015ed0524b7d1823881aee66f7147729497","_id":"@chenshuai2144/rc-slider-captcha@1.3.1","_nodeVersion":"18.16.0","_npmVersion":"9.6.6","dist":{"integrity":"sha512-dhR2T+gMBOY1SqCR4Vzdtv3QwqkvFBiZXxGPm2qIaEel4rYYd0JNniV41/DLaFxJHUj+rG5SXyBEi2mQ3RVIcg==","shasum":"0b12f91e3aab3dc4abd1f86a18aa20002e681ac5","tarball":"https://registry.npmjs.org/@chenshuai2144/rc-slider-captcha/-/rc-slider-captcha-1.3.1.tgz","fileCount":17,"unpackedSize":98498,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBRSfe6M9KNwqHf4IpjuFTIiOFyFLyAyLjbA75CtOU41AiABs5taZ7HW/bdNPO0RAglP7EJzu0fp1D9UwIf+QlExUQ=="}]},"_npmUser":{"name":"chenshuai2144","email":"wasd2144@hotmail.com"},"directories":{},"maintainers":[{"name":"chenshuai2144","email":"wasd2144@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rc-slider-captcha_1.3.1_1712804010978_0.0399383784015539"},"_hasShrinkwrap":false},"1.3.2":{"name":"@chenshuai2144/rc-slider-captcha","version":"1.3.2","description":"React slider captcha component.","keywords":["react","component","slider-captcha"],"main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"types/index.d.ts","scripts":{"test":"jest","start":"dumi dev","docs:build":"dumi build","build":"rm -rf dist && rollup -c && npm run build:types","build:types":"rm -rf types && tsc -p tsconfig.types.json","lint":"npm run lint:js && npm run lint:style","lint:js":"eslint --ext .js,.jsx,.ts,.tsx src","lint-fix:js":"npm run lint:js -- --fix","lint:style":"stylelint src/**/*.less","lint-fix:style":"npm run lint:stylelint -- --fix","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","prepublishOnly":"npm run build && npm test","commit":"cz","tsc":"tsc --noEmit","prepare":"husky"},"config":{"commitizen":{"path":"@commitlint/cz-commitlint"}},"lint-staged":{"**/*.{css,less}":"stylelint --fix","**/*.{js,jsx,ts,tsx}":"eslint","*.{js,jsx,ts,tsx,less,md,json}":"prettier -w"},"repository":{"type":"git","url":"git+https://github.com/caijf/rc-slider-captcha.git"},"author":{"name":"caijf"},"license":"MIT","bugs":{"url":"https://github.com/caijf/rc-slider-captcha/issues"},"homepage":"https://github.com/caijf/rc-slider-captcha#readme","dependencies":{"classnames":"^2.3.2","rc-hooks":"^3.0.7","tslib":"^2.6.2"},"devDependencies":{"@babel/core":"~7.22.20","@babel/preset-env":"~7.22.20","@babel/preset-react":"~7.22.15","@babel/preset-typescript":"~7.22.15","@commitlint/cli":"^19.2.1","@commitlint/config-conventional":"^19.1.0","@commitlint/cz-commitlint":"^19.2.0","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.6","@testing-library/jest-dom":"^6.4.2","@testing-library/react":"^14.2.2","@types/jest":"^29.5.12","@types/react":"^18.2.67","@types/react-dom":"^18.2.22","@types/react-test-renderer":"^18.0.7","@typescript-eslint/eslint-plugin":"^7.3.1","@typescript-eslint/parser":"^7.3.1","antd":"^5.15.3","autoprefixer":"^10.4.19","babel-jest":"^29.7.0","commitizen":"^4.3.0","create-puzzle":"^2.0.2","doly-icons":"^1.5.3","dumi":"^1.1.54","element-remove":"^1.0.4","eslint":"^8.57.0","eslint-plugin-react":"^7.34.1","eslint-plugin-react-hooks":"^4.6.0","husky":"^9.0.11","inquirer":"9","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","less":"^4.2.0","lint-staged":"^15.2.2","postcss":"^8.4.38","postcss-css-variables":"^0.19.0","prettier":"^3.2.5","prettier-plugin-two-style-order":"^1.0.1","react":"^18.2.0","react-dom":"^18.2.0","react-test-renderer":"^18.2.0","rollup":"^4.13.0","rollup-plugin-postcss":"^4.0.2","stylelint":"^14.16.1","stylelint-config-css-modules":"^4.4.0","stylelint-config-prettier":"^9.0.5","stylelint-config-rational-order":"^0.1.2","stylelint-config-standard":"^28.0.0","stylelint-declaration-block-no-ignored-properties":"^2.8.0","stylelint-no-unsupported-browser-features":"^5.0.4","typescript":"^5.4.3","ut2":"^1.7.1"},"peerDependencies":{"react":">=16.9.0"},"resolutions":{"react":"18","react-dom":"18","@types/react":"18","@types/react-dom":"18","@babel/generator":"~7.19.0","@babel/types":"~7.19.0","@babel/traverse":"~7.19.0","@babel/helper-compilation-targets":"~7.21.5"},"browserslist":{"development":["last 1 version"],"production":["last 1 version","> 1%","ie 11"]},"publishConfig":{"registry":"https://registry.npmjs.org/"},"gitHead":"9a657015ed0524b7d1823881aee66f7147729497","_id":"@chenshuai2144/rc-slider-captcha@1.3.2","_nodeVersion":"18.16.0","_npmVersion":"9.6.6","dist":{"integrity":"sha512-qnJrTEEBElLPBAF2q4Y3xkLAXnfuoXAgb6zO69TS+g9gXUgM+LEwlvm7lIwwZAz3MFiP0txRPdnzidfGb806ig==","shasum":"86a772e3bb02b3fbe8dd168a031f72d19967adc4","tarball":"https://registry.npmjs.org/@chenshuai2144/rc-slider-captcha/-/rc-slider-captcha-1.3.2.tgz","fileCount":17,"unpackedSize":98685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDolx0a07kezieV5ZbUpJVik17HDywFHek1/jphbUVFXQIgPqdEwmdlUWIFZRo3J7ffTc1UE5TbUbI4o0v/iveelWw="}]},"_npmUser":{"name":"chenshuai2144","email":"wasd2144@hotmail.com"},"directories":{},"maintainers":[{"name":"chenshuai2144","email":"wasd2144@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rc-slider-captcha_1.3.2_1712817310663_0.6927711224025443"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-11T02:53:30.775Z","1.3.1":"2024-04-11T02:53:31.147Z","modified":"2024-04-11T06:35:11.056Z","1.3.2":"2024-04-11T06:35:10.883Z"},"maintainers":[{"name":"chenshuai2144","email":"wasd2144@hotmail.com"}],"description":"React slider captcha component.","homepage":"https://github.com/caijf/rc-slider-captcha#readme","keywords":["react","component","slider-captcha"],"repository":{"type":"git","url":"git+https://github.com/caijf/rc-slider-captcha.git"},"author":{"name":"caijf"},"bugs":{"url":"https://github.com/caijf/rc-slider-captcha/issues"},"license":"MIT","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 SliderCaptch from 'rc-slider-captcha';\n\nconst Demo = () => {\n  return (\n    <SliderCaptcha\n      request={async () => {\n        return {\n          bgUrl: 'background image url',\n          puzzleUrl: 'puzzle image url'\n        };\n      }}\n      onVerify={async (data) => {\n        console.log(data);\n        // verify data\n        return Promise.resolve();\n      }}\n    />\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 | 请求背景图和拼图 | `() => Promise<{ bgUrl:string; puzzleUrl:string;}>` | - |\n| onVerify | 用户操作滑块完成后触发，主要用于验证，返回 `resolve` 表示验证成功，`reject` 表示验证失败。 | `(data: VerifyParam) => Promise<any>` | - |\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; }` | - |\n| tipIcon | 提示图标配置 | `{ default: ReactNode; loading: ReactNode; error: ReactNode; success: ReactNode; refresh: ReactNode; }` | - |\n| actionRef | 常用操作 | `React.MutableRefObject<ActionType \\| undefined>;` | - |\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 | 浮层位置，触发式下生效 | `'top' \\| 'bottom'` | `'top'` |\n| className | 类名 | `string` | - |\n| style | 样式 | `CSSProperties` | - |\n\n> 连续错误次数说明：当用户操作滑块验证成功后，将重置连续错误次数为 0 。当用户点击限制错误次数操作条刷新时也将错误次数重置为 0 。\n\n### VerifyParam\n\n```typescript\nexport type 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) => void; // 刷新，参数为是否重置连续错误次数为0\n  status: Status; // 每次获取返回当前的状态，注意它不是引用值，而是一个静态值。部分场景下配合自定义刷新操作使用。\n};\n\nexport enum Status {\n  Default = 1, // 默认\n  Loading, // 加载中\n  Verify, // 验证中\n  Success, // 验证成功\n  Error // 验证失败\n}\n```\n\n### CSS 变量\n\n| 变量名 | 说明 | 默认值 |\n| --- | --- | --- |\n| --rcsc-primary | 主色 | `#1991fa` <input type='color' value='#1991fa' disabled /> |\n| --rcsc-primary-light | 主色-浅 | `#d1e9fe` <input type='color' value='#d1e9fe' disabled /> |\n| --rcsc-error | 错误色 | `#f57a7a` <input type='color' value='#f57a7a' disabled /> |\n| --rcsc-error-light | 错误色-浅 | `#fce1e1` <input type='color' value='#fce1e1' disabled /> |\n| --rcsc-success | 成功色 | `#52ccba` <input type='color' value='#52ccba' disabled /> |\n| --rcsc-success-light | 成功色-浅 | `#d2f4ef` <input type='color' value='#d2f4ef' disabled /> |\n| --rcsc-border-color | 边框色 | `#e4e7eb` <input type='color' value='#e4e7eb' disabled /> |\n| --rcsc-bg-color | 背景色 | `#f7f9fa` <input type='color' value='#f7f9fa' disabled /> |\n| --rcsc-text-color | 文本色 | `#45494c` <input type='color' value='#45494c' disabled /> |\n| --rcsc-button-color | 按钮颜色 | `#676d73` <input type='color' value='#676d73' disabled /> |\n| --rcsc-button-hover-color | 鼠标移入时，按钮颜色 | `#ffffff` <input type='color' value='#ffffff' disabled /> |\n| --rcsc-button-bg-color | 按钮背景颜色 | `#ffffff` <input type='color' value='#ffffff' disabled /> |\n\n[site]: https://caijf.github.io/rc-slider-captcha/index.html\n[npm]: https://img.shields.io/npm/v/rc-slider-captcha.svg\n[npm-url]: https://npmjs.com/package/rc-slider-captcha\n","readmeFilename":"README.md"}