Como implementar CAPTCHA em HTML: um guia simples para desenvolvedores

O que você precisa antes de começar

Toda solução de CAPTCHA normalmente funciona em torno do mesmo conceito central: você registra seu site com um provedor, recebe um par de captcha key (uma site key pública e uma secret key privada) e usa essas chaves para incorporar o widget e verificar as respostas.

Veja onde registrar cada provedor antes de escrever uma única linha de HTML:

Provedor	URL de registro	Chaves que você recebe
reCAPTCHA v2	google.com/recaptcha/admin	Site key + Secret key
Cloudflare Turnstile	Painel da Cloudflare → Segurança de aplicativos → Turnstile	Site key + Secret key
Prosopo Procaptcha	prosopo.io	Site key + Secret key
Altcha	Auto-hospedado (não requer registro)	Segredo HMAC definido por você

Durante o registro, será solicitado que você informe seu nome de domínio. Para desenvolvimento local, adicione localhost à lista de domínios permitidos (mais sobre isso na seção de testes).

reCAPTCHA v2 Checkbox — passo a passo

A caixa de seleção clássica ("I'm not a robot") é o widget de captcha html mais amplamente reconhecido. Ela exibe uma caixa de seleção visível e, quando necessário, um desafio visual com imagens.

Etapa 1: registre-se e obtenha sua captcha key

Acesse google.com/recaptcha/admin e selecione reCAPTCHA v2 → "I'm not a robot" Checkbox. Adicione seu domínio (incluindo localhost para testes locais) e salve. Você receberá uma Site Key e uma Secret Key.

Etapa 2: adicione o script da API do reCAPTCHA

Coloque a seguinte tag <script> no <head> do seu HTML ou antes da tag de fechamento </body>:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Os atributos async e defer garantem que o script seja carregado sem bloquear a renderização da página.

Etapa 3: adicione a div do widget ao seu formulário

Coloque o elemento <div> dentro do seu formulário, logo antes do botão de envio. Substitua YOUR_SITE_KEY pela site key que você recebeu.

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Formulário de contato</title>  
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>  
</head>  
<body>  
  <form action="/submit" method="POST">  
    <label for="email">Email:</label>  
    <input type="email" id="email" name="email" required>  
    <label for="message">Mensagem:</label>  
    <textarea id="message" name="message" required></textarea>  
    <!-- Widget Checkbox do reCAPTCHA v2 -->  
    <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>  
    <button type="submit">Enviar</button>  
  </form>  
</body>  
</html>

Etapa 4: o que acontece no envio

Quando o usuário conclui o desafio e envia o formulário, o script do Google adiciona automaticamente um campo oculto chamado g-recaptcha-response aos dados do formulário. Seu backend lê esse token e o envia para a API de verificação do Google junto com sua secret key.

reCAPTCHA v2 Invisible — passo a passo

O Invisible reCAPTCHA remove totalmente a caixa de seleção visível. Em vez disso, ele executa uma análise de risco em segundo plano e só aciona um desafio visual se um comportamento suspeito for detectado — resultando em uma UX mais fluida para a maioria dos usuários.

Etapa 1: registre-se com o tipo correto

No console de administração do Google reCAPTCHA, selecione reCAPTCHA v2 → Invisible reCAPTCHA badge. Isso gera uma site key diferente da variante com checkbox — não reutilize chaves entre tipos diferentes.

Etapa 2: carregue o script da API

Use a mesma tag de script da variante com checkbox:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Etapa 3: anexe o CAPTCHA ao botão de envio

Em vez de usar uma <div> separada, você aplica os atributos do CAPTCHA diretamente ao <button> de envio, especificando um callback em JavaScript para ser executado quando o desafio for concluído.

Defina uma função de callback que envie o formulário de forma programática após a verificação ser aprovada.

Exemplo completo de formulário HTML

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Cadastro</title>  
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>  
</head>  
<body>  
  <form id="signup-form" action="/signup" method="POST">  
    <label for="username">Nome de usuário:</label>  
    <input type="text" id="username" name="username" required>  
    <!-- reCAPTCHA Invisible: anexado ao botão -->  
    <button  
      class="g-recaptcha"  
      data-sitekey="YOUR_SITE_KEY"  
      data-callback="onSubmit"  
      data-size="invisible"  
      type="submit">  
      Criar conta  
    </button>  
  </form>  
  <script>  
    function onSubmit(token) {  
      document.getElementById("signup-form").submit();  
    }  
  </script>  
</body>  
</html>

Quando o botão é clicado, o reCAPTCHA executa sua análise em segundo plano, chama onSubmit(token) com um token de resposta, e seu callback envia o formulário. O token é incluído como g-recaptcha-response no corpo do POST.

