Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xmaestro/angular2-recaptcha
Angular 2 : Typescript component for Google reCaptcha
https://github.com/xmaestro/angular2-recaptcha
angular2 google-recaptcha typescript typescript-component
Last synced: 2 months ago
JSON representation
Angular 2 : Typescript component for Google reCaptcha
- Host: GitHub
- URL: https://github.com/xmaestro/angular2-recaptcha
- Owner: xmaestro
- License: isc
- Created: 2016-05-05T11:30:21.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-11-27T12:02:57.000Z (about 4 years ago)
- Last Synced: 2024-10-20T18:02:16.177Z (3 months ago)
- Topics: angular2, google-recaptcha, typescript, typescript-component
- Language: TypeScript
- Size: 93.8 KB
- Stars: 79
- Watchers: 8
- Forks: 30
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-angular-components - angular2-recaptcha - Angular 2 : Typescript component for Google reCaptcha. (Uncategorized / Uncategorized)
- awesome-angular-components - angular2-recaptcha - Angular 2 : Typescript component for Google reCaptcha (Uncategorized / Uncategorized)
- awesome-angular-components - angular2-recaptcha - Angular 2 : Typescript component for Google reCaptcha. (Uncategorized / Uncategorized)
README
# Angular 2 : TypeScript component for Google reCaptcha 2
This is just very simple Angular 2 component that implements Google [reCaptcha 2](https://www.google.com/recaptcha/intro/index.html).
Installation
--------------------------------------
Install it from npm:
```bash
npm install angular2-recaptcha
```
Usage
--------------------------------------
### SystemJS config
```js
System.config({
map: {
'angular2-recaptcha': 'node_modules/angular2-recaptcha'
},
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
'angular2-recaptcha': {defaultExtension: 'js', main:'index'}
}
});
```
### Module
```typescript
...
import { ReCaptchaModule } from 'angular2-recaptcha';
...
```
```typescript
...
@NgModule({
imports: [...,ReCaptchaModule]
})
...
```
### View
Use in template like below
```html
```
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) or `dark`.
* **type** Either `image` (default) or `audio`.
* **size** Either `normal` (default), `compact` or `invisible`.
* **tabindex** Tabindex for navigation, default 0.
* **global** If true, the reCaptcha script will be loaded from www.recaptcha.net instead of www.google.com
## 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.
```html
```
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](https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html).
### Import
```typescript
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:
```typescript
this.captcha.reset();
```
The previous response can be retrieved:
```typescript
let token = this.captcha.getResponse();
```