Como utilizar reCaptcha?

Como utilizar reCaptcha?

12 de outubro de 2020 0 Por Ramos de Souza Janones
Como vender Software - Seja desktop, web ou MobilePowered by Rock Convert
Powered by Rock Convert

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

Powered by Rock Convert

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:

<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:  Torre de Hanoi - Como funciona essa solução recursiva?

<?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 

Powered by Rock Convert
Siga os bons!
Últimos posts por Ramos de Souza Janones (exibir todos)
vote
Article Rating
LEIA TAMBÉM:  6 TENDÊNCIAS DE UX DESIGN PARA OS PRÓXIMOS ANOS