rc-slider-captcha v1.7.2

rc-slider-captcha

React 滑块验证码组件。

查看文档和示例

掘金文章介绍地址

特性

• 简单易用
• 适配 PC 和移动端
• 兼容 IE11 和现代浏览器
• 使用 TypeScript 开发，提供完整的类型定义文件

安装

npm install rc-slider-captcha

yarn add rc-slider-captcha

pnpm add rc-slider-captcha

使用

import SliderCaptcha from 'rc-slider-captcha';

const Demo = () => {
  return (
    <SliderCaptcha
      request={async () => {
        return {
          bgUrl: 'background image url',
          puzzleUrl: 'puzzle image url'
        };
      }}
      onVerify={async (data) => {
        console.log(data);
        // verify data
        return Promise.resolve();
      }}
    />
  );
};

API

import SliderCaptcha, {
  SliderCaptchaProps,
  VerifyParam,
  Status,
  ActionType
} from 'rc-slider-captcha';

SliderCaptcha

连续错误次数说明：当用户操作滑块验证成功后，将重置连续错误次数为 0 。当用户点击限制错误次数操作条刷新时也将错误次数重置为 0 。

VerifyParam

type VerifyParam = {
  x: number; // 拼图 x 轴移动值。（拼图和滑块按钮移动距离不一样，这里指的是计算后的拼图移动距离。）
  y: number; // 用户操作按钮或拼图 y 轴移动值。（按下鼠标到释放鼠标 y 轴的差值。）
  sliderOffsetX: number; // 滑块 x 轴偏移值。（暂时没有什么场景会用到。）
  duration: number; // 操作持续时长，单位毫秒。
  trail: [number, number][]; // 移动轨迹
  targetType: 'puzzle' | 'button'; // 操作 dom 目标。 puzzle-拼图 button-滑块按钮。
  errorCount: number; // 连续错误次数
};

如果对安全比较重视的，可以通过 y duration trail 等结合算法判断是否人为操作，防止一些非人为操作破解滑块验证码。

大部分情况下，只需要将 x 传给后端即可（如果背景图和滑块有比例缩放，可能需要自己计算 x 乘以缩放比例）。

actionRef

提供给外部的操作，便于一些特殊场景自定义。

export type ActionType = {
  refresh: (resetErrorCount?: boolean) => void; // 刷新，参数为是否重置连续错误次数为0
  status: Status; // 每次获取返回当前的状态，注意它不是引用值，而是一个静态值。部分场景下配合自定义刷新操作使用。
};

export enum Status {
  Default = 1, // 默认
  Loading, // 加载中
  Verify, // 验证中
  Success, // 验证成功
  Error, // 验证失败
  LoadFailed // 加载失败
}

CSS 变量

*注意 IE11 不支持 css 变量，如果你的项目需要兼容 IE11，尽量不使用 css 变量改变样式。