Simplify Bot Prevention For Your Internet Apps with EasyCaptchaJS

EasyCaptchaJS is a light-weight but customizable jQuery plugin that makes including Google reCAPTCHA safety to your web sites/net apps a breeze.

Ideally suited for login varieties, sign-up pages, and anyplace in your web site the place you must validate human customers and keep off bots. With its intuitive API and auto-initialization choices, you’ll be able to shortly safe websites in opposition to bots with out the standard reCAPTCHA complexity.

To make use of the reCAPTCHA API, you will have a web site key from Google. Go to the Google reCAPTCHA Admin Console, register your web site, and retrieve your web site key.

Learn how to use it:

1. Set up & obtain the EasyCaptchaJS by way of NPM.

# NPM
$ npm i easycaptchajs

2. Load the EasyCaptchaJS plugin after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/easycaptcha.min.js"></script>

3. Initialize the plugin mechanically by add your Google reCAPTCHA web site key to the ReCAPTCHA_API_KEY_CLIENT meta tag.

<meta identify="ReCAPTCHA_API_KEY_CLIENT" content material="YOUR SITE KEY HERE">

4. Add the data-auto-easycaptcha to the targetElement which can maintain the Google reCAPTCHA. The data-okbtn-selector attribute is used to specify the goal button which is disabled on web page load till your guests get verified.

<div class="captchaTarget" 
     data-auto-easycaptcha 
     data-okbtn-selector="#submit">
</div>

<button sort="button" id="submit">
  Submit
</button>

5. It’s also possible to initialize the plugin manually by calling the strategy EasyCaptcha on the goal aspect.

<div id="targetElement"></div>

$('#targetElement').EasyCaptcha({
  // choices right here
});

6. All potential HTML knowledge attributes:

<div id="targetElement"
     data-recaptcha-apikey="YOUR SITE KEY" 
     data-theme="darkish" 
     data-okbtn-selector="#submit" 
     data-required-msg-example-selector="#errorMsg"
     data-loading-msg-example-selector="#loadingMsg"
     data-error-msg-example-selector="#errorMsg">
</div>

7. All potential plugin choices.

$('#targetElement').EasyCaptcha({
  ReCAPTCHA_API_KEY_CLIENT: null,
  ReCaptchaSubmit: {
    success: () => {
    },
    failed: () => {
    },
    expired: () => {
    },
  },
  autoVerification: {
    okBtn: null,
    requiredMsg: "<div class="alert alert-danger">Please confirm that you're not a robotic.</div>",
  },
  apiScriptLoading: {
    loadingMsg: '<div class="spinner-border text-primary" position="standing"></div>',
    error: () => {},
    errorMsg: "<div class="alert alert-danger">Error whereas loading Api Script. <b class="retry-load-api-script clickable">retry</b></div>",
  },
  theme: 'mild', // or 'darkish'
  failure: (error) => {
    console.error(error);
  }
});

8. API strategies.

// Confirm the reCAPTCHA checkbox standing
// Properties:
// parentElement: The mum or dad aspect of the EasyCaptcha checkbox
// verified: A boolean indicating whether or not the reCAPTCHA checkbox has been verified
$().EasyCaptcha('confirm');

// Get the reCAPTCHA response token
// Properties:
// parentElement: The mum or dad aspect of the EasyCaptcha checkbox
// token: The reCAPTCHA response token
$().EasyCaptcha('response');

// Reset the reCAPTCHA response token
$().EasyCaptcha('reset');

// Destroy the plugin
$().EasyCaptcha('destroy');

This superior jQuery plugin is developed by HichemTab-tech. For extra Superior Usages, please examine the demo web page or go to the official web site.