Como usar reCaptcha no formulário HTML

Depois de ver como é fácil configurar e instalar o reCaptcha no WordPress (link aqui) , vamos a um passo adiante, que é configurar o reCaptcha no seu formulário HTML. Pode ser feito com PHP ou ASP, depende da programação. Mas é necessário aqui usar uma das duas linguagens de back-end.

Como exemplo, vamos usar um formulário bem simples, como abaixo:

Entre as tags <head> e </head>, vamos acrescentar a função JS do reCaptcha e o script que faz a chamada ao submeter o formulário:

 <script src="https://www.google.com/recaptcha/api.js"></script>
 <script>
   function onSubmit(token) {
     document.getElementById("form1").submit();
   }
 </script>

E vamos modificar o botão, acrescentando a primeira CHAVE do reCaptcha, chamada SITEKEY:

<button class="g-recaptcha" 
        data-sitekey="6Le9kHcdAAAAALC1bQh4YE7UXkSmLljhnLC8GG8X" 
        data-callback='onSubmit' 
        data-action='submit'>OK</button>

Não precisa se preocupar em “esconder” essa chave, ela não pode ser usada em outro domínio, somente naquele que foi criado para usá-la. Portanto, se você usar mais de um domínio, ou domínios canônicos, será preciso cadastrar mais chaves.

Depois de acrescentar esse botão, vamos ver como a página ficou:

Depois de incluir o código, a página passa a mostrar esse selo de “protegido por reCAPTCHA

Agora vamos preparar a página de retorno. Veja o exemplo que fiz em PHP, na página resposta.php:

<?php
  if(isset($_POST['g-recaptcha-response'])){
          $captcha=$_POST['g-recaptcha-response'];
        }
  $secretKey = "XXXXXXXXXXXXXXXXXXXXXXXXXX";
		
  if ($captcha) {
        $ip = $_SERVER['REMOTE_ADDR'];
        $url =  'https://www.google.com/recaptcha/api/siteverify?secret=' . ($secretKey) . '&response=' . ($captcha) . '&remoteip=' . urlencode($ip);
        $response = file_get_contents($url);
        $responseData = json_decode($response);
        if($responseData-> success):
             print_r("Form OK!"); exit;
        else:
             print_r("Chave Inválida"); exit;
        endif;
    } else {
        print_r("reCaptcha não funcionou"); exit;
    }

  
?>

Basicamente o código faz o seguinte: verifica se a resposta do reCaptcha foi positiva, submete a resposta junto com a chave secreta para nova verificação. O reCaptcha retorna com uma resposta JSON e novamente ela é interpretada para o segundo teste, inclusive retornando o “score”, que diz a probabilidade do usuário ser Robô ou Humano. Nesse exemplo, caso tenha retornado Sucesso, basta aplicar o que deve ser feito no form, seja enviar e-mail ou gravar os dados do contato.

O JSON ficou assim:

{
  "success": true,
  "challenge_ts": "2021-12-08T14:26:05Z",
  "hostname": "www.animecomics.com.br",
  "score": 0.9,
  "action": "submit"
}

Adicionalmente, a página do reCaptcha mostra quantos SPAMs foram filtrados. Veja o relatório que recebemos em um formulário de contato:

Veja que o relatório é bem completo, dizendo até mesmo o score médio dos usuários, e a filtragem por dia / semana / mês.

Bom, é isso, vamos todos contribuir para acabar com o SPAM!

Como usar o reCaptcha no seu formulário

Acredito que todo mundo que navega na internet já se deparou com uma dessas perguntas estranhas:

Pois é, as perguntas sobre semáforos ou sobre as placas de sinalização são desafiadoras! Mas todos os exemplos mostrados acima tem uma finalidade: mostrar ao site ou ao servidor que a pessoa que está respondendo é real, e não um robô / script automático programado para preencher formulários, ou burlar votações virtuais. É um método controverso, porém necessário. Foi a solução que especialistas encontraram para evitar por exemplo que um programa fique tentando diversas senhas até conseguir entrar na conta de alguém, ou de mandar diversos spams de formulário (como mostramos em outra matéria: Como proteger seu formulário contra Spams – WordPress ou HTML) ou de manipular uma votação de Big Brother.

Esse tipo de método é chamado de Captcha. Só por curiosidade, o CAPTCHA é sigla de Completely Automated Public Turing test to tell Computers and Humans Apart, ou algo como “teste automatizado para diferenciar humanos e computadores”. O mais famoso Captcha é chamado de reCaptcha, que hoje é de propriedade do Google, disponível em versões gratuitas e pagas. Vamos abordar aqui a versão gratuita mais recente!

Como criar o reCaptcha

  1. O Primeiro passo é acessar a página do reCaptcha com sua conta Google: https://www.google.com/recaptcha/about/
    Clique no link V3 Admin Console, caso contrário você entrará na versão Enterprise (paga)

2. No primeiro acesso, serão solicitados seus dados e dados do site onde será instalado o reCaptcha. Será perguntado sobre usar a versão V2 ou V3, a diferença entre elas é que a V2 já começa com o desafio de clicar na caixa, digitar palavra ou de contar semáforos, enquanto que a V3 pode passar desapercebido pelo usuário na primeira vez, e nas demais, quando perceber que o usuário já preencheu mais vezes o mesmo formulário, ele pode pedir um dos desafios da versão 2.

3. Serão gerados 2 linhas de código criptografados. Copie essas duas linhas em um bloco de notas, para usarmos depois.

A instalação dependerá do seu site, se usa uma plataforma como WordPress ou programação HTML + PHP ou ASP. Aqui explicaremos esses 2 métodos:

Como Instalar o reCaptcha no WordPress

Se você utiliza o WordPress, a instalação é muito fácil. Seu site deve estar utilizando um plugin de formulário como Contact Form 7, ou WP Forms que são os mais comuns. Não importa qual, os plugins mais comuns de WordPress têm suporte ao reCaptcha, o que torna o trabalho muito simples. Nosso exemplo usa o WP Forms, e basta entrar na configuração que logo aparecerá a opção “Captcha”. Você tem a opção de usar o Captcha próprio do WP Forms, ou usar o reCaptcha do Google. Vamos nessa segunda opção:

Aqui é a hora de colar as duas chaves que copiamos do Google. Chave do Site e Chave secreta. Além disso, pode-se limitar uma pontuação: numa escala de 0,0 (mais provável que seja robô) a 1,0 (mais provável que seja humano), pode deixar o padrão 0,4. A não ser que você precise de uma segurança muito grande como por exemplo uma senha de acesso, que é recomendado deixar no mínimo 0,7.

Salve a configuração e teste seu formulário!