Como criar um CAPTCHA (para ASP e PHP)

Atualizado em 19 de Agosto de 2008
A pedidos, o Simple Captcha tem agora nova versão, a 1.2. Dentre as novidades, agora as imagens estão mais difíceis de decifrar e o formulário permite envio de e-mail! BAIXE AGORA MESMO NO LINK DESTE POST.

Atualizado em 28 de Maio de 2008
Pronto, a versão do CAPTCHA em PHP está criada e testada, usem e abusem. O link está no final deste post na seção “Downloads”. Lembrem-se de deixar algum comentário sobre a experiência com quaisquer versões que usarem.

 

Atenção: POST TÉCNICO
Se você não trabalha com desenvolvimento este post não será entendido por você.

Se você já fez um cadastro na internet concerteza já teve que preencher um código composto por uma mistura de letras e números embaralhados bem chato de ler, como este:

Pois bem, isto se chama CAPTCHA. Muitos formulários na internet hoje em dia são preenchidos por computadores spammers, pessoas que ”extremamente ocupadas” elaboram um mecanismo para, por exemplo, preencher o seu formulário de contato de forma descontrolada com propagandas e outras porcarias, e tudo é feito automaticamente. Se o formulário inserir dados em um banco de dados, então têm-se um banco ocupando espaço com lixo, ou até pior: vírus. E é incrível como esse tipo de coisa acontece com frequência. Se eu disponibilizar um form na internet que remete para meu e-mail, pronto! é questão de minutos pra uma enxurrada de tranqueira chegar na minha caixa de entrada. 

O CAPTCHA praticamente não permite que esse problema aconteça, dependendo da complexidade do código ou da forma como ele é implementado, os spammers são capazes de burlá-los rapidinho.

Bom, em resumo, eu pensei esses dias: por que não criar o meu próprio CAPTCHA? Algo simples, pra que a idéia seja entendida. Eu estava lendo o post “CAPTCHA de pobre” do Aurélio há um tempo atrás, e decidi fazer o meu baseado no modelo do dele, que segundo ele mesmo, foi a maneira que realmente barrou os spams após várias insistentes tentativas. Se ainda te restam dúvidas sobre o que é spam, vamos à própria definição do Aurélio:

Um SPAM é um recado oportunista e indesejado, geralmente uma propaganda comercial ou links para sites pornográficos. Como se isso já não fosse irritante o suficiente, geralmente são programas que enviam estes recados automaticamente, então não adianta simplesmente apagar que ele vai ser enviado novamente. Alguns enviam diariamente esse lixo para o seu site, imagine o tamanho da dor de cabeça.
 

1º Passo: o que não pode ter num CAPTCHA

Vou explicar usando a versão para ASP, mas em PHP o esquema é o mesmo.

Para que um CAPTCHA seja realmente eficiente, em primeiro lugar deve-se pensar o que NÃO pode ter nele. E a primeira coisa é: o código que a imagem mostra embutido no código-fonte!

Em hipótese alguma pense em colocar o código/palavra/número que a imagem está mostrando em seu código como por exemplo num campo de texto tipo “hidden”. Isso é facilmente encontrado pelos programas de spam.

A segunda coisa é uma imagem mostrando algo completamente dedutível e fácil de ler como: “111″, “222″ ou mesmo: “ABC” ou “OI”, “VOCE”, etc. Spammers também lêem o que tem na tela.

Ainda segundo o próprio Aurélio, cores ou números digitados na tela para serem ”colados” no campo de texto também não funcionam.

2º Passo: elaborando como vai ser o código da imagem

Números. Este CAPTCHA que estamos elaborando não tem a garantia de ser completamente seguro, mas vamos seguir (a nível de experiência) o modelo que deu certo para o Aurélio (os quatro números completamente sem ordem lógica ou significado para estranhos) como os últimos dígitos do meu antigo celular, ou da casa em que morei, ou parte do meu RG e CPF.

Eu criei 20 imagens:

3º Passo: o esquema

Criei um diretório imagens na raiz do meu site, e joguei todas as imagens acima lá. Para facilitar, as imagens têm nomes simples como: 1.jpg, 2.jpg, 3.jpg…

Cria-se então uma página chamada “captcha.asp”,  que ficará um nível acima do diretório imagens. A “captcha.asp” vai chamar as imagens de “imagens”, entendeu né?

