Verifique um Captcha

Endpoints do servidor (EN) podem ser usados como endpoints de API REST para executar funções como autenticações, acesso à banco de dados, e verificações sem expor dados sensíveis ao cliente.

Nesta receita, uma rota de API é usada para verificar o Google reCAPTCHA v3 sem expor o segredo aos clientes.

Pré-requisitos

Um projeto com SSR (EN) (output: 'server') habilitado

Receita

Crie um endpoint POST que aceite dados do recaptcha, e então verifique-o com a API do reCAPTCHA. Aqui, você pode definir valores secretos ou ler variáveis de ambiente com segurança.

export async function POST({ request }) {
  const dados = await request.json();

  const URLrecaptcha = 'https://www.google.com/recaptcha/api/siteverify';
  const requestHeaders = {
    'Content-Type': 'application/x-www-form-urlencoded'
  };
  const corpoRequisicao = new URLSearchParams({
    secret: "CHAVE_SECRETA_DO_SEU_SITE",   // Isso pode ser uma variável de ambiente
    response: dados.recaptcha              // O token passado pelo cliente
  });

  const resposta = await fetch(URLrecaptcha, {
    method: "POST",
    headers: requestHeaders,
    body: corpoRequisicao.toString()
  });

  const dadosResposta = await resposta.json();

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

Acesse seu endpoint usando fetch de um script do cliente:

<html>
  <head>
    <script is:inline src="https://www.google.com/recaptcha/api.js"></script>
  </head>

  <body>
    <button class="g-recaptcha" 
      data-sitekey="CHAVE_PUBLICA_SITE"
      data-callback="onSubmit" 
      data-action="submit"> Clique aqui para verificar o desafio do 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) {
            // Verificação do captcha foi um sucesso
          } else {
            // Verificação do captcha falhou
          }
        })
      }
    </script>
  </body>
</html>

Contribua Comunidade Sponsor