# antibot-slide-verify

> slide verify for antibot sdk

Latest version **1.0.9** (published 2023-08-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install antibot-slide-verify
pnpm add antibot-slide-verify
yarn add antibot-slide-verify
bun add antibot-slide-verify
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2023-08-01 |
| First published | 2023-07-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1011.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Micheal Xiao |
| Maintainers | laoli_993 |
| Keywords | slide, verify, verification |

## Links

- npm: https://www.npmjs.com/package/antibot-slide-verify
- Repository: https://github.com/mikexfreeze/slide-verify
- Homepage: https://github.com/mikexfreeze/slide-verify#readme
- Issues: https://github.com/mikexfreeze/slide-verify/issues
- npm.io page: https://npm.io/package/antibot-slide-verify

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 1.0.9 (latest) — 2023-08-01
- 1.0.8 — 2023-08-01
- 1.0.7 — 2023-07-31
- 1.0.6 — 2023-07-31
- 1.0.5 — 2023-07-31
- 1.0.4 — 2023-07-28
- 1.0.3 — 2023-07-28
- 1.0.2 — 2023-07-28
- 1.0.1 — 2023-07-28
- 1.0.0 — 2023-07-28

## README

# antibot-slide-verify

简体中文 | [English](./README-EN.md)

> 滑动条验证插件



## 安装

```shell
npm install slide-verify -S
```

## 快速开始

```js
import SlideVerify from 'slide-verify'

const Slide = new SlideVerify({
  elementId: "root", // DOM挂载点
  onSuccess: () => {console.log("success")}, // 成功回调
  onFail: () => {console.log("fail")}, // 失败回调
  onRefresh: () => {console.log("refresh")}, // 刷新回调
  photo: 'www.xxx.com/img' // 背景图片地址
})

const Slide = new SlideVerify({
  elementId: "root", // DOM挂载点
  onSuccess: () => {console.log("success")}, // 成功回调
  onFail: () => {console.log("fail")}, // 失败回调
  onRefresh: () => {console.log("refresh")}, // 刷新回调
  
  doLoadImage: ()=>{

    // 请求后端接口加载图片

    const img1 = new Image();
    img1.crossOrigin = "Anonymous"
    img1.src = Img1 

    const img2 = new Image();
    img2.crossOrigin = "Anonymous"
    img2.src = Img2

    return [img1,img2];
  },
  doVerify: (x:number) => {
    
    // x为鼠标停留坐标，传后端进行校验

    return false;
},
})
```

```html
<body>
    <div id="root"></div>
</body>
```

elementId 为挂载点的 dom id

### 外部引入方式

```html
<head>
    <script src="../node_modules/slide-verify/dist/slide-verify.js"></script>
</head>
<body>
   <div id="root"></div>
   <script>
      var Slide = new SlideVerify({
      elementId: "root", // DOM挂载点
      onSuccess: () => {console.log("success")}, // 成功回调
      onFail: () => {console.log("fail")}, // 失败回调
      onRefresh: () => {console.log("refresh")}, // 刷新回调

      doLoadImage: ()=>{

        // 请求后端接口加载图片

        const img1 = new Image();
        img1.crossOrigin = "Anonymous"
        img1.src = Img1 

        const img2 = new Image();
        img2.crossOrigin = "Anonymous"
        img2.src = Img2

        return [img1,img2];
      },
      doVerify: (x:number) => {
        
        // x为鼠标停留坐标，传后端进行校验

        return false;
      },
      })
   </script>
</body>
```

## api

```js
new SlideVerify(option)
```

### Options

名称 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---
elementId | string | 是 | *null* | 挂载点的 dom id
doLoadImage | function | 是 | *null* | [img1] 背景图片 [img2] 滑块图片
onSuccess | function | 是 | *null* | 验证通过时回调此函数
onFail | function | 是 | *null* | 验证失败时回调此函数
onRefresh | function | 是 | *null* | 点击重新加载图标时回调此函数
doVerify | function | 是 | *null* | 判断是否验证成功

## 特性

1. 使用 css-module 开发，放心使用，没有 css 污染困扰
2. UMD 方式打包，多种引入方式（external、es6）
3. 支持 TypeScript 内含 types 声明文件

## 感谢 Contribution

此项目参考 [canvas滑动验证码](https://github.com/yeild/jigsaw)

---
_Source: https://npm.io/package/antibot-slide-verify · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._