Como utilizar reCaptcha?

Como utilizar reCaptcha?

12 de outubro de 2020 1 Por Ramos de Souza Janones

Artigo com o objetivo de mostrar como utilizar o reCaptcha em formulários HTML, assim como também com o JavaScriot e o PHP.

Introdução ao reCAPTCHA

O reCAPTCHA é uma nova ferramenta do Google para proteger seu site contra spammers e bots. Ele vem de uma ideia novadora, pois até então os captchas eram vistos mais como um obstáculo do que um auxiliar pelos usuários. Com o reCAPTCHA isso é diferente, pois tudo que o usuário precisa fazer é clicar em um checkbox, confirmando que não é um robô. Dessa forma todos ganham, o usuário tem acesso mais rápido às informações desejadas, e você mantém visitantes indesejáveis de seu site.

Incrível! Quero ter um desses, como faço?

O primeiro passo é você conseguir uma chave para o seu site. Vá até o site abaixo e clique no botão azul localizado na posição superior-direita do site, escrito “Get reCAPTCHA”: https://www.google.com/recaptcha/intro/index.html

Após ter cadastrado seu site, você terá em mãos duas informações importantes: a chave do site, e a secret (chamarei de chave secreta). O primeiro passo para implementar o reCAPTCHA em seu site é inserir a API em seu site. Insira o código dentro da tag head de seu site:

Recomendamos a leitura:
- 14 Hábitos de Desenvolvedores Altamente Produtivos eBook Kindle
- Cupom de R$ 100 off no Smartphone Positivo Q20 - Válido somente até 1 de Maio de 2021.

- Seleção de Equipamentos para Streaming
<script src='https://www.google.com/recaptcha/api.js'></script>

Tudo pronto para o próximo passo.

Criando o formulário

Crie um formulário comum, eu fiz com dois campos: um para o usuário colocar o nome, e outro para uma mensagem qualquer. A marcação ficou assim:

 

<h1>Exemplo de formulário com o reCaptcha</h1>
        
<form action="formulario.php" method="post">
  Digite seu nome: <input type="text" name="nome"><br><br>
  Deixe sua mensagem: <br>
  <textarea name="mensagem" rows="7" cols="35"></textarea><br><br>
  <input type="submit" value="Submit" name="formulario">
</form>

Inserir o reCAPTCHA no formulário é extremamente simples, você só precisa adicionar o seguinte elemento na posição que deseja que ele apareça:

<div class="g-recaptcha" data-sitekey="SUA-CHAVE"></div>

Não esqueça de substituir SUA-CHAVE pela chave que você recebeu no site, lembrando que é a chave do site, não a chave secreta!

Substitua a propriedade action na tag form para o nome do arquivo PHP que irá validar o formulário. Você pode validar na mesma página, mas eu preferi deixar em uma separada para o código ficar mais simples.

Mas não posso validar usando JavaScript na hora?

Não 🙂 Você já irá entender o motivo.

Criando o código PHP para validar o formulário

Vamos obter o valor do campo de nome e da mensagem que o usuário enviou:

if (isset($_POST['nome'])) {
    $nome = $_POST['nome'];
}

if (isset($_POST['mensagem'])) {
    $mensagem = $_POST['mensagem'];
}

A partir daqui que a validação do captcha realmente acontece. É nos enviada via POST um valor fornecido pelo reCAPTCHA, é possível recuperar esse valor pela variável $_POST['g-recaptcha-response']. Logo:

if (isset($_POST['g-recaptcha-response'])) {
    $captcha_data = $_POST['g-recaptcha-response'];
}

// Se nenhum valor foi recebido, o usuário não realizou o captcha
if (!$captcha_data) {
    echo "Por favor, confirme o captcha.";
    exit;
}

Parece que acabou, né? Não! Agora que vem a parte divertida, lembra quando eu disse que era necessário que o captcha tinha que passar por uma validação PHP? Isso é necessário pois o reCAPTCHA usa informações no banco de dados do Google, que contém diversas informações sobre o usuário que “efetuou” o captcha. Dessa forma é possível distinguir um usuário comum de um bot. Para validarmos o usuário, precisamos fazer uma requisição para a API do reCAPTCHA, utilizando o file_get_contents. Observe:

$resposta = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=SUA-CHAVE-SECRETA&response=".$captcha_data."&remoteip=".$_SERVER['REMOTE_ADDR']);

Procure no meio da URL por SUA-CHAVE-SECRETA e substitua pela sua. O que esse comando faz é recuperar dados na API do reCAPTCHA por informações sobre os valores que foram fornecidos pelo captcha, além de enviar o IP do usuário para futuras avaliações.

Com a requisição enviada, só nos falta tratar a resposta:

if ($resposta.success) {
    echo "Obrigado por deixar sua mensagem!";
} else {
    echo "Usuário mal intencionado detectado. A mensagem não foi enviada.";
    exit;
}

Mas esta é a única forma?

Não, é claro que não. Pela Web há diversaos exemplos para a mesma proposta. Este foi um artigo mais educacional. Ima forma que utilizamos é a seguir:

LEIA TAMBÉM:  O que é Javascript e seus frameworks - Uma Introdução

