包简介

Drag-and-drop graphics verification, small and easy to use

README 文档

README

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

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

功能介绍

自定义背景

先设置 Resources::$customBg 数组值，一定要是 png 图片，存放的是图片路径。 eg:

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

添加干扰混淆

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

expand:
cut

运行示例

切换到此目录下
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"}

todo

欢迎提交 issuse

rlofls/drag-captcha 适用场景与选型建议

rlofls/drag-captcha 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 1.85k 次下载、GitHub Stars 达 50，最近一次更新时间为 2022 年 07 月 13 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 rlofls/drag-captcha 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 rlofls/drag-captcha 我们能提供哪些服务？

定制开发 / 二次开发

基于 rlofls/drag-captcha 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

rlofls/drag-captcha

包简介