Olá amigos do Preciso Estudar Sempre. Hoje, iremos falar sobre captcha mas, você sabe o que é uma captcha ?
Captcha (Completely Automated Public Turing test to tell Computers and Humans Apart) é um teste de desafio cognitivo para diferenciar homens de máquinas. Isto é usado no combate a bots de sistemas. O teste consiste em uma imagem com letras e números distorcidas em que, o usuário do sistema deve dar seu melhor palpite sobre a imagem. Existem algumas implementações de captcha que disponibilizam a opção de emissão de sons para que, o usuário escreva o que ouviu ou até, a escolha de imagens de acordo com um padrão.
Para que você possa ter seu próprio captcha é bem fácil. O google disponibiliza uma API a qual, é muito simples de usar e o resultado final fica bastante legal.
Se você me perguntasse em qual linguagem eu prefiro implementar o captcha, eu te responderia que prefiro no PHP, sem sobras de dúvidas. Essa escolha acontece pelo fato que é muito mais fácil do que fazer com Java e o PHP possui suporte nativo a JSON o que, torna-o muito atrativo para tal tarefa.
captcha.html
<!DOCTYPE html>
<html>
<head>
<title>Google recapcha demo - Preciso Estudar Semprelt;/title>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<h1>Google reCAPTHA Demo</h1>
<form id="comment_form" action="" method="post">
<input type="email" placeholder="Type your email" size="40"><br><br>
<textarea name="comment" rows="8" cols="39"></textarea><br><br>
<input type="submit" name="submit" value="Post comment"><br><br>
<div class="g-recaptcha" data-sitekey="sua-chave-aqui"></div>
</form>
</body>
</html>
Você deve ter notado algumas coisas no código. A importação da biblioteca api.js é necessária visto que, ela é a responsável pela criação da captcha e de todos os seus controles. Note também que eu criei uma div com o atributo class preenchido com o valor g-recaptcha. Isto também é necessário pois, é com o atributo class que a API do google irá localizar a div para inserir a captcha. Por último, você também notou o atributo data-sitekey na div. Esse atributo segue a especificação do HTML 5 de criação dinâmica de atributos, ou seja, eu posso criar qualquer atributo em uma tag de forma dinâmica simplesmente iniciando seu nome com a palavra "data-". A partir daí, eu posso trabalhar como se fosse um atributo comum.
Neste atributo (data-sitekey) é definido a chave pública para o captcha.
Chaaave pública ????
Sim, chave pública. A API do google funciona dessa forma. Você cadastra seu domínio no google developer e recebe uma chave pública e outra secreta. Essas chaves são usadas para você fazer a checagem se o que o usuário digitou condiz com a imagem.
Para cadastrar seu domínio e conseguir suas chaves, clique aqui.
Com suas chaves em mão, preencha o atributo data-sitekey com sua chave pública. É possível também gerar o captcha via codificação javascript mas, não utilizaremos essa abordagem. Caso você queira mais exemplos, clique aqui para ver a documentação da Google. Via codificação é possível customizar certos elementos da captcha como: definir função de callback após o preenchimento, definir função caso a captcha expire, realizar internacionalização, mudanças de temas, definição de tipo da captcha (audio ou vídeo) e etc.
Vamos realizar agora a implementação server-side que precisamos. Caso você não tenha nenhuma experiência com PHP, dê uma olhada nesse post em que realizamos uma iniciação no assunto.
Crie o arquivo Form.php.
<?php
$email;
$comment;
$captcha;
if(isset($_POST['email'])){
$email=$_POST['email'];
}if(isset($_POST['comment'])){
$email=$_POST['comment'];
}if(isset($_POST['g-recaptcha-response'])){
$captcha=$_POST['g-recaptcha-response'];
}
if(!$captcha){
echo '<h2>Please check the the captcha form.</h2>';
exit;
}
$response=json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=sua_chave_secreta_aqui&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']));
if($response->success==false){
echo '<h2>Você é um spammer ! Zarpa daqui !!!</h2>';
} else {
echo '<h2>Obrigado pelo comentário.</h2>';
}
?>
Algumas observações sobre o código acima:
- O parâmetro g-recaptcha-response representa o que foi respondido pelo usuário.
- Realizamos um acesso à url https://www.google.com/recaptcha/api/siteverify para verificar se o que foi escrito pelo usuário condiz com o apresentado. Passamos como parâmetros a nossa chave secreta, o que foi respondido pelo usuário e o nosso ip. O nosso ip tem de ser enviado para realizar a validação se o acesso está sendo feito via localhost ou pelo domínio. Acessos via localhost são permitidos afim de testes.
- A função json_decode é utilizada porque o que é retornado pelo acesso à url é um objeto JSON. Este objeto possui dois atributos: success e error-codes. Para mais informações, clique aqui.
IMPORTANTE: Testes feitos em ambiente de localhost sempre irão resultar em sucesso pois, não existe como você ser um spammer.
Pronto, nossa implementação de PHP + Captcha está pronta. Agora, é só usar !!
Para baixar o projeto pronto, clique aqui.
Sugestões ?! Críticas ?! Elogios ?!
Deixe aí nos comentários ou na nossa página do facebook.
Referências:
CAPTCHA - http://pt.wikipedia.org/wiki/CAPTCHA
Google Captcha - https://www.google.com/recaptcha/intro/index.html
Um primeiro contato: PHP - http://precisoestudarsempre.blogspot.com.br/2015/03/um-primeiro-contato-php.html
Documentação da API Captcha - https://developers.google.com/recaptcha/docs/display
Google reCAPTCHA tutorial - http://codeforgeek.com/2014/12/google-recaptcha-tutorial/
Google reCAPTCHA tutorial - http://codeforgeek.com/2014/12/google-recaptcha-tutorial/
Nenhum comentário:
Postar um comentário