Next.js CAPTCHA-Integration

Erstellen Sie ein Benutzerkonto oder melden Sie sich mit einem bestehenden Konto an. Anschließend erstellen Sie ein neues CAPTCHA oder wählen Sie ein bereits vorhandenes aus. Wenn Sie sich nicht sicher sind, ob TrustCaptcha das Richtige für Sie ist, können Sie unseren CAPTCHA-Service 14 Tage lang kostenlos und ohne Risiko testen.

Auf der CAPTCHA-Übersichtsseite finden Sie alle wichtigen Informationen wie den site-key und den license-key, und Sie können dort auch Ihren API-Key erstellen. Ermöglichen Sie Ihren Websites den Zugriff auf Ihr CAPTCHA, indem Sie diese einfach zur Liste der autorisierten Domains in den CAPTCHA-Sicherheitsregeln hinzufügen.

Nutzen Sie unseren React-Wrapper in der Client Component, die Ihr Formular rendert. Das Widget läuft im Hintergrund und fügt beim Absenden ein verstecktes Feld tc-verification-token hinzu, das Server Actions und Route Handler als Form Data erhalten.

Installieren Sie zunächst unser TrustCaptcha-React-Paket:

npm i @trustcomponent/trustcaptcha-react

Setzen Sie dann den <TrustcaptchaComponent> in die Client Component, die Ihr Formular rendert:

"use client";

import { TrustcaptchaComponent } from "@trustcomponent/trustcaptcha-react";

export function ContactForm() {
  return (
    <form method="post" action="/api/contact">
      <input type="email" name="email" required />
      <TrustcaptchaComponent sitekey="<your_site_key>" />
      <button type="submit">Send</button>
    </form>
  );
}

Das CAPTCHA-Widget wird anschließend in Ihrem Formular angezeigt:

Detaillierte Informationen zur CAPTCHA-React-Widget-Integration?
Für die vollständige Referenz – inklusive Themes, Sprachen, Custom Design und mehr – lesen Sie bitte unsere Dokumentation.

Holen Sie in einem Next.js-Route-Handler (oder einer Server Action) den Verifikationstoken aus den Form-Daten, rufen Sie das Ergebnis über unsere Node.js-Library ab und entscheiden Sie, ob die Anfrage akzeptiert werden soll.

Installieren Sie zunächst unsere TrustCaptcha-Node.js-Library:

npm i @trustcomponent/trustcaptcha-nodejs

Validieren Sie dann den Token in Ihrem Route Handler und reagieren Sie auf das Ergebnis:

import { NextResponse } from "next/server";
import { TrustCaptcha } from "@trustcomponent/trustcaptcha-nodejs";

export async function POST(request: Request) {
  const formData = await request.formData();
  const token = String(formData.get("tc-verification-token") ?? "");

  try {
    const result = await TrustCaptcha.getVerificationResult(process.env.TRUSTCAPTCHA_API_KEY!, token);
    if (!result.verificationPassed || result.score > 0.5) {
      return NextResponse.json({ error: "CAPTCHA verification failed." }, { status: 400 });
    }
  } catch {
    return NextResponse.json({ error: "CAPTCHA verification failed." }, { status: 400 });
  }

  // CAPTCHA bestanden — Anfrage verarbeiten
  return NextResponse.json({ status: "ok" });
}

Detaillierte Informationen zur Next.js-CAPTCHA-Integration?
Für die vollständige Schritt-für-Schritt-Anleitung – inklusive einer Server-Action-Variante und eines wiederverwendbaren Verifier-Utilities – lesen Sie bitte unsere Dokumentation.

Anderes Backend-Framework statt Next.js?
Wenn Sie ein anderes Framework nutzen, wählen Sie hier das passende Rezept aus. Ist Ihr Framework nicht aufgeführt, können Ihre Softwareentwickler die Verifizierung selbst integrieren – mithilfe unserer Dokumentation – oder unser Support-Team nach einer vorgefertigten Integration fragen.

Sie sind jetzt durch TrustCaptcha geschützt – Glückwunsch!