Image Rotation Captcha (Human Verification) Library – RVerify.js

Preview:

Description:

RVerify.js is a creative captcha library to determine whether or not the user is human by rotating an image.

A great alternative to Google reCAPTCHA. Use this library to protect your web application from bots and malicious attacks.

See Also:

• Touch-friendly Image Puzzle captcha Plugin – jQuery Slidercaptcha
• Anti-Bot Icon captcha Plugin With jQuery And PHP – Iconcaptcha

Install & Download:

# NPM
$ npm install rverify --save

How to use it:

1. Insert the RVerify.js library’s files into the document.

<link rel="stylesheet" href="./dist/RVerify.min.css" />
<script src="./dist/RVerify.min.js"></script>

2. Add your images to the media library.

RVerify.configure({
  album: [
    '1.jpg',
    '2.jpg',
    '3.jpg',
    '4.jpg',
    '5.jpg',
    ...
  ]
});

3. Initialize the library and show the captcha modal when needed. That’s it.

RVerify.action(function (code) {
  switch (code) {
    case 1:
      alert("Verify Failed.");
      break;
    case 1:
      alert("Verify successful.");
      break;
    case 2:
      alert("No action");
      break;
  }
});

4. Config the image rotation captcha with the following options.

RVerify.configure({
  // mask transparency of the captcha modal
  mask: 0.5,
  // allows to close the captcha modal by clicking the mask
  maskClosable: false,
  // custom icons here
  closeIcon:
  '<svg t="1590331085919" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3734" width="20" height="20"><path d="M512 451.67l225.835-225.835a42.667 42.667 0 0 1 60.33 60.33L572.331 512l225.834 225.835a42.667 42.667 0 0 1-60.33 60.33L512 572.331 286.165 798.165a42.667 42.667 0 1 1-60.33-60.33L451.669 512 225.835 286.165a42.667 42.667 0 0 1 60.33-60.33L512 451.669z" p-id="3735" fill="#8a8a8a"></path></svg>',
  sliderIcon:
  '<svg t="1590338601818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6547" width="20" height="20"><path d="M512.299934 1023.800044c-10.797617 0-21.595234-3.999117-29.993381-11.797396-17.496139-16.496359-18.195984-44.090269-1.799602-61.586408l412.508958-437.10353c8.398147-8.898036 8.298169-23.894726-0.599868-32.692784L481.606708 74.409578c-17.096227-16.896271-17.296183-44.490181-0.299934-61.586408 16.896271-16.896271 44.390203-17.196205 61.586408-0.299934l410.809333 406.11037c42.290666 41.790777 43.590379 111.075485 2.699404 154.465909l-412.508958 437.003552c-8.69808 9.097992-20.195543 13.696977-31.593027 13.696977z" p-id="6548"></path><path d="M86.093999 924.821889c-10.697639 0-21.495256-3.999117-29.793425-11.897374-17.496139-16.496359-18.295962-44.090269-1.799603-61.586408l315.930274-334.626147c8.398147-9.097992 8.298169-24.094682-0.599868-32.792762L55.500751 173.587689c-16.996249-16.896271-17.196205-44.490181-0.299934-61.686386 16.896271-16.996249 44.390203-17.296183 61.586408-0.199956L431.017873 422.032856c42.290666 41.790777 43.490402 111.075485 2.799382 154.465909l-315.930273 334.626147c-8.69808 9.097992-20.195543 13.696977-31.792983 13.696977z" p-id="6549"></path></svg>',
  extraIcon:
  '<svg t="1590289223124" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2770" width="15" height="15"><path d="M512.002558 64.24521c-247.292176 0-447.75786 200.464661-447.75786 447.756837 0 247.287059 200.464661 447.752744 447.75786 447.752744 247.286036 0 447.75172-200.464661 447.75172-447.752744C959.754279 264.710894 759.288594 64.24521 512.002558 64.24521zM512.010745 735.87586c-20.602224 0-37.319977-16.718777-37.319977-37.323047 0-20.597107 16.717753-37.319977 37.319977-37.319977 20.60427 0 37.297464 16.72287 37.297464 37.319977C549.308209 719.158107 532.613992 735.87586 512.010745 735.87586zM549.308209 567.969733c0 20.600177-16.693194 37.293371-37.297464 37.293371-20.602224 0-37.319977-16.693194-37.319977-37.293371L474.690768 325.420581c0-20.605294 16.717753-37.297464 37.319977-37.297464 20.60427 0 37.297464 16.693194 37.297464 37.297464L549.308209 567.969733z" p-id="2771" fill="#3388ff"></path></svg>',
  // tolerance range: 5° - 45°
  tolerance: 10,
  // fading duration of the captcha modal
  duration: 500,
  // captcha title
  title: 'Captcha Title',
  // captcha description
  text: 'Captcha Description',
  // additional message displayed at the bottom of the captcha
  extra: null,
  extraColor: '#38F',
  extraLink: 'https://github.com/zpfz',
  // z-index prop
  zIndex: 9999
});

Changelog:

02/03/2021

• JS Updated