Skip to content

Latest commit

 

History

History
141 lines (112 loc) · 3.83 KB

README-en.md

File metadata and controls

141 lines (112 loc) · 3.83 KB

Drag-Captcha

Drag-and-drop graphics verification, easy to use. 中文
composer require rlofls/drag-captcha

show Example

features

custom background

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',
  //...
];

Enable Interference Confuse

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:

    expand

  • cut

    expand

run the example

  1. Switch to this directory
  2. composer install
  3. php -S 127.0.0.1:8087
  4. Browser access http://127.0.0.1:8087

practice

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>

api

  • Rlofls\DragCaptcha\Drag

    • generate() generates rendering data dst, front
    • verify() to verify matching results

  • Server api requirements， Content-Type: application/json

    • /dragData---[GET]---Get verification code data
      Response data format: 
      {
  "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
      Request parameters 
      {
  "cid": "drag-captcha63c0c1881db17"
  "mask": {
    "left": 149, 
    "top": 76
  }
}
      Response data format: 
      {"status": "error"}

todo

  • Welcome to submit issue