Vue und Python

Dieses Beispiel schützt das Kontaktformular einer bestehenden Anwendung. Das Frontend ist eine Vue-Anwendung mit Vite, das Backend ein Python-Server mit Flask. 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
Python	Version 3 mit pip
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 Vue-Anwendung (Vite)
│   ├── package.json              # ← Schritt 1: Paket @myrasec/eu-captcha-vue eintragen
│   ├── vite.config.js
│   ├── index.html
│   └── src/
│       ├── main.js
│       ├── App.vue
│       └── ContactForm.vue       # ← Schritt 1 und 2: Widget einbinden, Token absenden
└── backend/                      # bestehender Python-Server (Flask)
    ├── .venv/
    ├── requirements.txt          # ← Schritt 3: Paket myra-eucaptcha eintragen
    └── app.py                    # ← Schritt 3: Prüfung an den Anfang der Route setzen

Schritt 1: Widget einbinden

Das Formular steht in der Datei frontend/src/ContactForm.vue.

Installieren Sie das Paket:

npm i @myrasec/eu-captcha-vue

Setzen Sie die Komponente EuCaptcha in das Formular und nehmen Sie das Token über den Callback onComplete entgegen:

<template>
  <form @submit.prevent="handleSubmit">
    <input name="email" type="email" required />
    <textarea name="message" required></textarea>

    <!-- onComplete liefert das Token, sobald die Challenge abgeschlossen ist -->
    <EuCaptcha :sitekey="captchaSitekey" :onComplete="onComplete" />

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

Die Komponente lädt das Skript verify.js, legt den versteckten iframe an und startet die Challenge selbsttätig.

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:

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

const captchaSitekey = "EUCAPTCHA_SITE_KEY";
const token = ref("");

function onComplete(t) {
  token.value = t;
}

async function handleSubmit(e) {
  if (!isEuCaptchaDone()) {
    // challenge not yet complete
    return;
  }
  const fields = Object.fromEntries(new FormData(e.target));
  const res = await fetch("/api/contact", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ ...fields, "eu-captcha-response": token.value }),
  });
  if (res.ok) {
    // success
  }
}
</script>

Schritt 3: Token prüfen

Die Prüfung gehört in den serverseitigen Handler, der die Formulardaten entgegennimmt, hier die Route /api/contact in der Datei backend/app.py. Sie steht an erster Stelle, vor jeder Verarbeitung.

Installieren Sie das Paket:

pip install myra-eucaptcha

Lesen Sie die Felder aus dem JSON-Rumpf und setzen Sie die Prüfung an den Anfang der Route:

import os

from flask import Flask, abort, request
from myra_eucaptcha import MyraEuCaptchaClient, MyraEuCaptchaClientConfig

app = Flask(__name__)

client = MyraEuCaptchaClient(config=MyraEuCaptchaClientConfig(
    sitekey=os.environ["EUCAPTCHA_SITE_KEY"],
    secret=os.environ["EUCAPTCHA_SECRET_KEY"],
))


@app.post("/api/contact")
def contact():
    body = request.get_json(silent=True) or {}

    # Prüfung vor jeder Verarbeitung
    result = client.validate(
        token=body.get("eu-captcha-response", ""),
        remote_addr=request.headers.get("x-real-ip", ""),
    )
    if not result.success:
        abort(400, "captcha verification failed")

    # ab hier die bisherige Logik
    email = body.get("email")
    message = body.get("message")
    return "Danke!"

Note

Der Python-Client verlangt das Token ausdrücklich. Lesen Sie es aus dem Feld eu-captcha-response des JSON-Rumpfs und übergeben Sie es zusammen mit der IP-Adresse des Besuchers an validate(). Halten Sie Sitekey und Secret in Umgebungsvariablen, aus denen os.environ sie liest.

Warning

Im Trainingsmodus liefert result.success den Wert True, und die Übermittlung läuft durch. Der Trainingsmodus greift bei einem unbekannten Sitekey, bei einem falschen Secret und bei abgeschaltetem Schutz. Prüfen Sie deshalb immer mit den echten Zugangsdaten aus dem Kundenportal.

Siehe Python.

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.