Pular para o conteúdo
This is an unmaintained snapshot of the Astro v4 docs. View the latest docs.

Verifique um Captcha

Endpoints do servidor 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.

  • Um projeto com SSR (output: 'server') habilitado
  1. 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.

    src/pages/recaptcha.js
    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 });
    }
  2. Acesse seu endpoint usando fetch de um script do cliente:

    src/pages/index.astro
    <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

O que passa em sua cabeça?

Comunidade