Aller au contenu
Astro Astro

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

  • Un projet avec SSR (EN) (output: 'server') activé

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 requestBody = {
        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",
        body: JSON.stringify(requestBody)
      });
    

      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>