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!

Google Meu Negócio – Para que serve?

Toda empresa que deseja estar no Google, precisa ter uma conta no Google Business – chamado também de Google Meu Negócio. Mesmo que não tenha endereço físico, como é meu caso, e o caso de agências que trabalham de modo virtual, lojas de e-commerce, consultoria on-line, etc., também é possível ter uma conta no Google Business e aparecer como o caso abaixo:

A sua página do Business aparecerá sempre que alguém procurar pelo nome da sua empresa. Podem ser incluídas várias informações relevantes, como telefone, site, horário de funcionamento, redes sociais e mapa de localização (se tiver um endereço físico). Se o usuário estiver acessando de um celular e clicar no botão Ligar, ele fará a chamada automaticamente. Se clicar no botão Rotas, ele inicia o Google Maps traçando a rota até sua empresa. Também pode-se colocar uma galeria de fotos da sua empresa e fotos de produtos separados em categorias que você mesmo cria. São muitas possibilidades.

Bom, tenho algumas ressalvas quanto ao serviço de fotos de produtos e postagens: tive dificuldades para incluir postagens de alguns clientes, pois nas diretrizes do Google, determina-se que as fotos não podem conter área de texto superior a 10% da imagem e não podem conter rostos de pessoas. E o texto das postagens não pode conter números de telefone, emojis, e nem caracteres especiais em excesso.

Como começar

O endereço para começar é este: https://www.google.com/intl/pt-BR_br/business/

Você deve fazer o login com sua conta Google, e depois é só seguir as instruções. Em determinado momento, será solicitado para Confirmar o seu negócio. Isso antes podia ser feito via ligação telefônica, mas ultimamente está sendo feito somente por carta.

Funciona assim: você fornece o endereço, que pode ser da sua empresa, ou mesmo da sua residência, e dentro de 5 a 10 dias, receberá um cartão-postal do Google com um código. Basta fazer login novamente no Google Meu Negócio e informar o código que está no postal, confirmando assim que o endereço físico é seu mesmo. Depois disso sua empresa já faz parte do Google.

Como incluir o Certificado SSL no seu site

O SSL (Secure Sockets Layer) é um Certificado Digital que garante segurança nas transações online, entre o usuário e o website. Em termos práticos, significa que, quando um usuário preenche um formulário digital, por exemplo, as informações são criptografadas para que não haja vazamento de informações. Essa criptografia é feita por uma chave única, em posse da empresa certificadora.

A cerca de 15 anos atrás, com a popularização de sites de e-commerce, tornou-se necessário proteger informações sigilosas como cartões de crédito, dados bancários e senhas de e-mail. Fez-se necessário a utilização de criptografia para proteger tais dados, então investiu-se muito na criação de certificados que garantissem a segurança desses dados. Porém, de alguns anos para cá, cada vez mais golpes de internet obrigaram as empresas a adotarem medidas de segurança até nos formulários mais triviais.

E finalmente em julho de 2018, o Google praticamente decretou a necessidade de se possuir um certificado SSL em todos os sites, priorizando em suas buscas os sites que possuem Certificado SSL. O navegador Chrome deixou de exibir certos sites, e em alguns casos mostrando uma tela assustadora de aviso de site não seguro para os sites que não possuem SSL. E em sites com baixo risco de invasão (sites que não possuem formulários, por exemplo), simplesmente mostra um ícone e o aviso “Não seguro” no prefixo da URL, ao contrário do famoso “cadeado”.

Então para garantir segurança para seus usuários e além disso ter uma prioridade na busca do Google, todo site precisa de um certificado SSL.

Como incluir o SSL em meu site?

A maioria dos provedores de internet possuem algum tipo de pacote que inclui o certificado SSL. Na Locaweb, por exemplo, toda hospedagem possui um certificado SSL compartilhado. A maior desvantagem do SSL compartilhado em relação ao SSL próprio, é a necessidade de usar o prefixo por exemplo: https://ssl.websiteseguro.com/seu-domínio Ou seja, a URL fica um tanto longa e não intuitiva.

Vou citar aqui o exemplo de como contratar na Locaweb, que é meu provedor de hospedagem, e acredito que nos grandes provedores o processo seja semelhante. A Locaweb possui um passo a passo bem simples de seguir, e o primeiro passo é solicitar a contratação, gerar o boleto e pagar. Após a confirmação de pagamento, a Locaweb envia por e-mail um link para fazer o cadastro e solicita que se abra um chamado para gerar a chave CSR, uma espécie de senha gigantesca e portanto impossível de ser adivinhada. Essa CSR é gerada pela empresa certificadora, e depois deve ser informada para o provedor de hospedagem.

Como sou Desenvolvedor Locaweb, a própria Locaweb se encarrega de realizar alguns passos de instalação, poupando algum tempo, então o terceiro passo é a configuração de redirecionamento. Assim, se o usuário digitar por exemplo “www.nishiweb.com.br”, ele vai ser redirecionado automaticamente para “https://nishiweb.com.br”, evitando assim que ele veja uma página não segura dentro do seu site.

O redirecionamento é bem fácil de se fazer, bastando acrescentar o código abaixo no arquivo .htaccess do seu site:

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.seudominio.com.br/$1 [R,L]

Caso seu site não tenha o .htaccess, é só criar um usando um bloco de notas e salvar na raiz do seu site.

Pronto, assim a segurança do seu site estará garantida!