Google Recaptcha Implementation for Angular 13

Angular Captcha is Google reCaptcha implementation for Angular 13/14.

Depending on whether you want to use interactive forms or template-based forms, you need to include the appropriate modules as well. Add ReactiveFormsModule to your imports if you want to use interactive forms. If you prefer the form-driven approach, just add FormsModule it to your module.

Features:

  • reCaptcha v2
  • reCaptcha v3 (beta)
  • invisible reCaptcha

How to make use of it:

Installation

npm install ngx-captcha

1. Import NgxCaptchaModule to your module (i.e. AppModule)

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { NgxCaptchaModule } from 'ngx-captcha';

@NgModule({
  imports: [
    ReactiveFormsModule,
    NgxCaptchaModule
  })

export class AppModule { }

2. Usage.

export class YourComponent implements OnInit {
  protected aFormGroup: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.aFormGroup = this.formBuilder.group({
      recaptcha: ['', Validators.required]
    });
  }
}
<form [formGroup]="aFormGroup">
  <ngx-recaptcha2 #captchaElem
    [siteKey]="siteKey"
    (reset)="handleReset()"
    (expire)="handleExpire()"
    (load)="handleLoad()"
    (success)="handleSuccess($event)"
    [useGlobalDomain]="false"
    [size]="size"
    [hl]="lang"
    [theme]="theme"
    [type]="type"
    formControlName="recaptcha">
  </ngx-recaptcha2>
</form>

Read More –

A Simple hCaptcha Integration Component Library Using Vue.js
A Lightweight Image Rotation (Captcha) Verification Plugin | RVerify.js


See Demo And Download

Official Website(Enngage): Click Here

This superior jQuery/javascript plugin is developed by Enngage. For extra advanced usage, please go to the official website.

Share