Repository files navigation

This is just very simple Angular 2 component that implements GooglereCaptcha 2.

Install it from npm:

npm install angular2-recaptcha

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

...import{ReCaptchaModule}from'angular2-recaptcha';...

 ...@NgModule({imports:[...,ReCaptchaModule]})  ...

Use in template like below

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

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

• language One of the ISO language values supported by Google:https://developers.google.com/recaptcha/docs/language Note that due to the design of the reCaptcha API, only the first component on a page can change the language from default English.
• theme Eitherlight (default) ordark.
• type Eitherimage (default) oraudio.
• size Eithernormal (default),compact orinvisible.
• tabindex Tabindex for navigation, default 0.
• global If true, the reCaptcha script will be loaded fromwww.recaptcha.net instead ofwww.google.com

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

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

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

To access the methods, use@ViewChild.

import{ViewChild}from'@angular/core';import{ReCaptchaComponent}from'angular2-recaptcha';exportclassRegisterComponent{  @ViewChild(ReCaptchaComponent)captcha:ReCaptchaComponent;}

You can request a new captcha to be displayed:

this.captcha.reset();

The previous response can be retrieved:

lettoken=this.captcha.getResponse();