Como inserir um Google reCAPTCHA no seu site

Um dos grandes problemas que enfrentamos em nossos sites é a utilização dos formulários por partes de “bots”, com o intuito de propagar “spams” e que acaba acarretando em uma super utilização de recursos do nosso servidor, como CPU e memória.

Basicamente, esse procedimento é o resultado de algoritmos que identificam os formulários de nossos sites (de contato por exemplo) e começam a submeter informações neles de forma demasiada e automática. Com isso, a produção de “spam” acaba se tornando um problema para nossos serviços de email ou mesmo para o banco de dados da nossa aplicação.

Uma forma de proteger nosso site (nossos formulários) desses robôs é implementando uma verificação do tipo “captcha”, na qual é adicionada um campo que consegue verificar se o utilizador é realmente um ser humano.

Pois bem. Nesse post vou mostrar para vocês como utilizar o “reCAPTCHA” do Google (https://google.com/recaptcha/admin) dentro do seu site, e evitar assim o acúmulo de “spam”.

O primeiro passo é se autenticar com sua conta do Google e acessar o endereço: https://google.com/recaptcha/admin

Imagem 1: Formulário reCAPTCHA de registro de novo site
Imagem 1: Formulário reCAPTCHA de registro de novo site

Nessa página vamos adicionar um novo site. No campo “Etiqueta” você define o nome que quiser, para se lembrar melhor caso tenha vários “recaptchas” para vários sites distintos. Eu coloquei o próprio domínio.

Em “Tipo de reCAPTCHA” você tem diversas opções. No meu caso, eu selecionei a opção “reCAPTCHA v2” e depois a sub-opção “Caixa de seleção ‘Não sou um robô’ “.

No campo “Domínios” eu insiro o domínio do site que utilizará o “reCAPTCHA”.

Em “Proprietários” aparecerá o seu email e caso você queira pode adicionar outros endereços de quem poderá acompanhar e gerenciar esse reCAPTCHA.

Feito isso, “aceite os termos de serviço do reCAPTCHA” e depois clique em “Enviar“.

Na próxima página, serão geradas 2 chaves.

Imagem 2: Chave de Site e Chave Secreta do reCAPTCHA
Imagem 2: Chave de Site e Chave Secreta do reCAPTCHA

É importante que você copie essas 2 chaves que foram geradas (a chave de site e a chave secreta). Utilizaremos a primeira para criar o campo “Eu não sou um robô” no nosso formulário e a segunda utilizaremos para validar a verificação sempre que o nosso formulário for submetido.

Em nosso site agora, a primeira coisa que temos que fazer é adicionar o arquivo “javascript” que vai nos auxiliar a inserir e validar o captcha. Antes de fechar a tag “head” da página que contém o formulário coloque o seguinte código:

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

Agora vamos até o formulário que desejamos inserir o reCAPTCHA.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
    <head>
        <title>reCAPTCHA</title>
        <script src='https://www.google.com/recaptcha/api.js'></script>
    </head>
    <body>
    	<form method="post" action="verify.php">
        	<label>Nome:</label><input type="text" name="nome" /><br />
        	<label>Email:</label><input type="email" name="email" /><br />
        	<div class="g-recaptcha" data-sitekey="COLE-SUA-CHAVE-DE-SITE-AQUI"></div>        	<button type="submit">Enviar</button>
        </form>
    </body>
</html>

Veja que na linha 10 eu coloquei a div “g-recaptcha” e no atributo “data-sitekey” deveremos inserir justamente a chave de site que copiamos lá do painel de reCAPTCHA do Google. (OBS: A “action” desse formulário submete as informações para a página/arquivo verify.php e portanto será nesse arquivo que vou verificar se o reCAPTCHA foi interagido corretamente).

Executando a página, podemos ver que o reCAPTCHA é apresentado:

Imagem 3: Inserindo o campo "Não sou um robô" no nosso formulário
Imagem 3: Inserindo o campo “Não sou um robô” no nosso formulário

Agora no arquivo verify.php vamos verificar se tudo ocorreu de forma correta com o reCAPTCHA. Para fazer isso vamos recuperar a informação “g-recaptcha-response“, que foi submetido via POST junto com os outros dados do formulário.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
 
$captcha = isset($_POST['g-recaptcha-response']) ? $_POST['g-recaptcha-response'] : null;
 
if(!is_null($captcha)){
	$res = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=COLE-SUA-CHAVE-SECRETA-AQUI&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']));	if($res->success === true){
		//CAPTCHA validado!!!
		echo 'Tudo certo =)';
	}
	else{
		echo 'Erro ao validar o captcha!!!';
	}
}
else{
	echo 'Captcha não preenchido!';
}

Na linha 6 fazemos uma requisição para verificar se o captcha é válido. Veja que devemos passar a nossa chave secreta na URL para que o processo dê certo. Essa requisição retornará um json com a informação success. Caso ela esteja valendo true significa que o captcha foi validado.

E pronto! Dessa forma o seu formulário estará mais protegido!

No painel do Google você consegue visualizar um relatório contendo as requisições/verificações, solicitações suspeitas e etc.

Imagem 4: Google reCAPTCHA (painel de estatísticas e relatórios)
Imagem 4: Google reCAPTCHA (painel de estatísticas e relatórios)

Espero que esse conteúdo lhe seja útil.

Abs!

É formado em Sistemas de Informação, pós-graduado em Sistemas de Banco de Dados e mestre em Educação com foco em Tecnologias Sociocomunitárias. Trabalha como professor de ensino técnico e tecnológico no Instituto Federal de Educação, Ciência e Tecnologia de São Paulo ministrando disciplinas nas áreas de programação, banco de dados, desenvolvimento de projetos e engenharia de software.

Posts relacionados

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *