Blog do MX Cursos

Como implementar o reCAPTCHA invisível no seu site

Como implementar o reCAPTCHA invisível no seu site

O reCaptcha é um tecnologia disponibilizada pelo Google para proteção contra spam e abusos. Ele realiza Machine Learning, que faz uma combinação de análise de acordo com o que vai sendo utilizando e assim aprendendo a identificar usuários inválidos.

Além disso, toda vez que você precisa escrever, identificar imagem, isso é utilizado para digitalizar texto, anotar imagens e criar conjuntos de dados de aprendizado de máquina.

Isso por sua vez ajuda a preservar livros, melhorar mapas e resolver problemas de inteligência artificial.

O reCaptcha em sua evoluções começou com identificação de palavras, depois utilizando números de casas em fotos tiradas pelos carros do Street View e depois reconhecimento de imagens, como identificar em quais fotos tem algum carro na imagem, por exemplo.

E em 2017, o Google lançou o Invisible reCaptcha, o qual não solicita nenhum desafio para identificar o usuário válido. Podem ter casos que não consiga identificar, mas neste caso ele abrirá opção de teste de reconhecimento.

Vamos aprender como implementar esse recurso do reCaptcha Invisível, e realizar a validação da informação via server-side.

Criar chaves de acesso

Primeiro passo é gerar a chave de acesso para utilização do reCaptcha. Para isso acesse o link abaixo:

https://www.google.com/recaptcha/admin 

Nossos cursos indicados

Você encontrará uma tela parecida com essa abaixo:

Em “Label” você dará nome da identificação caso deseje alterar depois. Em “Choose the Type of reCAPTCHA”, marque a opção “Invisible reCAPTCHA”.

Ao marcar essa opção, aparecerá a opção para informar os domínios que a chave valerá.

Você pode adicionar quantos domínios desejar que sejam válidos. Ao adicionar um domínio, será válido para subdomínios, como este exemplo: Foi adicionado “mxcursos.com”, logo “blog.mxcursos.com” também poderá utilizar as chaves de acesso.

Após clicar em “Register”, você será redirecionado página onde conterá as informações de acesso e integração.

Apesar da imagem não ter carregado um pouco acima, terão as estatísticas de índice de spam, por exemplo. E mais abaixo, a opção de alterar label, adicionar mais domínios, entre outras informações.

Já com essas informações, vamos implementar no site.

Criando formulário HTML

Primeiramente criaremos um formulário HTML, que irá conter apenas “Nome”, “E-mail” e um botão, e um pouco de CSS apenas pra não ficar sem formatação.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Formulário de Cadastro</title>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            font-family: Verdana, Tahoma, sans-serif;
        }
        form{
            width:500px;
            margin:0 auto;
            border:1px solid #ccc;
            padding:20px;
        }

        form label{
             font-size:12px;
             color:#333;
         }
        form input{
            width:100%;
            padding:10px 0;
            border:1px solid #ccc;
            margin-bottom:10px;
        }
        form button{
            padding:10px 20px;
        }
    </style>
</head>
<body>

    <form id="register" action="" method="post">
        <label for="name">Nome:</label>
        <input type="text" name="name" id="name" />

        <label for="email">E-mail:</label>
        <input type="email" name="email" id="email" />
        <button type="submit">Enviar</button>

    </form>
    
</body>
</html>

O formulário terá esta aparência:

Adicionando reCAPTCHA

Com formulário definido, iremos adicionar código referente ao reCAPTCHA .

Existem algumas formas de realizar esse procedimento. Iremos chamar o reCAPTCHA após ter realizado uma validação no JavaScript .

Iremos adicionar primeiramente o script js, que deverá ser inserido antes da tag do fechamento da tag </head>.

<script src='https://www.google.com/recaptcha/api.js'></script>

E dentro do formulário, o código reCAPTCHA :

<div id='recaptcha' class="g-recaptcha"
data-sitekey="CHAVE DO SITE"
data-callback="sendForm"
data-size="invisible"></div>
  • data-sitekey : irá adicionar a chave do site (Site Key) que você gerou anteriormente;
  • data-callback: define uma função que irá executar com sucesso.
  • data-size: informa que criará o widget invisível.

Ciar o Javascript e chamando reCAPTCHA

Antes do fechamento da tag </body>, iremos adicionar o javascript. No primeiro momento, iremos fazer a validação dos dados e executar o reCAPTCHA e na função “sendForm” só vamos exibir um alert.

 <script type="text/javascript">
        let form = document.querySelector('#register');

        form.addEventListener('submit',  e => {
            e.preventDefault();
            let name = document.querySelector('#name');
            let email = document.querySelector('#email');
            if(!name.value || !email.value) {
                alert('Nome e Email são Obrigatorios');
                
            } else{
                grecaptcha.execute();
            }            
        });

        function sendForm(){
            alert("Passou");
        }
