Svelte

Das Paket @myrasec/eu-captcha-svelte stellt die Komponente EuCaptcha für Svelte 5 bereit.

Voraussetzungen

Die folgenden Voraussetzungen sind erfüllt:

Voraussetzung	Wert
Svelte	Version 5, auch als Grundlage von SvelteKit
Sitekey	Öffentlicher Sitekey aus der Ansicht Details
Serverseite	Endpunkt, der das Token prüft

Paket installieren

Installieren Sie das Paket:

npm i @myrasec/eu-captcha-svelte

Komponente einbinden

Binden Sie die Komponente in das zu schützende Formular ein:

<script lang="ts">
  import { EuCaptcha, isEuCaptchaDone } from "@myrasec/eu-captcha-svelte";

  const captchaSitekey = "EUCAPTCHA_SITE_KEY";

  function handleSubmit(e: SubmitEvent): void {
    e.preventDefault();
    if (!isEuCaptchaDone()) {
      // challenge not yet complete
      return;
    }
    // proceed with form submission
  }
</script>

<form onsubmit={handleSubmit}>
  <!-- your fields -->
  <EuCaptcha sitekey={captchaSitekey} />
  <button type="submit">Submit</button>
</form>

Hinweis

Sie prüfen die Einbindung mit einem beliebigen erfundenen Sitekey. Zu einem unbekannten Sitekey läuft das CAPTCHA mit den Vorgabewerten und lässt jeden Besucher passieren. Die Prüfung über den Endpunkt /verify lehnt das Token eines unbekannten Sitekeys dagegen mit dem Fehlercode invalid-input-sitekey ab.

Eigenschaften

Die folgenden Eigenschaften stehen zur Verfügung:

Eigenschaft	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).
onComplete	(token: string) => void	—	Wird mit dem Token aufgerufen, sobald die Challenge bestanden ist.
onExpired	() => void	—	Wird aufgerufen, wenn das Token abläuft. Ein Token läuft 60 Minuten nach der Lösung ab.
onError	() => void	—	Wird bei einem Netzwerk- oder Serverfehler aufgerufen.
scriptSrc	string	"https://cdn.eu-captcha.eu/verify.js"	Adresse, von der das Paket das Skript verify.js lädt, etwa für eine Test- oder Staging-Umgebung. Nur Nachrichten vom Ursprung dieser Adresse gelten als vertrauenswürdig. Der erste Ladevorgang legt die Adresse fest, eine spätere abweichende Adresse bleibt ohne Wirkung.

Beispiele für die Darstellung:

<EuCaptcha sitekey={captchaSitekey} theme="dark" />
<EuCaptcha sitekey={captchaSitekey} width={280} />
<EuCaptcha sitekey={captchaSitekey} height={60} />

Rückrufe verwenden

<EuCaptcha
  sitekey={captchaSitekey}
  onComplete={(token) => console.log("token:", token)}
  onExpired={() => console.log("token expired")}
  onError={() => console.log("challenge error")}
/>

Challenge verzögert starten

Setzen Sie autostart auf false und vergeben Sie eine Kennung:

<EuCaptcha
  sitekey={captchaSitekey}
  widgetId="my-captcha"
  autostart={false}
/>

<button onclick={() => (window as any).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-svelte";

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

Alternativ warten Sie auf die Nachricht euCaptchaCompleted am Fenster:

import { onMount, onDestroy } from "svelte";

function listenForCaptchaDone(msg: MessageEvent): void {
    if (msg.data.type === "euCaptchaCompleted") {
        // enable submit button, update reactive state, etc.
    }
}

onMount(() => window.addEventListener("message", listenForCaptchaDone, false));
onDestroy(() => window.removeEventListener("message", listenForCaptchaDone, false));

SvelteKit

Die Komponente greift auf Schnittstellen des Browsers zu und richtet sich vollständig in onMount ein. Sie lässt sich daher ohne weitere Einstellungen auch in serverseitig gezeichneten Seiten einbinden. Eine Prüfung auf browser oder ein dynamischer Import ist nicht erforderlich.

Achtung

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 Svelte und Ruby.