Spaier-ng-recaptcha NPM

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

Installation

npm install spaier-ng-recaptcha

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)
}