Angular und Java

Dieses Beispiel schützt das Kontaktformular einer bestehenden Anwendung. Das Frontend ist eine Angular-Anwendung, das Backend ein Java-Server mit Spring Boot. Beide laufen bereits. Für das Myra EU CAPTCHA ändern Sie nur die unten mit einem Pfeil markierten Dateien.

Voraussetzungen

Die folgenden Voraussetzungen müssen erfüllt sein:

Voraussetzung	Wert
Node.js mit npm	installiert
JDK	Version 17 mit Maven oder Gradle
Sitekey	Öffentlicher Sitekey und Secret aus der Ansicht Details

Warning

Der öffentliche Sitekey gehört ins Frontend, das Secret ausschließlich ins Backend. Ein Secret im Auslieferungspaket des Frontends liest jeder Besucher mit.

Projektstruktur

Die folgenden Dateien ändern sich. Alles Übrige im Projekt bleibt unverändert:

mein-projekt/
├── frontend/                            # bestehende Angular-Anwendung
│   ├── package.json                     # ← Schritt 1: Paket @myrasec/eu-captcha-angular20 eintragen
│   ├── angular.json
│   └── src/app/
│       ├── app.component.ts
│       └── contact-form.component.ts    # ← Schritt 1 und 2: Widget einbinden, Token absenden
└── backend/                             # bestehender Java-Server (Spring Boot)
    ├── pom.xml                          # ← Schritt 3: Abhängigkeit eintragen
    └── src/main/java/com/beispiel/
        ├── Application.java
        └── ContactController.java       # ← Schritt 3: Prüfung an den Anfang der Methode setzen

Schritt 1: Widget einbinden

Das Formular steht in der Datei frontend/src/app/contact-form.component.ts.

Installieren Sie das Paket zu Ihrer Angular-Version, hier Angular 20:

npm i @myrasec/eu-captcha-angular20

Setzen Sie die Komponente in das Formular und nehmen Sie das Token über das Ereignis completed entgegen:

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

@Component({
  standalone: true,
  imports: [EuCaptchaComponent],
  template: `
    <form (submit)="handleSubmit($event)">
      <input name="email" type="email" required />
      <textarea name="message" required></textarea>

      <!-- (completed) liefert das Token, sobald die Challenge abgeschlossen ist -->
      <eu-captcha sitekey="EUCAPTCHA_SITE_KEY" (completed)="token = $event" />

      <button type="submit">Submit</button>
    </form>
  `,
})
export class ContactFormComponent {
  token = '';
  // handleSubmit folgt in Schritt 2
}

Der Selektor <eu-captcha> lädt das Skript verify.js, legt den versteckten iframe an und startet die Challenge selbsttätig.

Eine Übersicht der Pakete je Angular-Version steht unter Angular.

Schritt 2: Token absenden

Prüfen Sie vor dem Absenden mit isEuCaptchaDone(), ob die Challenge abgeschlossen ist. Senden Sie das Token anschließend im Feld eu-captcha-response des JSON-Rumpfs:

async handleSubmit(event: Event): Promise<void> {
  event.preventDefault();
  if (!isEuCaptchaDone()) {
    // challenge not yet complete
    return;
  }
  const fields = Object.fromEntries(new FormData(event.target as HTMLFormElement));
  const res = await fetch('/api/contact', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ ...fields, 'eu-captcha-response': this.token }),
  });
  if (res.ok) {
    // success
  }
}

Schritt 3: Token prüfen

Die Prüfung gehört in den serverseitigen Handler, der die Formulardaten entgegennimmt, hier die Methode zur Route /api/contact in der Datei backend/src/main/java/com/beispiel/ContactController.java. Sie steht an erster Stelle, vor jeder Verarbeitung.

Tragen Sie die Abhängigkeit in die Datei pom.xml ein:

<dependency>
  <groupId>com.myrasec</groupId>
  <artifactId>eu-captcha-java-resttemplate</artifactId>
  <version>1.0.0</version>
  <scope>compile</scope>
</dependency>

Lesen Sie den JSON-Rumpf als Map und setzen Sie die Prüfung an den Anfang der Methode:

import com.myrasec.client.ApiClient;
import com.myrasec.client.api.EuCaptchaApi;
import com.myrasec.client.model.VerifyRequest;
import com.myrasec.client.model.VerifyResponse;

@PostMapping("/api/contact")
public ResponseEntity<String> contact(
        @RequestBody Map<String, String> body,
        HttpServletRequest req) {

    // Prüfung vor jeder Verarbeitung
    EuCaptchaApi api = new EuCaptchaApi(new ApiClient());

    VerifyRequest request = new VerifyRequest()
            .sitekey(System.getenv("EUCAPTCHA_SITE_KEY"))
            .secret(System.getenv("EUCAPTCHA_SECRET_KEY"))
            .clientIp(req.getRemoteAddr())
            .clientToken(body.get("eu-captcha-response"))
            .clientUserAgent(req.getHeader("User-Agent"));

    VerifyResponse response = api.verifyClientToken(request);
    if (response.isTrainingMode() || !Boolean.TRUE.equals(response.getSuccess())) {
        return ResponseEntity.badRequest().body("captcha verification failed");
    }

    // ab hier die bisherige Logik
    String email = body.get("email");
    String message = body.get("message");
    return ResponseEntity.ok("Danke!");
}

Note

Der Wert des Felds eu-captcha-response geht als clientToken in die Anfrage. Halten Sie Sitekey und Secret in Umgebungsvariablen, aus denen System.getenv sie liest.

Warning

Der Trainingsmodus greift bei einem unbekannten Sitekey, bei einem falschen Secret und bei einem Sitekey mit der Einstellung train. Das Beispiel weist die Übermittlung in diesem Fall zurück. So läuft eine Fehlkonfiguration nicht ungeprüft durch.

Siehe Java.

Integration prüfen

Ansicht Integration Test mit dem Ergebnis Fully Integrated

Prüfen Sie zum Schluss in der Ansicht Integration Test des Sitekeys, ob Frontend und Backend zusammenspielen. Danach trägt der Sitekey den Status Fully Integrated.

Siehe Integration testen.