diff --git a/demo/bin/examples.ts b/demo/bin/examples.ts index f63b8b1..18b577d 100644 --- a/demo/bin/examples.ts +++ b/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', diff --git a/demo/src/app/examples/v3/v3-demo.component.html b/demo/src/app/examples/v3/v3-demo.component.html new file mode 100644 index 0000000..d797ae7 --- /dev/null +++ b/demo/src/app/examples/v3/v3-demo.component.html @@ -0,0 +1,15 @@ + + + + +

Most recent token

+
{{ formatToken(recentToken) }}
+ +

reCAPTCHA execution log

+
(empty)
+
    +
  1. + Action: {{ entry.action }}. Token: {{ formatToken(entry.token) }} +
  2. +
+
diff --git a/demo/src/app/examples/v3/v3-demo.component.ts b/demo/src/app/examples/v3/v3-demo.component.ts new file mode 100644 index 0000000..b443573 --- /dev/null +++ b/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)}`; + } +} diff --git a/demo/src/app/examples/v3/v3-demo.module.ts b/demo/src/app/examples/v3/v3-demo.module.ts new file mode 100644 index 0000000..89b9499 --- /dev/null +++ b/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 { }