Drag-Captcha
拖拽图形验证，简单易用, 只需要绑定按钮即可使用。 english
composer require rlofls/drag-captcha
功能介绍
自定义背景
先设置 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
RloflsDragCaptchaDrag
generate 生成渲染数据 dst, data
verify 验证匹配结果
服务器api 要求， Content-Type: application/json
/dragData---[GET]---获取验证码数据响应数据格式:
{
"status": "success" // error 表示失败
"data": {
//一次验证 事务id 用户自己生成
"cid": "drag-captcha63c0c18566074"
//以下数据由 RloflsDragCaptchaDrag::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
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考学习用！
4、如文档内容存在违规，或者侵犯商业秘密、侵犯著作权等，请点击“违规举报”。
