CAPTCHA com PHP e JQUERY

Para quem quer entender ou apenas implementar o tal do CAPTCHA para evitar spans em seus formulários vou tentar aqui descrever o passo-a-passo para a implementação utilizando PHP, JQUERY e AJAX , enfim,  Javascript.

O CAPTCHA nada mais é do que um arquivo chamado por Ajax que gera, neste caso dois conjuntos de letras aleatórias e, com estes conjuntos gera uma SESSION e uma imagem levemente distorcida. Quando o usuário tentar submeter o formulário as letras digitadas devem ser conferidas com a SESSION. O conceito é este, as variações ficam por conta de cada um.

A intenção aqui não foi fazer uma interface bonita pronta para a utilização, a ideia é destrinchar como criar uma imagem CAPTCHA e como fazer sua verificação.

Ao final teremos quatro arquivos:

  1. O arquivo do formulário em si que vou chamar aqui de index.php;
  2. O arquivo que gera o código CAPTCHA: gera_captcha.php;
  3. O arquivo para puxar a confirmação: confirmacao.php;
  4. O arquivo da fonte que será usada para gerar as letras, no caso do exemplo eu utilizei a fonte tpf display.ttf disponível para download aqui.
Obs.: neste exemplo utilizei a seguinte estrutura de pastas:
Pasta raiz contendo index.php e jquery.js; Pasta raiz>>captcha contendo gera_captcha.php e confirmacao.php e Pasta raiz>>captcha>>fonts contendo o arquivo da fonte.

Vamos começar com o arquivo index.php, acrescentando dentro de sua tag Header o jquery, que no caso estou utulizando a versão 1.2.6 . E para quem não sabe incluir o Jquery pode aprender aqui.

Inclua também este script após a incorporação do Jquery:

<script>
	$(document).ready(function() {
		/*troca palavras do captcha ao clicar*/
		$('#captcha-troca').click(function() {
			change_captcha();
		});
	});	

	/*troca palavras do captcha efetivamente e desabilita submit*/
	function change_captcha()
	{
		document.getElementById('captcha-imagem').src="captcha/gera_captcha.php?rnd=" + Math.random();
		$('#enviar').attr('disabled','disabled');
	}

	/*traz input hidden para dentro do formulário*/
	function Verifica() {
		$('#confirmacao').load('captcha/confirmacao.php', function(){
			$('#enviar').removeAttr('disabled');
		});
	}

	/*Verifica o formulário antes de enviar*/
	function Envia(formulario){

		if (formulario.codigo.value != formulario.verificacao.value) {
			alert("O seu código de verificação não confere.");
			change_captcha();
			formulario.codigo.focus();
			return (false);
		}

		return (true);
	}
</script>

A abertura de seu formulário deverá ser algo parecido com isto:

<form name="formulario" onsubmit="return Envia(this)" method="post" action="#" enctype="multipart/form-data">

Não irei explicar aqui cada parte, o importante é que a com o onsubmit declarado, a função Envia será chamada antes do envio do formulário, e é ela a responsável por conferir se os dados do formulário estão ok, e inclusive (neste caso, unicamente) se o código de verificação está correto.

Bem, depois de seus inputs, selects, texteareas, etc, acrescente a div para mostrar o código CAPTCHA. É importante também que esta div esteja dentro do formulário, ou seja, antes do fechamento da tag form (</form>).

<div id="captcha">

<img src="captcha/gera_captcha.php" alt="" id="captcha-imagem" /><br/>

<a href="#" id="captcha-troca">Trocar Palavras</a><br/>

Escreva as duas palavras:<br/>

<input name="codigo" type="text" onblur="Verifica(this)"/>

<div id="confirmacao"></div>

</div>

Desta forma fechamos o arquivo index.php, o arquivo do formulário em si.

Os outros arquivos ficando assim (códigos comentados):

gera_captcha.php

<?php

session_start(); //inicia dados de sessões

for ($i = 0; $i < 8; $i++) //escolhe 8 letras aleatórias
{
	if($i == "4") {
		$palavra .= " "; //acrescenta um espaço depois das 4 primeiras letras
	}
	$palavra .= chr(rand(97, 122));
}

