README

拖拽图形验证，简单易用，只需绑定按钮即可使用。 English
composer require rlofls/drag-captcha

功能介绍
- 自定义背景
- 开启干扰混淆
运行示例
实践
API

功能介绍

自定义背景

首先设置 Resources::$customBg 数组值，必须是 png 图片，存放的是图片路径。例如：

//设置自定义背景
Resources::$customBg = [
  __DIR__ . '/customBg/1.png',
  __DIR__ . '/customBg/2.png',
  __DIR__ . '/customBg/3.png',
  //...
];

添加干扰混淆

可以使目标不那么明显，会随机对目标进行扩展/剪切，在调用 generate() 方法时，传入true 值即可。例如：$drag->generate(true);

扩展
剪切

运行示例

切换到此目录下
composer install
php -S 127.0.0.1:8087
通过浏览器访问 http://127.0.0.1:8087

实践

参考 index.php 和 index.html
将 dragCaptcha.css 和 dragCaptcha.js 复制到自己的项目应用中
参考 HTML

<body>
    
    <button id="show">show</button>
</body>
<script type="module">
    import {DragCaptcha} from "./dragCaptcha.js";
    //设置要绑定的按钮
    let btn = document.getElementById("show")

    //1.设置 请求数据api 地址， 默认： /dragData
    //DragCaptcha.prototype.apiDataUrl = '/dragData'
    //2.设置 请求验证api 地址， 默认： /dragVerify
    //DragCaptcha.prototype.apiVerifyUrl = '/dragVerify'

    //3.设置语言 默认 zh：中文， en:英文
    //DragCaptcha.prototype.lang = 'en'

    //4.设置debug  默认 true 会打印日志
    //DragCaptcha.prototype.debug = false

    //5.设置验证成功 callback
    DragCaptcha.prototype.cbSuccess = function(drag) {
        console.log("验证通过 cid:", drag.cid)
        //处理自己业务逻辑 提交表单 ...

        //如果业务逻辑失败。需要重新添加点击事件, 因为在验证成功时候会取消点击事件
        //console.log("业务逻辑失败，重新绑定点击事件")
        //drag.addClickEventListener()
    }
    //6. 设置验证失败 callback
    DragCaptcha.prototype.cbFail = function(drag) {
        console.log("验证失败")
    }
    let drag = new DragCaptcha(btn);

</script>

API

Rlofls\DragCaptcha\Drag
- generate 生成渲染数据 dst, data
- verify 验证匹配结果

服务器API要求，Content-Type: application/json

/dragData---[GET]---获取验证码数据
响应数据格式

{
  "status": "success" // error 表示失败
  "data": {
    //一次验证 事务id 用户自己生成
    "cid": "drag-captcha63c0c18566074"
    //以下数据由 Rlofls\DragCaptcha\Drag::generate 生成
    "bgBase64": "data:image/png;base64,iV..."
    "bgH": 160
    "bgW": 250
    "maskBase64": "data:image/png;base64,..."
    "maskLeft": 114
    "maskPath": "M 15.27429..."
    "maskTop": 0
    "maskViewBox": 15.875
    "maskWH": 57
  }

}

/dragVerify---[POST]---进行验证码验证
请求参数

{
  "cid": "drag-captcha63c0c1881db17"
  "mask": {
    "left": 149, 
    "top": 76
  }
}

响应数据格式

{"status": "error"}

待办事项

欢迎提交 issue

rlofls / drag-captcha

维护者

详细信息