代码拉取完成，页面将自动刷新
Drag-and-drop graphics verification, easy to use. 中文
composer require rlofls/drag-captcha
First set the value of the Resources::$customBg array, which must be a png image, which stores the image path. eg:
//Set custom background
Resources::$customBg = [
__DIR__ . '/customBg/1.png',
__DIR__ . '/customBg/2.png',
__DIR__ . '/customBg/3.png',
//...
];
It can make the target less obvious, and the target will be expanded/cut randomly. When calling the generate() method, you can pass in the true value. eg: $drag->generate(true);
expand:
cut
composer installphp -S 127.0.0.1:8087http://127.0.0.1:8087
Reference index.php index.html
Copy dragCaptcha.css dragCaptcha.js to your own project application
Reference html
<body>
<button id="show">show</button>
</body>
<script type="module">
import {DragCaptcha} from "./dragCaptcha.js";
//Set the button to bind
let btn = document.getElementById("show")
//1.Set request data api address, default： /dragData
//DragCaptcha.prototype.apiDataUrl = '/dragData'
//2.Set the request validation api address, default： /dragVerify
//DragCaptcha.prototype.apiVerifyUrl = '/dragVerify'
//3.Set the default language zh: Chinese, en: English
//DragCaptcha.prototype.lang = 'en'
//4.Set debug default true to print logs
//DragCaptcha.prototype.debug = false
//5.Settings validation succeeded callback
DragCaptcha.prototype.cbSuccess = function(drag) {
console.log("Verification passed cid:", drag.cid)
//Process your own business logic submission form ...
//If the business logic fails. You need to add the click event again, because the click event will be canceled when the verification is successful
//console.log("Business logic failed, rebind click event")
//drag.addClickEventListener()
}
//6. Settings validation failed callback
DragCaptcha.prototype.cbFail = function(drag) {
console.log("Verification failed")
}
let drag = new DragCaptcha(btn);
</script>
Rlofls\DragCaptcha\Drag
generate() generates rendering data dst, front
verify() to verify matching resultsServer api requirements， Content-Type: application/json
/dragData---[GET]---Get verification code data{
"status": "success" // error: express fail
"data": {
//One-time verification transaction ID generated by the user
"cid": "drag-captcha63c0c18566074"
//The following data by Rlofls\DragCaptcha\Drag::generate generated
"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]---Perform verification code verification{
"cid": "drag-captcha63c0c1881db17"
"mask": {
"left": 149,
"top": 76
}
}
{"status": "error"}
issue
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。