xmaestro / Angular2 Recaptcha
Licence: isc
Angular 2 : Typescript component for Google reCaptcha
Stars: ✭ 81
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Angular2 Recaptcha
Angular Redux Ngrx Examples
Sample projects with Angular (4.x) + Angular CLI + ngrx (Redux) + Firebase
Stars: ✭ 73 (-9.88%)
Mutual labels: angular2
Ng2 Konva
Angular & Canvas - JavaScript library for drawing complex canvas graphics using Angular.
Stars: ✭ 78 (-3.7%)
Mutual labels: angular2
Ng2 Breadcrumbs
A breadcrumb service for the Angular 7 router
Stars: ✭ 61 (-24.69%)
Mutual labels: angular2
Egeo
EGEO is the open-source UI library used to build Stratio's UI. It includes UI Components, Utilities, Services and much more to build user interfaces quickly and with ease. The library is distributed in AoT mode.
Stars: ✭ 69 (-14.81%)
Mutual labels: angular2
Until Destroy
🦊 RxJS operator that unsubscribe from observables on destroy
Stars: ✭ 1,071 (+1222.22%)
Mutual labels: angular2
Ngx Jsonapi
JSON API client library for Angular 5+ 👌 :: Production Ready 🚀
Stars: ✭ 81 (+0%)
Mutual labels: angular2
Angular2 Bs4 Navbar
An Angular2 App with Bootstrap4 Navbar and routing using Angular2's Router v3, follows Angular Styleguide
Stars: ✭ 64 (-20.99%)
Mutual labels: angular2
Angular I18next
angular v2.0+ integration with i18next v8.4+
Stars: ✭ 69 (-14.81%)
Mutual labels: angular2
Root Bootstrap 4 Admin Template With Angularjs Angular 2 Support
Root is Boostrap 4 Admin Template with Angular 2 and AngularJS support
Stars: ✭ 54 (-33.33%)
Mutual labels: angular2
Drip Ionic3
「水滴打卡」App Open Source Code Base On Ionic V3 Framework
Stars: ✭ 74 (-8.64%)
Mutual labels: angular2
Ngx Lazy Load Images
Image lazy load library for Angular 2+
Stars: ✭ 77 (-4.94%)
Mutual labels: angular2
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:
- 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.
- 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.
<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();
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].