<?php ini_set('display_errors',1); ini_set('display_startup_erros',1); error_reporting(E_ALL); ?><!--Força o php a mostrar todo tipo de erro, linha temporária-->
    <?php
    function __autoload($class_name){
        require_once '../_lib/'.$class_name.'.php';//-->lê minhas classes de forma automática
    }
    ?>
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="_css/login.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src='https://www.google.com/recaptcha/api.js'></script>
        <script>
            $(document).ready(function() {
                $('#send').prop('disabled', true);//desativa o botão enviar
                $('.g-recaptcha').hide();//esconde o captcha
                validate();
                $('#inputEmail, #inputPassword').change(validate);
            });
            function validate() {
                if ($('#inputEmail').val().length > 10) {//enquanto o campo de email nao tiver menos que 10 caracteres, não ativa o reCaptcha
                    $('.g-recaptcha').show();//exibe o reCaptcha
                }else{//se mudar de ideia e reduzir o campo pra menos de 10 caracteres...
                    $('.g-recaptcha').hide();//o reCaptcha se esconde novmanete
                }
            }
            function enableSend() {
                $('#send').prop('disabled', false);//quando o captcha é confirmado, ativa o botao enviar
            }
        </script>
    </head>

    <body>
    <?php
    $helper = new Helpers();//-->objeto com vários métodos importantes
    if (isset($_POST['attempt'])){//verifica se tem tentativa restante
        $attempt = intval($helper->validation($_POST['attempt']));//validation=método que verifica e escapa minha sring (trim(), stripcslashes() e htmlspecialchars())
    }else{
        $attempt = 3;//se não for definido número de tentativas, aqui é definido como 3
    }

    if (isset($_POST['g-recaptcha-response']) and isset($_POST['username']) and isset($_POST['password'])) {//garante que todos os campos foram preenchidos
        $captcha_data = $_POST['g-recaptcha-response'];
        if ($captcha_data) {//Verificação do reCaptcha
            $resposta = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=DIGITE-SUA-CHAVE-SECRETA-GERADA-PELO-GOOGLE-AQUI=" . $captcha_data . "&remoteip=" . $_SERVER['REMOTE_ADDR']);
            if ($resposta) {//validação do reCaptcha
                $username = strtolower($helper->validation($_POST['username']));
                $password = $helper->validation($_POST['password']);
                $user = new User();//--->meu objeto que acessa o banco de dados usando PDO
                $userValidated = $user->checkPasswordHash($username);//--->método do meu objeto que procura o usuario no bacno de dados (SELECT * FROM tbl_Users WHERE username = $username)
                if ($userValidated){//verifica se o email existe, se existir...
                    if ($userValidated->status == 1){//verifica se a conta está bloqueada ou não
                        echo 'Essa conta está bloqueada, criar botão para reenviar o email de recuperação...';
                    }else{
                    $hash = $userValidated->password;//retorna o hash do password
                    if (password_verify($password, $hash)) {//compara a senha e o hash que foi criado usando password_hash() e salvo no banco de dados
                        echo 'Password é válido, inserir código que inicia as sessões e chama a próxima página';//-->insira seu código
                    } else {//caso o password estjeja errado, perde uma tentativa
                        if ($attempt != 1){//se a tentativa restante for igual a 1, a proxima vez será direcionado para a página de recuperação de senha
                            $attempt--;
                            echo 'Usuário e senha não combinam, você tem mais '.$attempt.' tentativas';//mostra o número de tentativas restante
                        }else{//bloqueia a conta e chama a página de recuperação de senha
                            echo 'inserir código que bloqueia a conta e abre pagina de recuperaçao de senha';//-->insira seu código de bloqueio
                        }
                    }
                    }
                }else{//se o email não existir, perde uma tentativa mas não avisa se o erro foi no email ou na senha
                    if ($attempt != ){
                        $attempt--;
                        echo 'Usuário e senha não combinam, você tem mais '.$attempt.' tentativas';//mostra o número de tentativas restante
                    }else{//bloqueia a conta e chama a página de recuperação de senha
                        echo 'inserir código que bloqueia a conta e abre pagina de recuperaçao de senha';//-->insira seu código de bloqueio
                    }
                }
            } else {
                echo "Validação não concluída, tente novamente.";
                exit;
            }
        } else {
            echo "Validação não concluída, tente novamente.";
            exit;
        }
    }
    ?>
    <section>
        <form class="login" action="login.php" method="post">
            <fieldset>
                <legend>Login</legend>
                <label for="inputEmail" class="Label">Email: </label>
                <input id="inputEmail" class="inputText" type="email" maxlength="30" name="username" required>
                <label for="inputPassword" class="Label">Password: </label>
                <input id="inputPassword" class="inputPassword" type="password" maxlength="20" name="password" required>
                <div class="g-recaptcha" data-sitekey="DIGITE-A-CHAVE-DO-SEU-SITE-CRIADA-PELO-GOOGLE-AQUI" data-callback="enableSend"></div><!--Linha que adiciona o recaptcha-->
                <input type="hidden" name="attempt" value=<?php echo $attempt ?> /><!--envia por post o numero de tentativas restante-->
                <input type="submit" value="Confirmar" id="send" class="send">
            </fieldset>
        </form>
    </section>

    </body>
    </html>

Gostou? Tem novas ideias e sugestões? Comente no artigo.

Você está nas seções: » Programação » PHP 

votes
Article Rating
LEIA TAMBÉM:  E-Book: Desenvolvedor Kotlin Android