Olá todos, como vão? Faz um certo tempo desde o último “como fazer isto“, mas estou de volta a ativa.

Eu tenho trabalhado num projeto meu que posso dizer que é um peixe grande, um brinquedo para as horas vagas com o qual estou me divertindo muito e aprendendo bastante coisa. Em breve vocês irão ouvir falar dele, e vão ouvir falar muito mesmo! :P

Bem, trabalhando nele nestes dias eu precisei instalar um sistema de Captcha que fosse seguro e robusto, daí vem a primeira pergunta:

Ah Henrique, então porque você não usa o Simple Captcha?

A resposta: porque o Simple Captcha, como o próprio nome já diz é simples demais.

Tudo bem, eu poderia aproveiar a oportunidade para melhorar o Simple Captcha, até lançá-lo como produto grande, mas eu acho que o Simple Captcha já cumpriu a missão para a qual foi inventado, que foi proporcionar a compreensão de como funciona um sistema de Captcha. Deixemos ele aonde está.

Pois bem. Nas minhas recentes andanças pelo Google descobri o reCaptcha, um produto que está virando febre na internet, gratuito, seguro e usado pelo nosso conhecido Facebook.

A mini-saga para você colega webmaster começar a usá-lo consiste inicialmente em você se cadastrar no site do reCaptcha, pra isso acesse aqui.

O reCaptcha foi comprado recentemente pelo Google e basta que você informe um login e uma senha (que não precisam ser do Gmail) e pronto, de forma mágina o Google já te manda rapidinho de volta á pagina do reCaptcha e você começa as suas configurações.

Informado um login e senha você verá um novo cadastro, desta vez um campo pedindo para você informar o domínio (url) do seu site (ou do site no qual vai usar o captcha). Isto é necessário para que você crie uma chave de segurança de forma que só você e o seu site tenham acesso ao seu próprio sistema de captcha.

Domínio informado? Então você verá uma tela com as seguintes informações:

Domain Name: seusite.com.br
reCAPTCHA will only work on this domain and subdomains. If you have more than one domain (or a staging server), you can create a new set of keys.

Public Key: 0Lfiw8kSAAAAAhDpQFVUIZowO1F70taOZDKGnlZB
Use this in the JavaScript code that is served to your users

Private Key: 0Lfiw8kSAAAAAPKvnjQtE4EtaVQX6hpAisaHcJAI
Use this when communicating between your server and our server. Be sure to keep it a secret.

Pra você que não sacou o ingles aí eu explicarei o sentido dessas chaves no final, então vamos em frente…

Baixando e testando

Vamos supor que o seu site seja PHP, vamos usar este formato, que é mais comum, como exemplo neste post.

Entre aqui e faça o download dos códigos necessários para o sistema funcionar no seu site. Baixe este pacote em algum lugar fácil do seu computador, em seguida como sugestão você pode enviá-lo para um diretório de testes no seu site. Lógico que você vai mandar tudo descompactado. ;)

Dá uma olhada como ele já está funcionando em seu servidor, acessando a página: example-captcha.php. Só por esta página já fica simples instalar ele no seu site, mas nada melhor do que um tapa no visual dele, não acha?

Nos arquivos que baixou, ache o arquivo: “recaptchalib.php”. Agora coloca no lugar certo do seu site (geralmente uma pasta “incs” ou “includes”), onde você guarda os arquivos que costuma chamar por referências nas demais páginas.

Instalando e customizando

Na página que você recebe o formulário para onde será submetido com o sistema de captcha, faça mais ou menos o seguinte:

<?
include("includes/recaptchalib.php");
$captcha = $_POST["recaptcha_challenge_field"];

//Neste trecho você vai validar a entrada do usuário
$publickey = "6LdVPgwA555AAABkfsQ-gHhJFOpj7WGGFWnqfnabc"; //sabe aquelas chaves informadas ali encima? aqui você cola a sua Public Key fornecida.
$privatekey = "6LdVPgw555AAAKDm4uuZyAhjZMwUN7qmEjhISabc"; //e aqui você coloca a sua Private Key.
$resp = null;
$error = null;
$resp = recaptcha_check_answer ($privatekey, $_SERVER["REMOTE_ADDR"], $_POST["recaptcha_challenge_field"], $_POST["recaptcha_response_field"]);

 if ($resp->is_valid) {
  echo 'Parabéns, palavras corretas!';
  exit(); 
 } else {
  $error = $resp->error;
  echo 'As palavras digitadas na imagem não foram informadas corretamente!';
  exit(); 
 }
?>

Entendeu mais ou menos? Esta será a resposta proveniente do sistema do captcha, você deve ajustar de acordo com a atual resposta do seu formulario, ok? Prosseguindo…

Vamos a interface. Instala em seu form algo parecido com isso aqui:

<?
$publickey = "6LdVPgwA555AABkfsQ-gHkJFOpj7WGGFWnqfnaabc"; //repita novamente a sua Public Key
$privatekey = "6LdVPgw555AAAKDm4uuZyAhjZMwUN7qmEjhISabc"; // repita tambem a sua Private Key
?>
<-- Este script formata respectivamente: o tema visual será customizado, a linguagem deve ser portugues e que o nome do tema é 'recaptcha_widget'. Recomendo não alterar isto. -->
<script>
var RecaptchaOptions = {
   theme: 'custom',
   lang: 'pt',
   custom_theme_widget: 'recaptcha_widget'
};
</script>

<form action="recebe_form.php" method="post">

<div id="recaptcha_widget" style="display:none">

<!--Aqui é onde será gerada a imagem automaticamente pelo sistema (não precisa alterar)-->
<div id="recaptcha_image"></div>

<br>
<!-- Aqui o campo para o usuario digitar as letras (também não altere) -->            
<input type="text" id="recaptcha_response_field" onblur="verificaCaptcha()" name="recaptcha_response_field" />
&nbsp;
<!-- Link para o usuário trocar de imagem caso não consiga visualizá-la bem -->
<a href="javascript:Recaptcha.reload()">Trocar imagem</a>
</div>
<!-- Script de responsabilidade deles...(não precisa mexer) -->
<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=<?= $publickey ?>&lang=pt"></script>
<noscript>

<!-- Este iframe é o que faz você enxergar o resultado visual na sua pagina -->
<iframe src="http://api.recaptcha.net/noscript?k=<?= $publickey ?>&lang=pt" height="300" width="500" frameborder="0"></iframe><br />
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type='hidden' name='recaptcha_response_field' value='manual_challenge' />
</noscript>        
</form>

Bom, vamos ao segredo das chaves. A primeira chave “Public Key” é um protocolo entre seu site e os servidores do reCaptcha. É como os servidores identificarão que a solicitação do seu site realmente parte do seu site.
A segunda chave “Private Key” é a comunicação entre você e eles. Esta podemos deixar de lado pois será usada somente pelo arquivo que referenciamos no recebimento dos dados do form. Ah, não precisamos incluir esta referencia para o form.

Pronto! Você já tem condições de testar e brincar aplicando seus estilos, validações e demais formatações. Viu como foi simples? O que achou do reCaptcha? Comentem! ;)

Sem categoria

, , , , , , , , , ,

04/26/2010

30 Comentários