</script>
  • linha 2 seleciona o formulário o qual o id é #register;
  • linha 4 adiciona um evento submit ao formulário, quando for clicado o botão de submit, será executada uma ação;
  • linha 5 cancela ação do evento sem parar a propagação; o script continua;
  • linha 6 e 7 seleciona o campo “name”“email”;
  • linha 8 verifica se um dos campos estão vazios; se estiver, exibe um alert;
  • linha 12 executa a verificação do reCAPTCHA ;
  • linha 16 e 17 define a função sendForm e exibe um alert informando que passou.
Leia também  Visitas vs convergência

Criando a requisição Ajax

Agora vamos para segunda etapa que é verificar a resposta do usuário. Se tudo ocorrer corretamente, será gerado um token no qual você irá fazer uma consulta. Se retornar “Success”, quer dizer que é válido.

Como essa verificação é necessário utilizar uma linguagem server-side, vamos utilizar o PHP.

O envio dos dados será feito via Ajax para um arquivo PHP, o qual fará a verificação. Vamos retornar um alert se der tudo certo.

Iremos realizar uma modificação na função “sendForm”, que antes só exibíamos um alert verificando se já passou os dados.

Agora vamos modificá-lo para enviar os dados do formulário, mas o token via ajax para o arquivo chamado “register.php”, o qual irá realizar a consulta para ver se o token é válido.

function sendForm(token){         

let name = document.querySelector('#name');
let email = document.querySelector('#email');

let dataForm = 'name='+name.value+'&email='+email.value+"&token="+token
		
const url = 'register.php';
const config = {
				method : 'post',
				headers : {
					'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
				},
				body : dataForm
		};

fetch(url, config).then( res  => { return res.json();  })
				  .then( json => {  alert(json.result); grecaptcha.reset()  });

}

  • linha 1 modificamos a função passando agora o token gerado pelo reCaptcha;
  • linha 3 e 4 seleciona os campos dos formulários;
  • linha 6 define os valores que serão enviados para o arquivo register.php;
  • linha 8 define o arquivo que serão enviado os arquivos;
  • linha 9 a15 define as configurações a serem enviadas, como seria via POST, tipo de conteúdo (Content-type), e o que será enviado, que seria no body;
  • linha 17 chama a função fetch, que fará a requisição passando a url e as configurações. Utiliza then para recuperar a Promisse, que seria Response e retornamos o método json();
  • linha 18 com retorno do método json e também uma Promisse usamos o then para acessar o conteúdo. E assim exibimos um alert como resultado. Acrescentamos ainda um reset, por que o token só será validado uma vez.

Criando a verificação com PHP

Agora criaremos o arquivo register.php

<?php 

$data = array (
    "secret" => 'CHAVE SECRETA',
    "response" => $_POST['token']
);

$curl = curl_init();
curl_setopt($curl, CURLOPT_URL,"https://www.google.com/recaptcha/api/siteverify");
curl_setopt($curl, CURLOPT_POST, true);
curl_setopt($curl, CURLOPT_POSTFIELDS, http_build_query($data));
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);

$result = json_decode(curl_exec($curl));
curl_close($curl);


if(isset($result->success) && $result->success) {

    /**
     * Sendo valido, você fazer também uma validação os dados,
     * no caso o nome e email, se são valido, e assim registrar 
     * no banco de dados
     */

    $json = ['result' => 'Seus dados foram salvos com sucesso'] ;
     
} else {
    $json = ['result' => 'Por favor, tente novamente'] ;
}

exit(json_encode($json));
  • linha 3 a 5 é definido um array com a chave secreta (Secret key) e o token gerado pelo reCaptcha. A chave secreta é a chave criada no começo do tutorial;
  • linha 8 a 14 são as configuração do CURL, o qual fazemos uma requisição para o siteverify do Google e enviamos os dados do array para eles;
  • linha 16 resgatamos a resposta e que decodifica o Json que é retornado;
  • linha 17 fecha a conexão;
  • linha 20 verifica se existe a success e se ele vem preenchido. Se existir, é porque foi validado;
  • linha 28 definimos um retorno que será exibido no alert;
  • linha 31 define uma mensagem para o usuário tentar novamente;
  • linha 34 converte o array em json e termina o script;

Dessa forma, você consegue fazer uma dupla verificação, tanto via client-side, quanto via server-side.

Conclusão

reCaptcha é uma ótima alternativa mais amigável para garantir que não recebamos spans ou ação de robôs em nosso sites.

O que foi demostrado neste tutorial é uma das formas. Você pode escolher a não fazer verificação via server-side, deixa só pelo client-side. Também irá funcionar muito bem.

Você pode consultar outras formar de utilizá-lo acessando a documentação abaixo:

https://developers.google.com/recaptcha/docs/invisible

Caso esteja utilizando um WordPress, existem plugins que configuram este recurso:

Invisible reCaptcha for WordPress

Google Invisible reCaptcha by ThreatPress

CF7 Invisible reCAPTCHA

Abraços e até a próxima!

O MX Cursos já está na Black Friday.