TrustCaptcha · Bot-Schutz

Svelte CAPTCHA Integration

Integriere ein Svelte-CAPTCHA in wenigen Minuten in deine Svelte- oder SvelteKit-Formulare und blockiere Bots und Spam bei Registrierungen, Logins und Checkouts. Eine schlanke Wrapper-Komponente nimmt deinen Site-Key entgegen. Ohne Rätsel, in der EU gehostet und DSGVO-konform, mit Bot-Score und Sicherheitsregeln.

Schnellstart

So funktioniert die Integration

1. CAPTCHA erstellen

Erstelle ein Benutzerkonto oder melde dich mit einem bestehenden Konto an. Dann erstellst du ein neues CAPTCHA oder wählst ein vorhandenes aus. Wenn du TrustCaptcha erst ausprobieren willst: Jeder Tarif startet mit einer 14-tägigen kostenlosen Testphase.

Auf der Übersichtsseite des CAPTCHAs findest du den Site Key und den License Key, und dort erstellst du auch deinen API-Key. Trage die Domains deiner Website in den Sicherheitsregeln des CAPTCHAs als autorisierte Domains ein, damit sie dein CAPTCHA nutzen dürfen.

Start des Formulars zur Erstellung eines CAPTCHA.

CAPTCHA-Sicherheitsregeln eines Demo-CAPTCHAs.

2. CAPTCHA-Widget in dein Frontend integrieren

Die folgenden Schritte zeigen grob, wie du das TrustCaptcha-Widget in ein Svelte-Frontend einbaust. Die vollständige Anleitung findest du in der CAPTCHA-Integrationsanleitung für Svelte unserer Dokumentation.

Dokumentation lesen

Installiere zuerst das Svelte-Wrapper-Paket:

Install

bash

npm i trustcaptcha-svelte

Füge dann das CAPTCHA-Widget (den HTML-Tag TrustCaptcha) in ein beliebiges HTML-Formular ein:

App.svelte

svelte

<script lang="ts">
  import { TrustCaptcha } from "trustcaptcha-svelte";

  function solved(event: CustomEvent<string>) {
    const VerificationToken = event.detail;
    // send VerificationToken to your backend
  }

  function failed(event: CustomEvent) {
    const error = event.detail;
    // handle error
  }
</script>

<form>
  <!-- your input fields -->
  <TrustCaptcha
    sitekey="<your_SiteKey>"
    oncaptchaSolved={solved}
    oncaptchaFailed={failed}
  />
  <!-- further input fields / submit button -->
</form>

Das CAPTCHA-Widget wird nun auf deiner Svelte-Website angezeigt:

Hinweis: Der Svelte-Wrapper ist eine Community-Integration und wird auf GitHub von Frederic Lehmann gepflegt: FrediLehmann/trustcaptcha-svelte

Benötigst du detaillierte Informationen zur Svelte-CAPTCHA-Integration?
Detaillierte Anweisungen findest du in unserer Svelte-CAPTCHA-Integrationsanleitung.

Andere Frontend-Technologie statt Svelte?
Wenn du nicht mit Svelte arbeitest oder mehrere Websites und Apps betreibst, wähle hier ein anderes Framework oder eine andere Plattform. Gibt es für deine Frontend-Technologie noch keine vorgefertigte Integration, können deine Entwickler das CAPTCHA mithilfe unserer Dokumentation selbst integrieren oder unser Support-Team nach einer vorgefertigten Integration fragen.

3. CAPTCHA-Ergebnis in deinem Backend validieren

Sobald das CAPTCHA abgeschlossen ist, schickst du den Verifikationstoken an dein Backend. Dort rufst du das Verifikationsergebnis von unseren Servern ab und prüfst es. Wie du weiter vorgehst, hängt vom Bot-Risiko ab. Details zur Backend-Integration und zur Prüfung des Ergebnisses findest du in unserer Dokumentation.

