Home

Awesome

Travis

Angular 2 : TypeScript component for Google reCaptcha 2

This is just very simple Angular 2 component that implements Google reCaptcha 2.

Installation

Install it from npm:

npm install angular2-recaptcha

Usage

SystemJS config

System.config({
    map: {
        'angular2-recaptcha': 'node_modules/angular2-recaptcha'
    },
    packages: {
        app: {
            format: 'register',
            defaultExtension: 'js'
        },
        'angular2-recaptcha': {defaultExtension: 'js', main:'index'}
    }
});

Module

...
import { ReCaptchaModule } from 'angular2-recaptcha';
...
 ...
@NgModule({
  imports: [...,ReCaptchaModule]
  })
  ...

View

Use in template like below

 <re-captcha site_key="<GOOGLE_RECAPTCHA_KEY>"></re-captcha>

Where site_key is the Google reCaptcha public key. Optional parameters as follows:

Callback

To catch the success callback, you will need to subscribe to the captchaResponse event. The response token will be passed in the $event parameter. To wait for component to be loaded subscribe to loaded event.

<re-captcha (captchaResponse)="handleCorrectCaptcha($event)" (loaded)="sendCaptchaExecuteHere()" site_key="<GOOGLE_RECAPTCHA_KEY>"></re-captcha>

The event captchaExpired is triggered when the displayed image has expired. It does not have any event parameters.

Methods

To access the methods, use @ViewChild.

Import

import { ViewChild } from '@angular/core';
import { ReCaptchaComponent } from 'angular2-recaptcha';

export class RegisterComponent {
  @ViewChild(ReCaptchaComponent) captcha: ReCaptchaComponent;
}

Usage

You can request a new captcha to be displayed:

this.captcha.reset();

The previous response can be retrieved:

let token = this.captcha.getResponse();