1.0.1 • Published 5 years ago
angular7-recaptcha v1.0.1
Angular 7 : TypeScript component for Google reCaptcha 2
Based on xmaestro/angular2-recaptcha. Modified by hass-sha.
This is just very simple Angular 7 component that implements Google reCaptcha 2.
Installation
Install it from npm:
npm install angular7-recaptcha
Usage
SystemJS config
System.config({
map: {
'angular7-recaptcha': 'node_modules/angular7-recaptcha'
},
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
'angular7-recaptcha': {defaultExtension: 'js', main:'index'}
}
});
Module
...
import { ReCaptchaModule } from 'angular7-recaptcha';
...
...
@NgModule({
imports: [...,ReCaptchaModule]
})
...
View
Use in template like below
<ng7-recaptcha site_key="<GOOGLE_RECAPTCHA_KEY>"></ng7-recaptcha>
Where site_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 Either
light
(default) ordark
. - type Either
image
(default) oraudio
. - size Either
normal
(default),compact
orinvisible
. - tabindex Tabindex for navigation, default 0.
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.
<ng7-recaptcha (captchaResponse)="handleCorrectCaptcha($event)" site_key="<GOOGLE_RECAPTCHA_KEY>"></ng7-recaptcha>
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 'angular7-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();