Aller au contenu

Vérifier un Captcha

Les points de terminaison du serveur peuvent être utilisés comme points de terminaison de l’API REST pour exécuter des fonctions telles que l’authentification, l’accès à la base de données et les vérifications sans exposer de données sensibles au client.

Dans cette recette, une route API est utilisée pour vérifier Google reCAPTCHA v3 sans exposer le secret aux clients.

Prérequis

Titre de la section Prérequis
  • Un projet avec SSR (output: 'server') activé

Recette

Titre de la section Recette

  1. Créez un point de terminaison POST qui accepte les données recaptcha, puis les vérifie avec l’API de reCAPTCHA. Ici, vous pouvez définir en toute sécurité des valeurs secrètes ou lire des variables d’environnement.

    src/pages/recaptcha.js
    export async function POST({ request }) {
      const data = await request.json();
    

      const recaptchaURL = 'https://www.google.com/recaptcha/api/siteverify';
      const requestHeaders = {
        'Content-Type': 'application/x-www-form-urlencoded'
      };
      const requestBody = new URLSearchParams({
        secret: "YOUR_SITE_SECRET_KEY",   // Il peut s'agir d'une variable d'environnement
        response: data.recaptcha          // Le jeton transmis par le client
      });
    

      const response = await fetch(recaptchaURL, {
        method: "POST",
        headers: requestHeaders,
        body: requestBody.toString()
      });
    

      const responseData = await response.json();
    

      return new Response(JSON.stringify(responseData), { status: 200 });
    }

  2. Accédez à votre point d’accès en utilisant fetch à partir d’un script client :

    src/pages/index.astro
    <html>
      <head>
        <script src="https://www.google.com/recaptcha/api.js"></script>
      </head>
    

      <body>
        <button class="g-recaptcha"
          data-sitekey="PUBLIC_SITE_KEY"
          data-callback="onSubmit"
          data-action="submit"> Cliquez sur moi pour vérifier le captcha ! </button>
    

        <script is:inline>
          function onSubmit(token) {
            fetch("/recaptcha", {
              method: "POST",
              body: JSON.stringify({ recaptcha: token })
            })
            .then((response) => response.json())
            .then((gResponse) => {
              if (gResponse.success) {
                // Captcha vérification avec succès
              } else {
                // Échec de la vérification Captcha
              }
            })
          }
        </script>
      </body>
    </html>