Svelte und Ruby¶

Dieses Beispiel schützt das Kontaktformular einer bestehenden Anwendung. Das Frontend ist eine Svelte-Anwendung mit Vite, das Backend ein Ruby-Server mit Sinatra. 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
Svelte	Version 5
Ruby	ab Version 2.7
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 Svelte-Anwendung (Vite)
│   ├── package.json              # ← Schritt 1: Paket @myrasec/eu-captcha-svelte eintragen
│   ├── vite.config.js
│   └── src/
│       ├── main.js
│       ├── App.svelte
│       └── ContactForm.svelte    # ← Schritt 1 und 2: Widget einbinden, Token absenden
└── backend/                      # bestehender Ruby-Server (Sinatra)
    ├── Gemfile                   # ← Schritt 3: Gem eu_captcha eintragen
    └── app.rb                    # ← Schritt 3: Prüfung an den Anfang der Route setzen

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

Installieren Sie das Paket:

npm i @myrasec/eu-captcha-svelte

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

<form onsubmit={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={(t) => (token = t)} />

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

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>
  import { EuCaptcha, isEuCaptchaDone } from "@myrasec/eu-captcha-svelte";

  const captchaSitekey = "EUCAPTCHA_SITE_KEY";
  let token = "";

  async function handleSubmit(e) {
    e.preventDefault();
    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 }),
    });
    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.rb. Sie steht an erster Stelle, vor jeder Verarbeitung.

Installieren Sie das Gem:

gem install eu_captcha

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

require 'eu_captcha'
require 'json'

captcha = EuCaptcha::Client.new(
  sitekey: ENV['EUCAPTCHA_SITE_KEY'],
  secret:  ENV['EUCAPTCHA_SECRET_KEY']
)

post '/api/contact' do
  payload = JSON.parse(request.body.read)

  # Prüfung vor jeder Verarbeitung
  result = captcha.validate(
    token:       payload['eu-captcha-response'],
    remote_addr: request.ip
  )
  halt 400, 'captcha verification failed' unless result.success?

  # ab hier die bisherige Logik
  email   = payload['email']
  message = payload['message']
  'Danke!'
end

Note

Der Ruby-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 ENV sie liest.

Die Methode success? liefert im Trainingsmodus den Wert false. Eine Fehlkonfiguration läuft damit nicht ungeprüft durch.

Siehe Ruby.

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.