Cloudflare Turnstile — passo a passo

O Cloudflare Turnstile é uma alternativa de CAPTCHA com foco em privacidade que não rastreia usuários, não define cookies de perfilamento e não exibe quebra-cabeças com imagens. Ele oferece três modos de widget:

Managed: o widget decide se deve mostrar um desafio com base em sinais do navegador)
Non-interactive: aprova sem exigir interação do usuário para a maioria dos visitantes
Invisible: executa totalmente em segundo plano

Etapa 1: crie um widget no Painel da Cloudflare

Faça login na sua conta Cloudflare, navegue até Segurança de aplicativos → Turnstile, clique em Add widget, insira seu domínio e selecione um tipo de widget. Copie a Site Key e anote sua Secret Key.

Etapa 2: adicione o script do Turnstile

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

Etapa 3: adicione a div do widget ao seu formulário

<div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY"></div>

O Turnstile injeta automaticamente um input oculto chamado cf-turnstile-response no formulário. Nenhum JavaScript extra é necessário para o envio padrão do formulário.

Exemplo completo de formulário HTML

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Login</title>  
  <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>  
</head>  
<body>  
  <form action="/login" method="POST">  
    <label for="password">Senha:</label>  
    <input type="password" id="password" name="password" required>  
    <!-- Widget Cloudflare Turnstile -->  
    <div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY"></div>  
    <button type="submit">Entrar</button>  
  </form>  
</body>  
</html>

O modo Managed do Turnstile determinará — com base em sinais do navegador — se deve mostrar uma interação ou aprovar silenciosamente. Para testes, a Cloudflare fornece dummy site keys especiais (abordadas na seção de testes).

Prosopo Procaptcha — passo a passo

O Prosopo Procaptcha é um CAPTCHA nativo de Web3, com foco em privacidade, projetado como um substituto direto e plug-and-play para o reCAPTCHA. Ele não depende da infraestrutura do Google e foi criado tendo a privacidade do usuário como princípio central de design.

Etapa 1: obtenha sua captcha key da Prosopo

Registre-se em prosopo.io e crie um novo site para receber sua Site Key.

Etapa 2: carregue o bundle do Procaptcha

Adicione o script do Procaptcha:

<script src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>

Etapa 3: adicione o widget ao seu formulário

Coloque uma <div> com a classe procaptcha e sua site key como atributo data-sitekey.

Exemplo completo de formulário HTML

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Cadastro</title>  
  <script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>  
</head>  
<body>  
  <form action="/register" method="POST">  
    <label for="email">Email:</label>  
    <input type="email" id="email" name="email" required>  
    <!-- Widget Prosopo Procaptcha -->  
    <div class="procaptcha" data-sitekey="YOUR_SITE_KEY"></div>  
    <button type="submit">Cadastrar</button>  
  </form>  
</body>  
</html>

Etapa 4: envio do token

No envio do formulário, o Procaptcha injeta um campo oculto chamado procaptcha-response no seu formulário. Envie esse token para a API de verificação da Prosopo junto com sua secret key no backend.

Altcha — passo a passo

O Altcha é um CAPTCHA totalmente open source e auto-hospedado que usa um mecanismo de proof-of-work — o navegador do usuário executa uma pequena tarefa computacional em vez de resolver um quebra-cabeça visual. Ele não coleta dados do usuário, não define cookies de rastreamento e está totalmente em conformidade com o GDPR. Como é auto-hospedado, não há dependência de terceiros.

Etapa 1: carregue o widget do Altcha

Não é necessário registro. Carregue o script do elemento personalizado:

<script async defer type="module"  
  src="https://cdn.jsdelivr.net/gh/altcha-org/altcha/dist/altcha.min.js">  
</script>

Etapa 2: configure o endpoint de challenge

O Altcha exige um endpoint no servidor que gere um challenge criptográfico (usando uma HMAC secret key definida por você). Esse endpoint é chamado pelo widget antes do envio para buscar um challenge novo. A biblioteca de servidor do Altcha no seu framework cuida disso. A URL do endpoint é passada ao widget por meio do atributo challengeurl.

Etapa 3: adicione o widget ao seu formulário HTML

Exemplo completo de formulário HTML

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Feedback</title>  
  <script async defer type="module"  
    src="https://cdn.jsdelivr.net/gh/altcha-org/altcha/dist/altcha.min.js">  
  </script>  
