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.
Primeiro passo é gerar a chave de acesso para utilização do reCaptcha. Para isso acesse o link abaixo:
https://www.google.com/recaptcha/admin
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.
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-xhr="#" 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:
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>
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>
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() });
}
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));
Dessa forma, você consegue fazer uma dupla verificação, tanto via client-side, quanto via server-side.
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:
Abraços e até a próxima!
Nos últimos anos, testemunhamos uma revolução na forma como os sites são criados, impulsionada pelo…
A animação 3D tem sido uma forma poderosa de contar histórias e criar experiências visuais…
Nos últimos anos, a inteligência artificial (IA) tem revolucionado a forma como criamos e editamos…
Nos últimos anos, a integração da inteligência artificial (IA) na criação de sites tem revolucionado…
Nos últimos anos, a edição de vídeo evoluiu rapidamente com o avanço da tecnologia, e…
A dublagem de filmes desempenha um papel fundamental na indústria cinematográfica, permitindo que obras de…
This website uses cookies.
Ver comentários
Olá, estou encontrando este erro no console "Uncaught (in promise) SyntaxError: Unexpected token A in JSON at position 0", referente a esta linha "fetch(url, config).then( res => { return res.json(); })
.then( json => { alert(json.result); grecaptcha.reset() });"
como poderia resolve-lo!