Vorgefertigte Backend-Integrationen
Mit unseren vorgefertigten Integrationen baust du die CAPTCHA-Prüfung in deinen Backend-Service ein. Gibt es für deine Backend-Technologie noch keine, können deine Entwickler die Prüfung mithilfe unserer Dokumentation selbst integrieren oder unser Support-Team nach einer vorgefertigten Integration fragen.

4. Integration testen

TrustCaptcha ist jetzt aktiv. Schick eine Testanfrage ab und prüfe, ob sie durchgeht.

Häufige Fragen

Was brauche ich für ein Svelte-CAPTCHA?

Du brauchst einen Site-Key im Svelte-Formular und ein Backend, das den Verifikationstoken mit deinem API-Key an TrustCaptcha sendet, um das Verifikationsergebnis abzurufen.

Funktioniert das mit SvelteKit und SSR?

Ja. Rendere das Widget im Formular und validiere den Verifikationstoken serverseitig. In SvelteKit machst du das in deinem Server-Code (Form Actions oder Endpoints).

Wie bekomme ich den Verifikationstoken?

Nach dem Lösen schreibt das Widget den Verifikationstoken in ein verstecktes Feld (tokenFieldName) und gibt ihn zusätzlich über das oncaptchaSolved-Event aus.

Wie nutze ich den Bot-Score sinnvoll?

Im Verifikationsergebnis stehen verificationPassed und der Bot-Score. Ein guter Start: unter 0,5 akzeptieren, über 0,5 ablehnen und danach je nach Traffic und Risiko feinjustieren.

Kann ich mehrere Widgets oder Formulare nutzen?

Ja. Du kannst mehrere Widgets und Formulare verwenden. Nutze pro Formular einen eigenen tokenFieldName, wenn du versteckte Felder nutzt; bei Events behandelst du jeden Verifikationstoken separat.

Wie lange ist ein Verifikationstoken gültig?

Standardmäßig ist ein Verifikationstoken nur einmal verwendbar und 15 Minuten gültig. Im Enterprise-Plan kannst du die Gültigkeit verlängern und eine begrenzte Zahl von Abrufen erlauben. Platziere das Widget nahe am Submit-Button.

Kann ich das Widget in Svelte anpassen?

Ja. Setze Theme, Sprache und Autostart am Component-Tag. Ein eigenes Design braucht einen License Key und ist ab dem Team-Plan enthalten. Ein komplett unsichtbares Widget und das Ausblenden unseres Brandings gibt es mit dem kostenpflichtigen Add-on Captcha Branding.

Muss ich den Svelte-Wrapper verwenden?

Nein. Du kannst TrustCaptcha auch direkt als JavaScript-Webkomponente in jeder Svelte-App einbinden. Der Wrapper macht Installation und Event-Handling nur bequemer.

Leads verlieren wegen CAPTCHAs?

TrustCaptcha blockiert Spam und Bots, nicht deine Kunden. Keine Rätsel, DSGVO-konform, in der EU gehostet.

Keine Rätsel für Besucher

Die Prüfung läuft im Hintergrund, während Besucher tippen. So schicken mehr Menschen deine Formulare ab, statt vorher aufzugeben.

DSGVO-konform

In der EU gehostet, ohne Cookies, mit verschlüsselter Übertragung und automatischer Löschung. Jeder Kunde bekommt einen Auftragsverarbeitungsvertrag (AVV).

Mehrstufige Sicherheit

Adaptiver Proof-of-Work und Risiko-Scoring stoppen Missbrauch früh, auch wenn der Angriffs-Traffic plötzlich steigt.

Volle Kontrolle

Stell die Empfindlichkeit ein, pflege Allow- und Blocklisten und nutze Geoblocking. Du entscheidest, wie streng die Prüfung ist.

Schütze deine Svelte-Anwendung in wenigen Schritten mit TrustCaptcha!

EU-hosted & DSGVO-konform
Keine Rätsel
14 Tage kostenlos testen

Loslegen Vertrieb kontaktieren