Agora dentro de captcha.asp cria-se em primeiro lugar o formulário, ele vai submeter para a própria página “captcha.asp” neste exemplo só para facilitar:

<!– até aqui tudo ok, um formulário submetendo para a mesma página –>
<form action=”captcha.asp” method=”post”>
<label for=”codigo”>Digite o código ao lado:</label>
<!– o campo que receberá o código –>
<input type=”text” name=”codigo” size=”4″ maxlength=”4″ />
<!– aqui estou chamando as imagens dinamicamente, na função ASP de logo mais adiante –>
<img src=”imagens/<%= nome_imagem_gerada %>.jpg” alt=”">
<br/>
<!– um campo oculto que precisarei para informar ao ASP qual o nome da imagem gerada –>
<input type=”hidden” value=”<%= nome_imagem_gerada %>” name=”imagem” />
<!– um campo oculto que me dirá se o form está sendo submetido ou nao, já que está na mesma página–>
<input type=”hidden” value=”sim” name=”enviando” />
<input type=”submit” value=”enviar” />

Logo acima do formulário, implementei o seguinte código ASP:

<%
‘aqui eu verifico se o caso é: o form está sendo enviado
if request.form(“enviando”) = “sim” then
 ’se está sendo enviado, eu apanho o código que o usuário inseriu e o nome da imagem que foi gerada lá no form.
 codigo = request.form(“codigo”)
 imagem = request.form(“imagem”)
 
 ’um case verifica se a imagem foi 1.jpg, então ela tem o código “0266″, se foi 2.jpg então o código dela é “9032″ e assim por diante…

 select case imagem

 case 1
 cod = “0266″
 case 2
 cod = “9032″
 case 3
 cod = “5610″
 case 4
 cod = “1277″
 case 5
 cod = “0501″
 case 6
 cod = “7090″
 case 7
 cod = “2111″
 case 8
 cod = “9831″
 case 9
 cod = “0003″
 case 10
 cod = “1012″
 case 11
 cod = “5123″
 case 12
 cod = “2299″
 case 13
 cod = “6974″
 case 14
 cod = “4415″
 case 15
 cod = “7618″
 case 16
 cod = “8870″
 case 17
 cod = “1610″
 case 18
 cod = “0102″
 case 19
 cod = “6048″
 case 20
 cod = “5599″

 end select

‘ se o código digitado pelo usuário bater com os códigos que defini para cada imagem… voilá!
 if cod = codigo then
  response.write “<span style=’color:green’>Parabéns! Código correto.</span>”
 else
‘ se o código digitado pelo usuário NÃO bater com os códigos que defini para cada imagem… Código errado!
 response.write “<span style=’color:red’>Ops! Código incorreto.</span>”
 end if
 response.write “<br/><input type=’submit’ value=’voltar’ onclick=’javascript:history.back();’ />”
 response.end

‘ se o form não estiver sendo enviado, então a função “randomiza()” gera números randômicos de 1 a 20 e o número que for a bola da vez vai virar nome de uma imagem, tipo:  numero.jpg
else

 function randomiza()
 dim RndTemp
 Randomize
 RndTemp = Rnd * 19 + 1
 RndTemp= Int(RndTemp)
 randomiza = RndTemp
 end function

 nome_imagem_gerada = randomiza()

end if
%>

4ª Passo:  o desafio

Desafio você a testar a eficiência deste CAPTCHA em seu site/blog. Por que não experimenta em seu formulário de contato por exemplo? Observe bem sua caixa de entrada ou lixeira, está entrando spams ou o troço foi eficiente?

Conte-me aqui os resultados.

 

Observações

1. Quanto mais você proteger o diretório imagens melhor para não ter suas imagens rastreadas por programas ou indivíduos maliciosos.

2. É importante tentar criptografar partes do seu código, principalmente os que se referem aos nomes das imagens.

Download

Este post ficou enorme, mas foi preciso, então se você quiser a coisa toda mastigada fique à vontade para baixar o pacote completo do mais novo “Simple Captcha”:

• Baixar o Simple Captcha 1.2 (versão ASP) – 71KB  | 
• Baixar o Simple Captcha 1.2 (versão PHP) – 117KB  | 

Você usou? gostou? tem dúvidas, críticas, reclamações, sugestões? Deixe seu comentário neste post.