Angular

Für Angular steht je Hauptversion ein eigenes Paket bereit. Alle Pakete stellen die Komponente eu-captcha mit denselben Eingaben und Ausgaben bereit.

Voraussetzungen

Die folgenden Voraussetzungen müssen erfüllt sein:

Voraussetzung	Wert
Angular	Version 19, 20 oder 21
Sitekey	Öffentlicher Sitekey aus der Ansicht Details
Serverseite	Endpunkt, der das Token prüft

Paket wählen

Wählen Sie das Paket zur Hauptversion Ihres Projekts:

Paket	Angular
@myrasec/eu-captcha-angular19	Version 19
@myrasec/eu-captcha-angular20	Version 20
@myrasec/eu-captcha-angular21	Version 21

Installieren Sie das gewählte Paket, hier am Beispiel von Angular 21:

npm i @myrasec/eu-captcha-angular21

Komponente einbinden

In einer eigenständigen Komponente binden Sie EuCaptchaComponent ein:

import { Component } from '@angular/core';
import { EuCaptchaComponent, isEuCaptchaDone } from '@myrasec/eu-captcha-angular21';

@Component({
  standalone: true,
  imports: [EuCaptchaComponent],
  template: `
    <form (submit)="handleSubmit($event)">
      <!-- your fields -->
      <eu-captcha sitekey="EUCAPTCHA_SITE_KEY" />
      <button type="submit">Submit</button>
    </form>
  `,
})
export class MyFormComponent {
  handleSubmit(event: Event): void {
    event.preventDefault();
    if (!isEuCaptchaDone()) {
      // challenge not yet complete
      return;
    }
    // proceed with form submission
  }
}

In einer Anwendung mit Modulen binden Sie stattdessen EuCaptchaModule ein:

import { NgModule } from '@angular/core';
import { EuCaptchaModule } from '@myrasec/eu-captcha-angular21';

@NgModule({
  imports: [EuCaptchaModule],
})
export class AppModule {}

<!-- in your template -->
<eu-captcha sitekey="EUCAPTCHA_SITE_KEY" />

Note

Sie prüfen die Einbindung mit einem beliebigen erfundenen Sitekey. Zu einem unbekannten Sitekey läuft das CAPTCHA mit den Vorgabewerten, und der gesamte Verkehr wird durchgelassen.

Eingaben

Die folgenden Eingaben stehen zur Verfügung:

Eingabe	Typ	Vorgabe	Wirkung
sitekey	string	—	Öffentlicher Sitekey. Der Wert ist erforderlich.
theme	string	"light"	Darstellung, Werte "light" und "dark".
width	number	330	Breite des Widgets in Pixeln.
height	number	100	Höhe des Widgets in Pixeln.
widgetId	string	—	Eigene Kennung des Widgets. Ohne Angabe erzeugt das Paket eine Kennung. Für euCaptcha.execute() ist der Wert erforderlich.
autostart	boolean	true	Startet die Challenge beim Einhängen der Komponente. Der Wert false verschiebt den Start auf den Aufruf euCaptcha.execute(widgetId).

Ausgaben

Die folgenden Ausgaben stehen zur Verfügung:

Ausgabe	Wert	Wirkung
completed	string	Wird mit dem Token ausgelöst, sobald die Challenge bestanden ist.
expired	—	Wird ausgelöst, wenn das Token abläuft. Ein Token läuft 60 Minuten nach der Lösung ab.
error	—	Wird bei einem Netzwerk- oder Serverfehler ausgelöst.

Beispiel für die Auswertung:

<eu-captcha
  sitekey="EUCAPTCHA_SITE_KEY"
  (completed)="onToken($event)"
  (expired)="onExpired()"
  (error)="onError()"
/>

onToken(token: string): void {
  console.log('token:', token);
}

onExpired(): void {
  console.log('token expired');
}

onError(): void {
  console.log('challenge error');
}

Beispiele für die Darstellung:

<eu-captcha sitekey="EUCAPTCHA_SITE_KEY" theme="dark" />
<eu-captcha sitekey="EUCAPTCHA_SITE_KEY" [width]="280" />
<eu-captcha sitekey="EUCAPTCHA_SITE_KEY" [height]="60" />

Challenge verzögert starten

Setzen Sie autostart auf false und vergeben Sie eine Kennung:

<eu-captcha
  sitekey="EUCAPTCHA_SITE_KEY"
  widgetId="my-captcha"
  [autostart]="false"
/>

<button (click)="euCaptcha.execute('my-captcha')">Verify</button>

Zustand abfragen

Prüfen Sie vor dem Absenden, ob die Challenge bestanden ist:

import { isEuCaptchaDone } from '@myrasec/eu-captcha-angular21';

function handleSubmit(): void {
    if (!isEuCaptchaDone()) {
        // challenge not yet complete
        return;
    }
    // proceed with form submission
}

Alternativ warten Sie auf die Nachricht euCaptchaDone am Fenster:

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({ /* ... */ })
export class MyComponent implements OnInit, OnDestroy {
  private listener = (msg: MessageEvent) => {
    if (msg.data.type === 'euCaptchaDone') {
      // enable submit button, update state, etc.
    }
  };

  ngOnInit(): void {
    window.addEventListener('message', this.listener, false);
  }

  ngOnDestroy(): void {
    window.removeEventListener('message', this.listener, false);
  }
}

Warning

Die Prüfung im Browser steuert nur die Bedienung. Prüfen Sie das Token in jedem Fall zusätzlich auf dem Server. Siehe Endpunkt /verify.

Vollständiges Beispiel

Siehe Angular und Java.