Tuesday, June 25, 2024
HomejQuerySimplify Bot Prevention For Your Internet Apps with EasyCaptchaJS

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 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" 
<button sort="button" id="submit">

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

<div id="targetElement"></div>
  // choices right here

6. All potential HTML knowledge attributes:

<div id="targetElement"
     data-recaptcha-apikey="YOUR SITE KEY" 

7. All potential plugin choices.

  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) => {

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

// Get the reCAPTCHA response token
// Properties:
// parentElement: The mum or dad aspect of the EasyCaptcha checkbox
// token: The reCAPTCHA response token

// Reset the reCAPTCHA response token

// Destroy the plugin

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.



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments