npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

rc-slider-captcha

v1.6.1

Published

React slider captcha component.

Downloads

2,496

Readme

rc-slider-captcha

npm GitHub

React 滑块验证码组件。

查看文档和示例

example

掘金文章介绍地址

特性

  • 简单易用
  • 适配 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

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | request | 请求背景图和拼图 | () => Promise<{ bgUrl:string; puzzleUrl:string;}> | - | | onVerify | 用户操作滑块完成后触发,主要用于验证,返回 resolve 表示验证成功,reject 表示验证失败。 | (data: VerifyParam) => Promise<any> | - | | mode | 显示模式。embed - 嵌入式, float - 触发式, slider - 只有滑块无拼图。 | 'embed' \| 'float' \| 'slider' | 'embed' | | bgSize | 背景图尺寸 | { width: number; height: number; } | { width: 320, height: 160 } | | puzzleSize | 拼图尺寸和偏移调整,默认宽度 60,高度为背景图高度。 | { width: number; height: number; left: number; top: number; } | { width: 60 } | | tipText | 提示文本配置 | { default: ReactNode; loading: ReactNode; moving: ReactNode; verifying: ReactNode; success: ReactNode; error: ReactNode; errors: ReactNode; loadFailed: ReactNode; } | - | | tipIcon | 提示图标配置 | { default: ReactNode; loading: ReactNode; error: ReactNode; success: ReactNode; refresh: ReactNode; loadFailed: ReactNode; } | - | | actionRef | 常用操作,比如刷新。 | React.MutableRefObject<ActionType \| undefined>; | - | | showRefreshIcon | 显示右上角刷新图标 | boolean | true | | limitErrorCount | 限制连续错误次数。当连续错误次数达到限制时,不允许操作滑块和刷新图标,必须手动点击操作条刷新。0 表示不限制错误次数。 | number | 0 | | jigsawContent | 拼图区域自定义内容,需要自己定义绝对定位和 zIndex 。 | ReactNode | - | | loadingBoxProps | 拼图区域加载配置,支持 div 属性。 | { icon: ReactNode; text: ReactNode } | - | | autoRequest | 自动发起请求 | boolean | true | | autoRefreshOnError | 验证失败后自动刷新 | boolean | true | | errorHoldDuration | 错误停留多少毫秒后自动刷新,仅在 autoRefreshOnError=true 时生效。 | number | 500 | | loadingDelay | 设置 loading 状态延迟的时间,避免闪烁,单位为毫秒。 | number | 0 | | placement | 浮层位置,触发式下生效 | 'top' \| 'bottom' | 'top' | | precision | 精度,为避免内部计算产生精度问题。只对 onVerify 方法参数 x y sliderOffsetX 生效。 | number \| false | 7 | | className | 容器类名 | string | - | | style | 容器样式 | CSSProperties | - | | styles | 配置内置模块样式 | { panel?: CSSProperties; jigsaw?: CSSProperties; bgImg?: CSSProperties; puzzleImg?: CSSProperties; control?: CSSProperties; indicator?: CSSProperties; } | - |

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

VerifyParam

export 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 变量

| 变量名 | 说明 | 默认值 | | --- | --- | --- | | --rcsc-primary | 主色 | #1991fa | | --rcsc-primary-light | 主色-浅 | #d1e9fe | | --rcsc-error | 错误色 | #f57a7a | | --rcsc-error-light | 错误色-浅 | #fce1e1 | | --rcsc-success | 成功色 | #52ccba | | --rcsc-success-light | 成功色-浅 | #d2f4ef | | --rcsc-border-color | 边框色 | #e4e7eb | | --rcsc-bg-color | 背景色 | #f7f9fa | | --rcsc-text-color | 文本色 | #45494c | | --rcsc-button-color | 按钮颜色 | #676d73 | | --rcsc-button-hover-color | 鼠标移入时,按钮颜色 | #ffffff | | --rcsc-button-bg-color | 按钮背景颜色 | #ffffff | | --rcsc-panel-border-radius | 图片容器边框圆角 | 2px | | --rcsc-control-border-radius | 滑轨/滑轨按钮边框圆角 | 2px |