Verificar un Captcha

Los endpoints del servidor se pueden utilizar como endpoints de API REST para ejecutar funciones como autenticaciones, acceso a bases de datos y verificaciones sin exponer datos sensibles al cliente.

En esta receta, se utiliza una ruta de API para verificar Google reCAPTCHA v3 sin exponer el secreto a los clientes.

Prerrequesitos

Un proyecto con SSR habilitado, con la opción output: 'server'.

Receta

Crea un endpoint POST que acepte datos de reCAPTCHA y luego los verifique con la API de reCAPTCHA. Aquí puedes definir de manera segura valores secretos o leer variables de entorno.

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: "TU_CLAVE_SECRETA_DEL_SITIO",   // Esto puede ser una variable de entorno
    response: data.recaptcha          // El token pasado desde el cliente
  });

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

Accede a tu endpoint utilizando fetch desde un script de cliente:

<html>
  <head>
    <script is:inline 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"> Click me to verify the captcha challenge! </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) {
            // Verificación del Captcha fue un éxito
          } else {
            // Falló la verificación del Captcha
          }
        })
      }
    </script>
  </body>
</html>

Contribuir

Comunidad

Verificar un Captcha

Prerrequesitos

Receta

¿Qué tienes en mente?

Crear un problema en GitHub

Envíanos comentarios

Envíanos comentarios