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 www.google.com%2Frecaptcha%2Fadmin%2Flist&followup=https%3A%2F%2Fwww.google.com%2Frecaptcha%2Fadmin%2Flist">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" />
<!-- 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
