Vue

Das Paket @myrasec/eu-captcha-vue stellt die Komponente EuCaptcha für Vue 3 und Nuxt bereit.

Voraussetzungen

Die folgenden Voraussetzungen sind erfüllt:

Voraussetzung	Wert
Vue	Version 3, auch als Grundlage von Nuxt
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-vue

Komponente einbinden

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

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

const captchaSitekey = "EUCAPTCHA_SITE_KEY";

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

<template>
  <form @submit.prevent="handleSubmit">
    <!-- your fields -->
    <EuCaptcha :sitekey="captchaSitekey" />
    <button type="submit">Submit</button>
  </form>
</template>

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"
  :on-complete="(token) => console.log('token:', token)"
  :on-expired="() => console.log('token expired')"
  :on-error="() => console.log('challenge error')"
/>

Challenge verzögert starten

Setzen Sie autostart auf false und vergeben Sie eine Kennung:

<EuCaptcha
  :sitekey="captchaSitekey"
  widget-id="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-vue";

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

Alternativ warten Sie auf die Nachricht euCaptchaCompleted am Fenster:

import { onMounted, onUnmounted } from "vue";

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

onMounted(() => window.addEventListener("message", listenForCaptchaDone, false));
onUnmounted(() => window.removeEventListener("message", listenForCaptchaDone, false));

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 Vue und Python.