Guia Google APIs

Usando o Google Recaptcha com CodeIgniter

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (3)  (0)

Neste artigo veremos como integrar o Google Recaptcha em aplicações PHP desenvolvidas com o framework CodeIngiter.

Motivação

O Google Recaptcha é uma ferramenta bastante útil para aplicações web, pois protege o sistema contra spam e abusos. Trata-se de um serviço gratuito, oferecido pelo Google, que possui um algoritmo avançado de análise para impedir softwares automatizados de praticar atividades maliciosas. Para usuários reais, no entanto, ele se mostra um “obstáculo” extremamente fácil de ser contornado.

Neste artigo veremos como integrar o Recaptcha a um sistema de envio de formulários desenvolvido com o framework CodeIgniter, permitindo que os dados sejam submetidos apenas por usuários válidos (humanos).

Saiba mais sobre o framework CodeIgniter

Passo 1: Configurar a API do Google Recaptcha

O primeiro passo para utilizar o Recaptcha é criar as keys que serão utilizadas para a integração com nossa aplicação. Para isso, temos que acessar a página do serviço em https://www.google.com/recaptcha/admin e fazer login com uma conta do Google.

Dentro dessa página de administração, podemos visualizar os sites já configurados e podemos registrar um novo, que é o nosso objetivo aqui.

Na Figura 1 vemos o formulário de registro de novo site. Em Label, você pode digitar o nome do seu projeto; em Domains, deverá informar os domínios para os quais será autorizado o funcionamento das suas Keys. Caso ainda não tenha registrado um domínio e pretenda testar a aplicação localmente, informe “localhost” como domínio. Esse campo pode ser alterado posteriormente. Por fim, clique em Register.


Figura 1. Formulário de registro de novo site

Após o registro, será exibida uma tela com as keys, como mostra a Figura 2. Uma delas será usada na página, dentro do formulário HTML (Site key), e a outra (Secret key) será usada secretamente no back-end da aplicação; nesse caso, no controller do CodeIgniter.


Figura 2. Chaves que serão usadas em nossa aplicação

Saiba mais sobre o Google Recaptcha

Passo 2: Configurar a view

A view, nesse exemplo, conterá o formulário de contato, simulando um tipo comum de página que requer a submissão de dados pelo usuário em um site. Então, iremos criar, dentro do diretório view, uma pasta chamada contato e, dentro dela, adicionaremos um arquivo formulario.php com o conteúdo da Listagem 1.

01 <script src="https://www.google.com/recaptcha/api.js"></script>
02 <form action="index.php/contato/receber" method="POST">
03     <input type="text" name="nome" placeholder="Informe seu Nome"/>
04     <br/>
05     <input type="email" name="email" placeholder="Informe seu E-mail"/>
06     <br/>
07      <div class="g-recaptcha" data-sitekey="Site Key"></div>
08     <br/>
09     <input type="submit" value="Enviar"/>
10 </form>
Listagem 1. View com o formulário de envio

Linha 1: importamos a API do Google Recaptcha para nossa página;

Linha 7: criamos uma div com a classe padrão da API g-recaptcha e com o atributo data-sitekey, que deve ser preenchido com a Site Key que criamos no Passo 1.

Passo 3: Implementar o controller

Agora, iremos criar o controller Contato e nele inserir uma função pública para exibir nossa página com o formulário. No código a seguir temos essa função, que simplesmente carrega a view criada anteriormente.

01 public function index(){
02    $this->load->view('contato/formulario');
03 }

Assim que esse método for adicionado, será possível acessar nossa aplicação através do endereço http:///index.php/contato e visualizar nosso formulário, como mostra a Figura 3.


Figura 3. Formulário com Recaptcha ativo

Para finalizar, precisamos criar a função que receberá os dados submetidos, e que também validará nosso usuário através da API do Google Recaptcha. Assim, ficamos livres de aplicações automatizadas que enviam spam através de formulários. O código para essa função pode ser visto na Listagem 2.

01 public function receber(){
02    $nome = $this->input->post('nome');
03    $email = $this->input->post('email');
04    $recaptchaResponse = $this->input->post('g-recaptcha-response');
05    $secret = 'Secret Key';
06    $url = 'https://www.google.com/recaptcha/api/siteverify';
07    $data1 = array('secret' => $secret, 'response' => $recaptchaResponse);
08    $ch = curl_init();
09    curl_setopt($ch, CURLOPT_URL, $url);
10    curl_setopt($ch, CURLOPT_POST, true);
11    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
12    curl_setopt($ch, CURLOPT_POSTFIELDS, $data1);
13    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
14    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
15    $response = curl_exec($ch);
16    curl_close($ch);
17    $status = json_decode($response, true);
18    if ($status['success']) {
19		echo "O usuário ".$nome. " não é uma máquina. :)";
20	}else{
21		echo "O usuário ".$nome. " é uma máquina. :(";
22	}
23 }
Listagem 2. Função de validação e recebimento do formulário

Linhas 2 a 4: recebemos os dados enviados através do formulário pelo método POST;

Linha 5: aqui devemos adicionar a Secret Key, que foi gerada no site do Google Recaptcha;

Linhas 6 a 14: enviamos os dados requeridos pela API do Recaptcha, que são a Secret Key e a resposta do usuário. Esses dados estão sendo enviados via POST utilizando a biblioteca CURL do PHP;

Linha 17: recebemos o retorno da API em formato JSON, contendo o resultado da verificação do usuário;

Linhas 18 a 22: verificamos se o usuário é de fato um humano. Em caso positivo, procedemos normalmente e concluímos a tarefa a que se destina o formulário. Caso o captcha não seja superado, temos um indicativo de que o usuário pode ser uma máquina, e, portanto, não devemos concluir o procedimento, retornando, por exemplo, uma mensagem de erro.

Ao concluir essas etapas teremos nossa aplicação funcionando de forma segura, ao mesmo tempo em que mantemos a experiência do usuário simplificada, uma vez que ele apenas precisará marcar um checkbox indicando que não é uma máquina.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Ficou com alguma dúvida?