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!