spaier-ng-recaptcha
Prerequisites
Node and npm or yarn.
Features
Supports Angular forms.
Supports required attribute.
Supports V2(Checkbox and Invisible) and V3 reCAPTCHA.
Supports dynamic updating.
Supports custom script loading via providing RecaptchaService
Table of Contents
Installation
npm install spaier-ng-recaptcha
or
yarn add spaier-ng-recaptcha
Overview
Usage
Load script
Add RecaptchaLoaderModule
to CoreModule
or AppModule
.
It provides RecaptchaService
.
language
: overrides default language.
render
:
RecaptchaRender.Explicit
doesn't render anything. Default.
RecaptchaRender.Onload
renders the first element with a g-recaptcha
class.
your_sitekey
renders isolated invisible reCAPTCHA that can be used from RecaptchaService
. V3 best practice.
onload
: specifies a function name on the window object. Defaults to RecaptchaOnloadEventName = 'recaptchaloaded'
onloadFunc
: specifies a function that is executed after reCAPTCHA loads.
recaptchaUrl
: script's url. Defaults to RecaptchaGoogleUrl = 'https://www.google.com/recaptcha/api.js'
export async function onLoad ( recaptcha : Recaptcha ) {
const result = await recaptcha . execute ( ' your_sitekey ' , { action : ' background ' } )
console . log ( result )
}
@ NgModule ( {
imports : [
RecaptchaLoaderModule . withParameters ( {
language : ' en ' ,
render : ' your_sitekey ' ,
onloadFunc : onLoad
} ) ,
] ,
} )
RecaptchaService
V3 Only.
Inject RecaptchaService
and use provided recaptcha$
observable or recaptcha
object.
If you use recaptcha
object be sure to check that reCAPTCHA library is loaded.
constructor ( private readonly recaptchaService : RecaptchaService ) { }
async execute ( ) {
const recaptcha = await this . recaptchaService . recaptcha$ . toPromise ( )
const result1 = await recaptcha . execute ( { action : ' something ' } )
const result2 = await this . recaptchaService . recaptcha . execute ( { action : ' something ' } )
}
RecaptchaDirective
Add RecaptchaDirectiveModule
to use RecaptchaDirective
to any module that uses it or SharedModule
.
Use it in your template:
< select [( ngModel )]= " theme " >
< option > dark </ option >
< option > light </ option >
</ select >
< select [( ngModel )]= " size " >
< option > normal </ option >
< option > compact </ option >
< option > invisible </ option >
</ select >
< select [( ngModel )]= " badge " >
< option > bottomright </ option >
< option > bottomleft </ option >
< option > inline </ option >
< option > none </ option >
</ select >
< input type = " text " [( ngModel )]= " language " />
< input type = " text " [( ngModel )]= " action " />
< div
required # recaptcha = " rcpRecaptcha " rcpRecaptcha data-sitekey = " 6LcqUE4UAAAAAKZ5w4ejDKGo8GxOLkPMy6RhaErW "
[ data-theme ]= " theme " [ data-size ]= " size " [ data-hl ]= " language " [ data-badge ]= " badge " [ data-action ]= " action "
( data-callback )= " onResolved($event) "
( data-expired-callback )= " onExpired($event) "
( data-error-callback )= " onError($event) " >
</ div >
< button type = " button " [ disabled ]= " recaptcha.size != 'invisible' " ( click )= " execute() " > Execute </ button >
< button type = " button " ( click )= " reset() " > Reset </ button >
< button type = " button " ( click )= " getResponse() " > Get Response </ button >
@ ViewChild ( ' recaptcha ' ) recaptcha ! : RecaptchaDirective
theme = ' dark '
size = ' normal '
badge = ' none '
language = ' en '
action = ' form '
execute ( ) {
this . recaptcha . execute ( )
console . log ( ' executed ' )
}
reset ( ) {
this . recaptcha . reset ( )
}
getResponse ( ) {
console . log ( ' response: ' + this . recaptcha . getResponse ( ) )
}
onResolved ( response : string ) {
console . log ( ' callback: ' + response )
}
onError ( event : any ) {
console . log ( ' error ' )
console . log ( event )
}
onExpired ( event : any ) {
console . log ( ' expired ' )
console . log ( event )
}
Forms
Add RecaptchaFormsModule
to use reCAPTCHA with @angular/forms
to any module that uses it or SharedModule
.
Template forms
< form ( ngSubmit )= " onSubmit($event) " # form = " ngForm " >
< div [( ngModel )]= " captcha " name = " captcha "
required # recaptcha = " rcpRecaptcha " rcpRecaptcha data-sitekey = " 6LcqUE4UAAAAAKZ5w4ejDKGo8GxOLkPMy6RhaErW "
[ data-theme ]= " theme " [ data-size ]= " size " [ data-hl ]= " language " [ data-badge ]= " badge " [ data-action ]= " action "
( data-callback )= " onResolved($event) "
( data-expired-callback )= " onExpired($event) "
( data-error-callback )= " onError($event) " >
</ div >
< button type = " button " [ disabled ]= " recaptcha.size != 'invisible' " ( click )= " execute() " > Execute </ button >
< button type = " button " ( click )= " reset() " > Reset </ button >
< button type = " button " ( click )= " getResponse() " > Get Response </ button >
< button type = " submit " [ disabled ]= " !form.form.valid " > Submit </ button >
</ form >
captcha ! : any
onSubmit ( event : any ) {
console . log ( ' submit ' )
console . log ( event )
console . log ( this . captcha )
}
Reactive forms
< form [ formGroup ]= " form " ( ngSubmit )= " onSubmit() " >
< div formControlName = " captcha "
required # recaptcha = " rcpRecaptcha " rcpRecaptcha data-sitekey = " 6LcqUE4UAAAAAKZ5w4ejDKGo8GxOLkPMy6RhaErW "
[ data-theme ]= " theme " [ data-size ]= " size " [ data-hl ]= " language " [ data-badge ]= " badge " [ data-action ]= " action "
( data-callback )= " onResolved($event) "
( data-expired-callback )= " onExpired($event) "
( data-error-callback )= " onError($event) " >
</ div >
< button type = " button " [ disabled ]= " recaptcha.size != 'invisible' " ( click )= " execute() " > Execute </ button >
< button type = " button " ( click )= " reset() " > Reset </ button >
< button type = " button " ( click )= " getResponse() " > Get Response </ button >
< button type = " submit " [ disabled ]= " !form.valid " > Submit </ button >
</ form >
form = this . fb . group ( {
' captcha ' : [ ' ' , Validators . required ]
} )
constructor ( private readonly fb : FormBuilder ) { }
onSubmit ( event : any ) {
console . log ( ' submit ' )
console . log ( event )
console . log ( this . form . value )
}
Resources
License
MIT