</head>  
<body>  
  <form action="/feedback" method="POST">  
    <label for="feedback">Seu feedback:</label>  
    <textarea id="feedback" name="feedback" required></textarea>  
    <!-- Widget Altcha -- aponta para seu próprio endpoint de challenge -->  
    <altcha-widget challengeurl="/api/altcha-challenge"></altcha-widget>  
    <button type="submit">Enviar</button>  
  </form>  
</body>  
</html>

Etapa 4: envio do token

Depois que o proof-of-work é concluído, o Altcha preenche um input oculto chamado altcha com uma carga codificada em base64. Seu backend verifica essa carga com base no seu segredo HMAC — nenhuma chamada de API externa é necessária.

Verificação no backend — como funciona

Independentemente do CAPTCHA que você usar, o padrão de verificação no lado do servidor é o mesmo:

Extraia o token do corpo da requisição POST usando o nome do campo específico de cada provedor (g-recaptcha-response, cf-turnstile-response, procaptcha-response ou altcha).
Envie o token para o endpoint de verificação do provedor — uma requisição POST que inclui sua secret key e o token do usuário (e, opcionalmente, o endereço IP do usuário no caso do reCAPTCHA).
Faça o parse da resposta JSON — os provedores retornam um indicador de sucesso/falha na resposta. reCAPTCHA e Turnstile usam um campo success: true/false; a Prosopo usa verified: true/false; o Altcha é verificado localmente com base no seu segredo HMAC. Alguns provedores também retornam hostname e timestamp do challenge.
Aceite ou rejeite o envio — se a verificação falhar, retorne um erro ao usuário e não processe os dados do formulário. Se passar, prossiga normalmente.

Endpoints de verificação por provedor:

reCAPTCHA v2: [https://www.google.com/recaptcha/api/siteverify](https://www.google.com/recaptcha/api/siteverify)
Cloudflare Turnstile: [https://challenges.cloudflare.com/turnstile/v0/siteverify](https://challenges.cloudflare.com/turnstile/v0/siteverify)
Prosopo: [https://api.prosopo.io/siteverify](https://api.prosopo.io/siteverify)
Altcha: Local — verificado com base no seu próprio segredo HMAC, sem necessidade de chamada externa

⚠️ Nunca use sua site key para verificação no backend — sempre use a secret key. Confundir as duas é um dos erros de integração mais comuns.

Testando seu CAPTCHA HTML em um servidor local

Testar CAPTCHA localmente exige alguns passos extras, já que a maioria dos provedores valida nomes de domínio.

reCAPTCHA v2: Adicione localhost à lista de domínios permitidos no console de administração do Google reCAPTCHA. O widget será renderizado e funcionará normalmente em http://localhost.
Cloudflare Turnstile: Use as test site keys oficiais da Cloudflare. A chave 1x00000000000000000000AA sempre produz um resultado de aprovação; a 2x00000000000000000000AB sempre falha. Você também pode combinar a site key de aprovação (1x00000000000000000000AA) com a secret key 3x0000000000000000000000000000000AA no backend para simular um erro "timeout-or-duplicate". Troque todas as chaves de teste pelas suas chaves reais de produção antes de fazer o deploy.
Prosopo Procaptcha: localhost é compatível por padrão durante o desenvolvimento — nenhuma configuração extra é necessária.
Altcha: Como ele é auto-hospedado, localhost funciona nativamente. Apenas certifique-se de que seu endpoint de challenge também esteja rodando localmente.

Use o DevTools → aba Network do navegador para confirmar que o script da API do CAPTCHA foi carregado (HTTP 200) e que o POST do formulário inclui o campo de token esperado.

Solução de problemas comuns

O widget CAPTCHA não é renderizado

Verifique novamente se a site key corresponde ao tipo de CAPTCHA que você registrou (chaves de checkbox não funcionam para o modo invisible, e vice-versa).
Confirme se a tag <script> da API está presente e é carregada sem erro 404 ou CORS no DevTools.
Garanta que o domínio no seu registro corresponda ao domínio de onde você está servindo o conteúdo, inclusive com ou sem www..

O token está ausente no POST do formulário

O input oculto só é injetado depois que o challenge é concluído. Se o usuário enviar antes de ele estar pronto, nenhum token será enviado.
Para o Invisible reCAPTCHA, certifique-se de que o callback onSubmit acione form.submit() depois que o token estiver disponível, e não antes.
Para o Altcha, confirme que seu endpoint de challenge está acessível e retornando um challenge válido.

A verificação no backend retorna uma resposta de falha

Verifique se você está enviando a secret key (e não a site key) para o endpoint de verificação.
Os tokens normalmente são de uso único — se você estiver tentando novamente o mesmo POST nos testes, gere um token novo a cada vez.
Verifique se há dessincronização de relógio: alguns provedores (especialmente o Altcha) rejeitam challenges antigos demais.

Erro de "Invalid domain" ou incompatibilidade de sitekey

Em localhost, certifique-se de que localhost (e não 127.0.0.1) está na sua lista de domínios permitidos.
Para o Turnstile, mude para a test site key durante o desenvolvimento local.

Widget oculto ou sobreposto a outros elementos

Os widgets CAPTCHA são renderizados em iframes com z-index fixo. Se outro elemento (um modal, cabeçalho fixo etc.) tiver um z-index maior, ele poderá encobrir o widget.
Defina um z-index explícito no contêiner pai ou verifique se há overflow: hidden em elementos ancestrais cortando o iframe.

Nota de acessibilidade: Todos os quatro provedores deste guia oferecem alternativas acessíveis. reCAPTCHA e Turnstile fornecem desafios de áudio; Prosopo e Altcha são projetados para minimizar o incômodo ao usuário por padrão, reduzindo totalmente a dependência de quebra-cabeças visuais.

Automatizando e testando a resolução de CAPTCHA com CapMonster Cloud

Quando sua implementação de CAPTCHA estiver em produção, talvez você precise testá-la programaticamente — para pipelines de QA, testes de integração ou monitoramento automatizado. Resolver CAPTCHAs manualmente toda vez que um teste roda não é viável em escala.

CapMonster Cloud é um serviço automatizado de resolução de CAPTCHA com tecnologia de IA que oferece suporte aos quatro tipos de CAPTCHA abordados neste guia: reCAPTCHA v2 (checkbox e invisible), Cloudflare Turnstile, Prosopo Procaptcha e Altcha. Ele funciona expondo uma API simples: você envia uma tarefa com a URL da página de destino e a site key, e o serviço retorna um token resolvido pronto para ser injetado no seu formulário.

Como ele se encaixa no fluxo de trabalho de um desenvolvedor:

Testes de integração automatizados: execute testes end-to-end em formulários protegidos por CAPTCHA em pipelines de CI/CD sem interação manual.
Verificação de QA: confirme que seu backend valida e rejeita tokens corretamente em diferentes condições.
Pipelines de coleta de dados em que a interação com páginas protegidas por CAPTCHA faz parte de um fluxo autorizado.

O CapMonster Cloud é compatível com a interface de API amplamente usada, o que significa que ele se integra a muitos frameworks de automação existentes com configuração mínima. Você envia uma tarefa contendo a URL da página e a site key, consulta o resultado e recebe o token — que então injeta como o valor apropriado de campo oculto no formulário.

Conclusão

Implementar uma solução de captcha html não exige infraestrutura complexa — apenas uma tag de script, um elemento de widget, o par correto de captcha key e uma verificação de token no lado do servidor. Cada opção deste guia tem seus próprios pontos fortes: o reCAPTCHA v2 é testado em batalha e amplamente confiável; o Turnstile minimiza o incômodo ao usuário e é amigável à privacidade; a Prosopo oferece uma alternativa nativa de Web3 sem dependência do Google; e o Altcha oferece controle total com uma infraestrutura auto-hospedada e open source.

Pronto para começar? Escolha o CAPTCHA que melhor se adapta às suas exigências de privacidade, UX e infraestrutura, registre sua site key e use os exemplos de código acima para adicioná-lo ao seu formulário em minutos. Se você precisar automatizar testes ou QA nos seus formulários protegidos, CapMonster Cloud oferece suporte aos quatro provedores e se integra diretamente aos seus pipelines existentes.

Como implementar CAPTCHA em HTML: um guia simples para desenvolvedores

✅ Solicitação enviada

Solicitação para participar

5 melhores alternativas ao reCAPTCHA em 2026 (incluindo o Cloudflare Turnstile)

O que você precisa antes de começar

reCAPTCHA v2 Checkbox — passo a passo

reCAPTCHA v2 Invisible — passo a passo

Cloudflare Turnstile — passo a passo

Prosopo Procaptcha — passo a passo

Altcha — passo a passo

Verificação no backend — como funciona

Testando seu CAPTCHA HTML em um servidor local

Solução de problemas comuns

Automatizando e testando a resolução de CAPTCHA com CapMonster Cloud

Conclusão

Web scraping em Python em 2026: automação eficiente da coleta de dados

Por que o CAPTCHA não está funcionando? Causas comuns e como corrigir

Como Resolver CAPTCHA com Puppeteer e Playwright usando CapMonster Cloud

Como Identificar Diferentes Tipos de CAPTCHA

Incapaz de passar pelo CAPTCHA no LinkedIn: por que isso acontece, melhores soluções.