Home
Button Mobile Webdesign em Foco
Newsletter Webdesign em Foco
Support Webdesign em Foco
Contribuition Webdesign em Foco
Doe para a Webdesign em Foco
Suporte da Webdesign em Foco
Fechar

Invisible reCaptcha 3 do Google

07/06/2018

Nesse vídeo-tutorial aprenderemos como fazer um invisible reCaptcha 3 utilizando a API do Google.

Pra quem não sabe: CAPTCHA é um acrônimo da expressão "Completely Automated Public Turing test to tell Computers and Humans Apart" (teste de público completamente automatizado para diferenciação entre computadores e humanos). Serve para proteger seu sistema contra loops automáticos de sistemas de spam, por exemplo sistemas mal intencionados para testar senhas em um sistema de login, ou efetuar sucessivos cadastros em um formulário de forma automática.

O primeiro passo é acessar o site do reCaptcha clicando aqui.

Cadastrando no reCaptcha do Google

Precisamos primeiramente cadastrar nosso domínio no recaptcha, para isso basta seguir o tutorial clicando aqui.

Após realizar o cadastro, você terá dois códigos importantes: o SITE_KEY que roda no lado cliente e a SECRET_KEY que é para ser utilizada no lado servidor. Com esses dados vamos criar o arquivo Config.php incluindo esses dados em duas constantes:

<?php
#client-side
define('SITE_KEY','SUA SITE KEY');

#server-side
define('SECRET_KEY','SUA SECRET KEY');

Configurando lado cliente do reCaptcha

Posteriormente precisamos criar um formulário de teste e instalar o javascript do recaptcha, conforme código abaixo:

<!doctype html>
<html lang="pt-br">
<body>
    <form id="Form1" name="Form1" action="controllers/ControllerForm.php" method="post">
        <input type="text" id="Nome" name="Nome"><br>
        <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response"><br>
        <input type="submit">
    </form>

    <script src="https://www.google.com/recaptcha/api.js?render=<?php echo SITE_KEY; ?>"></script>
    <script src="libraries/Javascript.min.js"></script>
</body>
</html>

Precisamos chamar a função grecaptcha.execute passando a nossa SITE_KEY:

grecaptcha.ready(function() {
    grecaptcha.execute('SUA SITE KEY', {action: 'homepage'})
        .then(function(token) {
            document.getElementById('g-recaptcha-response').value=token;
        });
});

Configurando lado servidor do reCaptcha

Criaremos dois arquivos: ControllerForm.php que receberá os dados do formulário e instanciará o segundo arquivo: ClassCaptcha.php.

Arquivo ControlllerForm:

include("../class/ClassCaptcha.php");

$ObjCaptcha=new Captcha();
$Retorno=$ObjCaptcha->getCaptcha($_POST['g-recaptcha-response']);

var_dump($Retorno);
if($Retorno->success == true && $Retorno->score > 0.5){
    echo "deu certo";
}else{
    echo "você é um robô";
}

Arquivo ClassCaptcha:

include("../config/Config.php");
class Captcha{

    public function getCaptcha($SecretKey)
    {
        $Resposta=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".SECRET_KEY."&response={$SecretKey}");
        $Retorno=json_decode($Resposta);
        return $Retorno;
    }
}

Essa é a forma de fazer um invisible captcha com reCaptcha do Google. Até a próxima ;)

Receba as aulas da Webdesign em Foco em Seu Email
Suporte Webdesign em Foco

Posts Relacionados

Inserindo aviso de CapsLock no login
Nesta vídeo-aula explicaremos como gerar um aviso de capslock ativado quando o usuário ligar o botão de capslock ao digitar a senha do login.
Saiba mais!
Utilizando JSON para Busca no Banco de Dados
Hoje aprenderemos como utilizar o PHP com MySql buscando os dados com ajax e tendo como resposta um json. Fique ligado!
Saiba mais!
Javascript
Ensinaremos durante as aulas a codificação desta importante linguagem de programação.
Saiba mais!