antibot-slide-verify
v1.0.9
Published
slide verify for antibot sdk
Downloads
14
Readme
antibot-slide-verify
简体中文 | English
滑动条验证插件
安装
npm install slide-verify -S快速开始
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;
},
})<body>
<div id="root"></div>
</body>elementId 为挂载点的 dom id
外部引入方式
<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
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 | 判断是否验证成功
特性
- 使用 css-module 开发，放心使用，没有 css 污染困扰
- UMD 方式打包，多种引入方式（external、es6）
- 支持 TypeScript 内含 types 声明文件
感谢 Contribution
此项目参考 canvas滑动验证码