Zum Inhalt
Myra EU CAPTCHA Online-Hilfe Stand · 25.08.2026

HTML und JavaScript

Ohne Framework binden Sie das Widget mit zwei Zeilen HTML ein: einem Skript-Verweis im Kopfbereich der Seite und einem Element im Formular. Diesen Weg verwenden Sie auch für jedes Content-Management-System, das eigenes HTML zulässt.

Voraussetzungen

Die folgenden Voraussetzungen müssen erfüllt sein:

Voraussetzung Wert
Sitekey Öffentlicher Sitekey aus der Ansicht Details
Zugriff Schreibrechte auf die HTML-Vorlage der Seite
Serverseite Endpunkt, der das Token prüft

Skript einbinden

Ergänzen Sie den Bereich <head> Ihrer Seite um die folgende Zeile:

<script src="https://cdn.eu-captcha.eu/verify.js" async defer></script>

Note

Wenn Ihre Website eine Content Security Policy sendet, dann muss diese die Adressen https://cdn.eu-captcha.eu und https://api.eu-captcha.eu freigeben. Siehe Content Security Policy.

Widget einfügen

Fügen Sie in jedes zu schützende Formular das folgende Element ein:

<div class="eu-captcha" data-sitekey="a1b2c3d4-0000-0000-0000-000000000000"></div>

Ersetzen Sie den Wert von data-sitekey durch Ihren öffentlichen Sitekey.

Das vollständige Formular sieht damit wie folgt aus:

<form method="POST" action="/your-endpoint">
  <!-- your fields -->

  <div class="eu-captcha" data-sitekey="a1b2c3d4-0000-0000-0000-000000000000"></div>

  <button type="submit">Submit</button>
</form>

Beim Absenden ergänzt das Widget das verborgene Feld eu-captcha-response mit dem Token.

Attribute des Elements

Das Skript verify.js wertet die folgenden Attribute aus:

Attribut Vorgabe Wirkung
data-sitekey — Öffentlicher Sitekey. Der Wert ist erforderlich.
data-theme "light" Darstellung, Werte "light" und "dark".
data-width 330 Breite des Widgets in Pixeln.
data-height 100 Höhe des Widgets in Pixeln.
data-widgetid automatisch Eigene Kennung des Widgets.
data-autostart "true" Der Wert "false" verschiebt den Start der Challenge.
data-callback — Name einer globalen Funktion, die nach der bestandenen Challenge aufgerufen wird.
data-expired-callback — Name einer globalen Funktion, die beim Ablauf des Tokens aufgerufen wird.
data-error-callback — Name einer globalen Funktion, die bei einem Fehler aufgerufen wird.

Paket über npm einbinden

Für Projekte mit einem Bündelwerkzeug steht dasselbe Widget als npm-Paket bereit. Das Paket liefert TypeScript-Typen und eine Versionierung. Das Widget lädt weiterhin verify.js aus dem CDN.

Um das Paket einzubinden, gehen Sie wie folgt vor:

  • ► Installieren Sie das Paket:
npm i @myrasec/eu-captcha-vanilla
  • ► Legen Sie im Formular ein Zielelement an:
<form id="contact-form">
  <!-- your fields -->
  <div id="captcha"></div>
  <button type="submit">Submit</button>
</form>
  • ► Zeichnen Sie das Widget in das Zielelement:
import { renderEuCaptcha, isEuCaptchaDone } from "@myrasec/eu-captcha-vanilla";

const captchaSitekey = "EUCAPTCHA_SITE_KEY";

renderEuCaptcha("#captcha", {
  sitekey: captchaSitekey,
  onComplete: (token: string) => console.log("token:", token),
}).catch((err) => console.error("EU CAPTCHA failed to render", err));
  • ➔ Das Widget beginnt die Prüfung im Hintergrund.

Als erstes Argument nimmt renderEuCaptcha entweder einen CSS-Selektor oder ein HTMLElement entgegen.

Optionen

Die folgenden Optionen stehen zur Verfügung:

Option 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 automatisch. 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.

Challenge verzögert starten

Setzen Sie autostart auf false und vergeben Sie eine Kennung, um die Challenge selbst zu starten:

renderEuCaptcha("#captcha", {
  sitekey: captchaSitekey,
  widgetId: "my-captcha",
  autostart: false,
});

document.getElementById("verify-btn")!.addEventListener("click", () => {
  (window as any).euCaptcha.execute("my-captcha");
});

Zustand abfragen

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

import { isEuCaptchaDone } from "@myrasec/eu-captcha-vanilla";

function handleSubmit(e: SubmitEvent): void {
    e.preventDefault();

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

Warning

Ohne Argument ist isEuCaptchaDone() nur bei genau einem Widget ohne eigene Kennung zuverlässig. Vergeben Sie bei mehreren Widgets je Widget eine Kennung und fragen Sie isEuCaptchaDone(widgetId) ab.

Alternativ warten Sie auf die Nachricht euCaptchaCompleted am Fenster. Prüfen Sie dabei den Ursprung der Nachricht, da jedes Skript und jede Erweiterung im Browser Nachrichten senden kann:

const CAPTCHA_ORIGIN = "https://cdn.eu-captcha.eu";

function listenForCaptchaDone(msg: MessageEvent): void {
    if (msg.origin !== CAPTCHA_ORIGIN) return;
    const data = (msg.data ?? {}) as { type?: string };
    if (data.type === "euCaptchaCompleted") {
        // enable submit button, update state, etc.
    }
}

window.addEventListener("message", listenForCaptchaDone, false);

Warning

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

Widget abbauen

renderEuCaptcha gibt eine Referenz zurück. Der Aufruf handle.destroy() entfernt den Nachrichtenempfänger, leert das Zielelement und setzt den Zustand zurück, sodass isEuCaptchaDone() wieder false meldet.

const handle = await renderEuCaptcha("#captcha", { sitekey: captchaSitekey });
// later
handle.destroy();

Warning

Rufen Sie destroy() bei jedem Abbau auf. Jede Darstellung mit einer Rückruffunktion fügt dem Fenster einen Nachrichtenempfänger hinzu, den nur destroy() wieder entfernt. Ohne diesen Aufruf bleibt je Darstellung ein Empfänger und ein abgetrennter DOM-Teilbaum im Speicher zurück.

Token prüfen

Prüfen Sie das Token auf Ihrem Server. Siehe Endpunkt /verify.

Vollständiges Beispiel

Siehe HTML und Django.