$_SESSION['randomico'] = $palavra; //cria a session com a palavra gerada

$diretorio = 'fonts/'; //diretório da fonte

$nova_imagem = imagecreatetruecolor(165, 50); // cria imagem com 165x50px

$fonte = "TPFDisplay.ttf"; // fonte usada

$cor = imagecolorallocate($nova_imagem, 0, 0, 0); // cor da letra

$fundo = imagecolorallocate($nova_imagem, 201, 108, 30); // cor do background

imagefilledrectangle($nova_imagem, 0,0, 165, 50, $fundo); //cria retângulo no fundo da imagem

$rotacao = rand(-5, 5); //rotação aleatória para as letras

imagettftext($nova_imagem, 22, $rotacao, 5, 30, $cor, $diretorio.$fonte, $_SESSION['randomico']); //escreve no retângulo

header("Content-type: image/png");

imagepng($nova_imagem); //imprime imagem png

?>

confirmacao.php

<?php

session_start(); //inicia dados de sessões

echo "<input type='hidden' name='verificacao' value='".$_SESSION['randomico']."'/>"; //input hidden para verificação

?>

exemplo completo do index.php (página do formulário):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Aprendendo Captcha</title>

		<script src="jquery.js" type="text/javascript"></script>

		<script>
			$(document).ready(function() {
				/*troca palavras do captcha ao clicar*/
				$('#captcha-troca').click(function() {
					change_captcha();
				});
			});	

			/*troca palavras do captcha efetivamente e desabilita submit*/
			function change_captcha()
			{
				document.getElementById('captcha-imagem').src="captcha/gera_captcha.php?rnd=" + Math.random();
				$('#enviar').attr('disabled','disabled');
			}

			/*traz input hidden para dentro do formulário*/
			function Verifica() {
				$('#confirmacao').load('captcha/confirmacao.php', function(){
					$('#enviar').removeAttr('disabled');
				});
			}

			/*Verifica o formulário antes de enviar*/
			function Envia(formulario){

				if (formulario.codigo.value != formulario.verificacao.value) {
					alert("O seu código de verificação não confere.");
					change_captcha();
					formulario.codigo.focus();
					return (false);
				}

				return (true);
			}

		</script>

	</head>
	<body>		

		<form name="formulario" onsubmit="return Envia(this)" method="post" action="#" enctype="multipart/form-data">

			Nome:<br/>
			<input type="text" name="nome" value=""/><br/>
			Data de Nascimento:<br/>
			<input type="text" name="data_nascimento" value=""/><br/>
			Estado Civil:<br/>
			<select name="estado_civil">
			<option value="" selected>Selecione...</option>
			<option value="Solteiro(a)">Solteiro(a)</option>
			<option value="Casado(a)">Casado(a)</option>
			<option value="Divorciado(a)">Divorciado(a)</option>
			<option value="Viúvo(a)">Viúvo(a)</option>
			</select>

			<hr>

			<div id="captcha">
				<img src="captcha/gera_captcha.php" alt="" id="captcha-imagem" /><br/>
				<a href="#" id="captcha-troca">Trocar Palavras</a><br/>
				Escreva as duas palavras:<br/>
				<input name="codigo" type="text" onblur="Verifica(this)"/>
				<div id="confirmacao"></div>
			</div>

			<br/>

			<button id="enviar" disabled>Enviar</button></td>

		</form>
	</body>
</html>

Salve os arquivos seguindo a estrutura de pastas passada, terá o código funcionando e poderá entender como funciona o CAPTCHA. Agora, por fim, basta adaptar seu formulário, criar um estilo CSS e pronto!

Abraços!

About these ads

Sobre Guilherme Mattje

Desenvolvedor Web

Publicado em 26/08/2011, em JavaScript, Linguagens, PHP e marcado como , , , , , , , . Adicione o link aos favoritos. Deixe um comentário.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Seguir

Obtenha todo post novo entregue na sua caixa de entrada.

%d blogueiros gostam disto: