DEV Community

Cover image for EasyCaptchaJS: Simplified reCAPTCHA Integration
HichemTech
HichemTech

Posted on

EasyCaptchaJS: Simplified reCAPTCHA Integration

EasyCaptchaJS is a jQuery/JS library that streamlines the integration of Google reCAPTCHA API into web pages. It enhances security and user experience by providing anti-bot protection.

Features:

  • Easy Integration: Seamlessly integrate Google reCAPTCHA API into your web pages.
    Dynamic Script Loading: The library loads the necessary reCAPTCHA API script automatically for smooth usage.

  • Customizable Callbacks: Define success, failure, and expired event callbacks for reCAPTCHA submissions.

  • Verification and Token Retrieval: Verify reCAPTCHA responses and retrieve reCAPTCHA tokens easily.
    Auto Rendering: Initialize reCAPTCHA automatically with the data-auto-easycaptcha attribute.

  • Theme Customization: Choose between 'light' and 'dark' themes for the reCAPTCHA widget.

Requirements:

jQuery (minimum version 3.7.0)
Optional: Bootstrap (minimum version 4.x)

Installation:

  • Via npm:
npm install easycaptchajs
Enter fullscreen mode Exit fullscreen mode
  • CDN: Include <script> tag with the CDN link.

  • Local Download: Download and include the library script in your project.

Usage:

Initialize EasyCaptchaJS on target elements using jQuery. Two methods to provide options:

  • Using an Options Object.
  • Using Data Attributes.

Examples:

1- Auto Rendering with Data Attributes and okbtn Selector

  • Auto-render reCAPTCHA with just a few data attributes.
  • "OK" button is disabled until reCAPTCHA is verified.

2- Initializing with Options Object

  • Initialize EasyCaptchaJs with a specific element using an options object.
  • Customize success, failure, and expired event callbacks.

3- Initializing on Multiple Targets with Customized Messages

  • Initialize on multiple targets with shared class name.
  • Customize required and error messages using both options and attributes.

Options:

  • Options Object: Customize EasyCaptchaJs behavior using the options object.
  • Options Attributes: Customize using data attributes. Attributes override options object data.

Demo: Demo Example

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up