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

Comentários

  1. Estava precisando exatamente desse conteúdo.
    Agora posso te fazer uma pergunta? A partir do momento que eu crio o recaptcha, eu posso colocar o mesmo somente no site principal ou eu posso utilizar esse mesmo em sub sites ou subdomínios?

  2. De todos que eu pesquisei para colocar recaptcha em qualquer site de uma maneira simples (mais simples e eficiente até do que a explicação do próprio Google), este teu é o melhor!
    Excelente, inclusive a verificação depois no PHP, simples e eficiente como deve ser.

Deixe um comentário

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