Antibot-slide-verify NPM

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	判断是否验证成功