docs(demo): add demo examples of reCAPTCHA v3 API usage

demo/bin/examples.ts

@@ -43,6 +43,13 @@ export const examples: Example[] = [
  label: 'Invisible',
  title: 'Invisible reCAPTCHA API Example',
  },
+ {
+ entry: 'demo-v3',
+ name: 'v3',
+ path: '/v3',
+ label: 'reCAPTCHA v3',
+ title: 'reCAPTCHA v3 Example',
+ },
  {
  entry: 'demo-language',
  name: 'language',

demo/src/app/examples/v3/v3-demo.component.html

@@ -0,0 +1,15 @@
+<recaptcha-demo-wrapper>
+ <button (click)="executeAction('homepage')">Execute "homepage" action</button>
+ <button (click)="executeAction('shoppingCart')">Execute "shoppingCart" action</button>
+
+ <h3>Most recent token</h3>
+ <pre>{{ formatToken(recentToken) }}</pre>
+
+ <h3>reCAPTCHA execution log</h3>
+ <pre *ngIf="executionLog.length === 0">(empty)</pre>
+ <ol *ngIf="executionLog.length > 0">
+ <li *ngFor="let entry of executionLog">
+ Action: <code>{{ entry.action }}</code>. Token: <code>{{ formatToken(entry.token) }}</code>
+ </li>
+ </ol>
+</recaptcha-demo-wrapper>

demo/src/app/examples/v3/v3-demo.component.ts

@@ -0,0 +1,51 @@
+import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
+
+import { OnExecuteData, ReCaptchaV3Service } from 'ng-recaptcha';
+import { Subscription } from 'rxjs';
+
+@Component({
+ selector: 'recaptcha-demo',
+ templateUrl: './v3-demo.component.html',
+})
+export class RecaptchaV3DemoComponent implements OnInit, OnDestroy {
+ public recentToken: string = '';
+ public readonly executionLog: OnExecuteData[] = [];
+
+ private allExecutionsSubscription: Subscription;
+ private singleExecutionSubscription: Subscription;
+
+ constructor(
+ private recaptchaV3Service: ReCaptchaV3Service,
+ ) {
+ }
+
+ public executeAction(action: string): void {
+ if (this.singleExecutionSubscription) {
+ this.singleExecutionSubscription.unsubscribe();
+ }
+ this.singleExecutionSubscription = this.recaptchaV3Service.execute(action)
+ .subscribe((token) => this.recentToken = token);
+ }
+
+ public ngOnInit() {
+ this.allExecutionsSubscription = this.recaptchaV3Service.onExecute
+ .subscribe((data) => this.executionLog.push(data));
+ }
+
+ public ngOnDestroy() {
+ if (this.allExecutionsSubscription) {
+ this.allExecutionsSubscription.unsubscribe();
+ }
+ if (this.singleExecutionSubscription) {
+ this.singleExecutionSubscription.unsubscribe();
+ }
+ }
+
+ public formatToken(token: string): string {
+ if (!token) {
+ return '(empty)';
+ }
+
+ return `${token.substr(0, 7)}...${token.substr(-7)}`;
+ }
+}

demo/src/app/examples/v3/v3-demo.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { RECAPTCHA_V3_SITE_KEY, RecaptchaV3Module } from 'ng-recaptcha';
+
+import { PAGE_SETTINGS } from '../../demo-wrapper/demo-wrapper.component';
+import { DemoWrapperModule } from '../../demo-wrapper/demo-wrapper.module';
+import { RecaptchaV3DemoComponent } from './v3-demo.component';
+import { settings } from './v3-demo.data';
+
+@NgModule({
+ bootstrap: [RecaptchaV3DemoComponent],
+ declarations: [RecaptchaV3DemoComponent],
+ imports: [
+ BrowserModule,
+ RecaptchaV3Module,
+ DemoWrapperModule,
+ ],
+ providers: [
+ { provide: PAGE_SETTINGS, useValue: settings },
+ { provide: RECAPTCHA_V3_SITE_KEY, useValue: '6LeGCZAUAAAAADuhzcuvSB-lYDsxJBl9HUWtZkUM' },
+ ],
+})
+export class DemoModule { }