ng-recaptcha

What is ng-recaptcha?

The ng-recaptcha package is an Angular library that provides a simple way to integrate Google's reCAPTCHA into Angular applications. It supports both reCAPTCHA v2 and v3, allowing developers to add CAPTCHA verification to forms and other interactive elements to enhance security.

What are ng-recaptcha's main functionalities?

Basic reCAPTCHA v2 Integration

This feature allows you to integrate the basic reCAPTCHA v2 into your Angular application. The component listens for the resolved event to handle the CAPTCHA response.

import { Component } from '@angular/core';

@Component({
  selector: 'app-recaptcha',
  template: '<re-captcha (resolved)="resolved($event)" siteKey="your-site-key"></re-captcha>'
})
export class RecaptchaComponent {
  resolved(captchaResponse: string) {
    console.log(`Resolved captcha with response: ${captchaResponse}`);
  }
}

reCAPTCHA v3 Integration

This feature demonstrates how to use reCAPTCHA v3, which does not require user interaction. Instead, it generates a token based on user behavior, which can be used for verification.

import { Component } from '@angular/core';
import { ReCaptchaV3Service } from 'ng-recaptcha';

@Component({
  selector: 'app-recaptcha-v3',
  template: '<button (click)="executeAction()">Execute reCAPTCHA v3</button>'
})
export class RecaptchaV3Component {
  constructor(private recaptchaV3Service: ReCaptchaV3Service) {}

  executeAction() {
    this.recaptchaV3Service.execute('importantAction').subscribe((token) => {
      console.log(`Token received: ${token}`);
    });
  }
}

Invisible reCAPTCHA

This feature shows how to implement invisible reCAPTCHA, which is triggered programmatically rather than by user interaction. This is useful for forms where you want to minimize user friction.

import { Component } from '@angular/core';

@Component({
  selector: 'app-invisible-recaptcha',
  template: '<re-captcha (resolved)="resolved($event)" siteKey="your-site-key" size="invisible"></re-captcha><button (click)="executeCaptcha()">Submit</button>'
})
export class InvisibleRecaptchaComponent {
  resolved(captchaResponse: string) {
    console.log(`Resolved captcha with response: ${captchaResponse}`);
  }

  executeCaptcha() {
    // Trigger the invisible reCAPTCHA
  }
}

Other packages similar to ng-recaptcha

ngx-captcha

ngx-captcha is another Angular library for integrating Google's reCAPTCHA. It supports both reCAPTCHA v2 and v3, similar to ng-recaptcha. However, ngx-captcha offers more customization options and additional features like language support and multiple CAPTCHA instances on a single page.

angular-google-recaptcha

angular-google-recaptcha is a lightweight Angular package for adding Google's reCAPTCHA to your application. It is simpler and less feature-rich compared to ng-recaptcha, making it suitable for projects that require basic CAPTCHA functionality without additional complexity.

README

The README file is missing

Changelog

12.0.0 (2023-05-24)

Features

• package: add Angular 16 support (77a7d1f), closes #288

BREAKING CHANGES

• package: - Angular v15 is no longer supported with this version. Pin ng-recaptcha to v11.x.x to retain support for a previous Angular version

<a name="11.0.0"></a>