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
• Usage
• Resources
• License

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:

1. RecaptchaRender.Explicit doesn't render anything. Default.
2. RecaptchaRender.Onload renders the first element with a g-recaptcha class.
3. 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) {
  // Sitekey Execution
  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() {
  // Observable
  const recaptcha = await this.recaptchaService.recaptcha$.toPromise()
  const result1 = await recaptcha.execute({ action: 'something' })
  // Value
  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

• Docs: https://spaier.github.io/spaier-ng-recaptcha
• Sample: https://github.io/spaier/spaier-ng-recaptcha/tree/master/projects/sample
• Keys: https://www.google.com/recaptcha/intro/index.html
• reCAPTCHA: https://developers.google.com/recaptcha/docs
• CoreModule: https://angular.io/guide/styleguide#core-feature-module
• SharedModule: https://angular.io/guide/styleguide#shared-feature-module

License

MIT