ngx-captcha

Angular Captcha

Google reCaptcha implementation for Angular 6 and beyond.

Live example: https://enngage.github.io/ngx-captcha/

Installation

npm install ngx-captcha

Import NgxCaptchaModule to your module (i.e. AppModule). You can configure global keys with forRoot (optionally) or you can use siteKey input parameter of captcha components.

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

@NgModule({
  imports: [
    NgxCaptchaModule.forRoot({
      reCaptcha2SiteKey: 'xxxx', // optional, can be overridden with 'siteKey' component property
      invisibleCaptchaSiteKey: 'yyy' // optional, can be overridden with 'siteKey' component property
    }),
  })

export class AppModule { }

Usage

The configuration properties are a copy of the official ones that google provides. For explanation of what these properties do and how to use them, please refer to https://developers.google.com/recaptcha/docs/display and https://developers.google.com/recaptcha/docs/invisible

reCaptcha2

<ngx-recaptcha2
  [size]="size"
  [hl]="lang"
  [theme]="theme"
  [type]="type"
  (expire)="handleExpire()"
  (load)="handleLoad()"
  (success)="handleSuccess($event)">
</ngx-recaptcha2>

Invisible captcha

<ngx-invisible-recaptcha
  [type]="type"
  [badge]="badge"
  (load)="handleLoad()"
  (success)="handleSuccess($event)">
</ngx-invisible-recaptcha>