Intégration CAPTCHA Next.js

Créez un compte utilisateur ou connectez-vous avec un compte existant. Ensuite, créez un nouveau CAPTCHA ou sélectionnez-en un existant. Si vous ne savez pas encore si TrustCaptcha vous convient, essayez notre service CAPTCHA sans risque pendant 14 jours gratuitement.

Sur la page d’aperçu du CAPTCHA, vous trouverez toutes les informations importantes, comme la clé de site et la clé de licence, et vous pouvez aussi y créer votre API key. Autorisez simplement vos sites web à utiliser votre CAPTCHA en les ajoutant à la liste des domaines autorisés dans les règles de sécurité du CAPTCHA.

Utilisez notre wrapper React dans le composant client qui rend votre formulaire. Le widget s’exécute en arrière-plan et ajoute un champ caché tc-verification-token lors de l’envoi, que les Server Actions et Route Handlers reçoivent en tant que form data.

Commencez par installer notre package React TrustCaptcha :

npm i @trustcomponent/trustcaptcha-react

Ajoutez ensuite le composant <TrustcaptchaComponent> dans le composant client qui rend votre formulaire :

"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>
  );
}

Le widget CAPTCHA s’affichera ensuite dans votre formulaire :

Besoin d’informations détaillées sur l’intégration du widget React CAPTCHA ?
Pour la référence complète — y compris thèmes, langues, design personnalisé et plus encore — veuillez consulter notre documentation.

Dans un Route Handler Next.js (ou une Server Action), récupérez le jeton de vérification depuis les form data, consultez le résultat via notre bibliothèque Node.js et décidez si la requête doit être acceptée.

Commencez par installer notre bibliothèque Node.js TrustCaptcha :

npm i @trustcomponent/trustcaptcha-nodejs

Validez ensuite le jeton dans votre Route Handler et agissez en fonction du résultat :

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 validé — traiter la requête
  return NextResponse.json({ status: "ok" });
}

Besoin d’informations détaillées sur l’intégration CAPTCHA Next.js ?
Pour des instructions détaillées étape par étape — y compris une variante Server Action et un utilitaire de vérification réutilisable — veuillez consulter notre documentation.

Un autre framework backend que Next.js ?
Si vous utilisez un autre framework, choisissez la recette correspondante ici. Si votre framework n’est pas listé, vos développeurs peuvent intégrer la vérification eux-mêmes à l’aide de notre documentation ou contacter notre équipe support pour demander une intégration préconstruite.

Vous êtes maintenant protégé par TrustCaptcha — félicitations !