EU CAPTCHA für Next.js

Häufig gestellte Fragen

• Wie füge ich EU CAPTCHA zu einer Next.js-Anwendung hinzu?

  Installieren Sie das Paket mit npm i @myrasec/eu-captcha. Erstellen Sie eine Client-Komponente, die mit 'use client' markiert ist, importieren Sie { EuCaptcha, isEuCaptchaDone } from '@myrasec/eu-captcha' und platzieren Sie <EuCaptcha sitekey={sitekey} /> in Ihrem Formular. Rufen Sie isEuCaptchaDone() beim Absenden auf und übergeben Sie den eu-captcha-response-Token zur serverseitigen Validierung an eine Server Action oder einen API Route Handler.

• Funktioniert EU CAPTCHA mit dem Next.js App Router?

  Ja. Im App Router platzieren Sie die EuCaptcha-Komponente innerhalb einer Client-Komponente, die mit der 'use client'-Direktive markiert ist, da das Widget Browser-APIs benötigt. Die Token-Verifizierung erfolgt in einer Server Action oder einem Route Handler, der auf dem Server ausgeführt wird, sodass Ihr geheimer Schlüssel sicher bleibt.

• Kann ich EU CAPTCHA mit Next.js Server Actions verwenden?

  Ja. Server Actions sind das empfohlene Muster für App-Router-Formulare. Ihre Client-Komponente erfasst den eu-captcha-response-Token und übergibt ihn als verstecktes Eingabefeld oder als Formulardatenfeld an die Server Action. Die Server Action ruft dann die EU CAPTCHA Verification API mit Ihrem geheimen Schlüssel auf, bevor die restlichen Formulardaten verarbeitet werden.

• Ist EU CAPTCHA mit dem Next.js Pages Router kompatibel?

  Ja. Im Pages Router verwenden Sie die EuCaptcha-Komponente aus @myrasec/eu-captcha innerhalb Ihres Formulars. Der Token wird an eine Next.js-API-Route (pages/api/) gesendet, wo Sie den EU CAPTCHA Verification Endpoint mit Ihrem geheimen Schlüssel aufrufen, bevor die übermittelten Daten verarbeitet werden.

• Wie vermeide ich Hydration-Fehler bei der Verwendung von EU CAPTCHA in Next.js?

  Da die EuCaptcha-Komponente aus @myrasec/eu-captcha Browser-APIs benötigt, platzieren Sie sie stets in einer Client-Komponente ('use client'). Im Pages Router können Sie auch einen dynamischen Import mit ssr: false verwenden, um ein serverseitiges Rendering des Widgets zu verhindern und Hydration-Fehler zu vermeiden.

• Wie validiere ich den CAPTCHA-Token in einem Next.js Route Handler?

  Extrahieren Sie in Ihrem Route Handler (app/api/route.ts) den eu-captcha-response-Wert aus dem Request-Body. Senden Sie eine POST-Anfrage an die EU CAPTCHA Verification API mit Ihrem geheimen Schlüssel und dem Token. Wenn die API eine erfolgreiche Antwort zurückgibt, fahren Sie mit der Verarbeitung der Formulardaten fort. Andernfalls geben Sie einen 400- oder 422-Fehler an den Client zurück.

• Ist EU CAPTCHA DSGVO-konform für Next.js-Anwendungen?

  Ja. EU CAPTCHA wird von einem in der EU ansässigen Unternehmen betrieben, ist vollständig in Deutschland gehostet und stützt sich nicht auf US-amerikanische Cloud-Anbieter oder Infrastrukturen, die US-Überwachungsgesetzen unterliegen. Der Dienst verarbeitet nur die Daten, die zur Bereitstellung und Verifizierung des CAPTCHAs erforderlich sind (wie IP-Adresse sowie technische Browser- oder Geräteinformationen), im Einklang mit den Anforderungen der DSGVO. Ihre Organisation bleibt verantwortlich für die Bereitstellung transparenter Datenschutzinformationen, die Wahl einer geeigneten Rechtsgrundlage und die Einholung etwaig erforderlicher Einwilligungen für Ihre spezifische Next.js-Implementierung. Diese Informationen stellen keine Rechtsberatung dar; bitte konsultieren Sie Ihren Rechtsberater für eine Beurteilung Ihres individuellen Falls.