Olá! Monday, 09 de December de 2024.



Dicas CódigoFonte.net
Thursday, 04 de October de 2007

Imagem de Segurança - CAPTCHA

Bom, venho com esta matéria, demonstrar uma forma mais “simples” de se fazer uma imagem de verificação, mais conhecida como CAPTCHA, para quem não sabe o que é uma, eu vou dar um resumo rápido, mas para maiores detalhes clique aqui.

CAPTCHA = Técnica para reconhecer se quem está utilizando, em nosso caso o nosso formulário, é um ser humano ou um script ou sistema. O funcionamento é simples para nós humanos, pois basta ler e escrever o que está escrito na imagem, agora imagine um algoritmo que leia o que está escrito... ai dificulta bem mais... estes scripts são usados por hacker’s para tentar descobrir uma senha por exemplo, ele geralmente gera um script que faz diversas tentativas de senhas até acertar uma, mas agora imagine se ele tiver que digitar o que está escrito na imagem em cada tentativa, isso já limitaria e muito a quantidade de tentativas, pois se torna um trabalho manual... outra utilização seria um anti-spam, onde você envia um e-mail para uma outra conta de e-mail com o anti-spam ativado, e você recebe uma mensagem onde tem que digitar o que está escrito na imagem para que sua mensagem seja enviada de fato para o usuário destino, neste caso, se fosse um programa de envio de spam, ele não teria a capacidade de receber este e-mail de confirmação e “digitar” a seqüência escrita na imagem. Este é um resumo simples e direto, recomendo procurar mais a fundo.

Vamos escovar bit’s agora!

Pensei simples, o projeto consiste em apenas duas páginas, sendo uma apenas para gerar a imagem e guardar o valor em uma variável de sessão (Session[“variavel”]), e uma outra para mostrar a imagem gerada com um campo de entrada de texto (TextBox), e um botão para enviar o formulário para o servidor. Segue os modelos.

Segue como vai ficar a tela:

Clique para ver a imagem em seu tamanho real
img1

Um controle Image, um TextBox, um Button e uma Label.

Agora uma visualização da tela complilada.

Clique para ver a imagem em seu tamanho real
img2

Como podem ver foi gerada um imagem com números, que também estão gravados em uma variável de sessão.

A Solution:

Clique para ver a imagem em seu tamanho real
img3

Com pode ser observado, eu criei duas páginas, uma Chamada Default.aspx, que é a página responsável pela verificação do código da imagem, e uma outra página que gera a imagem e guarda o valor em uma sessão.

Aqui segue o código .cs da página Default.aspx.

using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { //condição para verirficar se o que foi digitado //é realmente o que esta guardado na variável de Sessão if (Page.IsValid && (TextBox1.Text.ToString() == Session["randomStr"].ToString())) { lblMsg.Text = "Entrou! "; //Aqui é onde vc colocaria o script caso a pessoa //tenha escrito o número corretamente ao da imagem. } else { //Aqui entra quando o número digitado não confere com o da imagem lblMsg.Text = "Digite o número correto!!!"; } } }

Agora o aspx do Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> Untitled Page


A outra página ( GeraImagemLoka.aspx ), não tem nada no aspx, apenas no CS, segue:

using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; //Imports necessários para trabalhar com imagens using System.Drawing; using System.Drawing.Imaging; using System.Drawing.Text; public partial class GeraImagemLoka : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Bitmap objBMP = new System.Drawing.Bitmap(80, 20); Graphics objGraphics = System.Drawing.Graphics.FromImage(objBMP); //Aqui você muda o fundo da imagem objGraphics.Clear(Color.BurlyWood); objGraphics.TextRenderingHint = TextRenderingHint.SystemDefault; //Configuração da fonte dos números (Font/Tamanho/Style) Font objFont = new Font("Lucida Sans", 12, FontStyle.Italic); string randomStr = ""; //Aqui vai a quantidade de números a ser gerado (neste caso são 7) int[] myIntArray = new int[7]; //____________________###--> :: Atenção :: <--### // // Se alterar esta quantidade de númeoros do array não esquecer de alterar // também na função For que está logo abaixo!!!! Onde no nosso caso é o 7. // //_______________________________________________ Random autoRand = new Random(); //Aqui é gerado o número e adicionado no array //Gero um número randonicamente, de 0 a 9 e concateno. //Este vai ser o número gravado na imagem e na sessão. for (int x = 0; x < 7; x++) /* <-- aqui tem que ter a mesma quantidade do myIntArray[] */ { myIntArray[x] = System.Convert.ToInt32(autoRand.Next(0, 9)); randomStr += (myIntArray[x].ToString()); } //Aqui é passado o número gerado para a sessão, para depois //no formulário ser feita a comparação Session.Add("randomStr", randomStr); //Aqui é onde se escreve o número na imagem gerada e a cria de fato. objGraphics.DrawString(randomStr, objFont, Brushes.OliveDrab, 3, 3); Response.ContentType = "image/GIF"; objBMP.Save(Response.OutputStream, ImageFormat.Gif); //Libero os objetos. objFont.Dispose(); objGraphics.Dispose(); objBMP.Dispose(); } }

Aqui segue alguns dos resultados esperados.

Clique para ver a imagem em seu tamanho real
img4

Se a pessoa digitou o número correto, é mostrada uma mensagem de confirmação na label (img4).

Clique para ver a imagem em seu tamanho real
img5

Agora se a pessoa digitar um número que não corresponde ao da imagem, é mostrada uma mensagem solicitando o número correto (img5).

Coloquei os fonts para download logo acima, foi feito em asp.net 2.0.

Tomara que tenha utilidade!
Qualquer dúvida? [email protected]

Valew`s
[]`s

Benjamim Marcos de Castro Junior

Sou estudante de Engenharia da Computação (7° semestre), trabalho como analista desenvolvedor atualmente na empresa BM&F, tenho 5 anos na área de desenvolvimento (windows/web), tenho conhecimentos em VB6,ASP,ASP.NET (C#,VB.NET),Java,Sql2000/2005,SyBase,MySql e Oracle .Em breve o meu site estará no ar www.benjamim.net. Entrem em contato atravéz do e-mail [email protected].

Conheça nosso parceiro:


Comentários do artigo [Novo comentário]

Nenhum comentário, seja o primeiro a comentar.
Para adicionar um comentário você deve efetuar o login


Gostou do CódigoFonte.net? Quer indicar a um amigo?
Preencha os campos a seguir.
Seu Nome:
Seu E-mail:
E-mail de seu Amigo:


CodigoFonte.net » Meu Mural » Competiva - Criação de Sites » Todos os Direitos Reservados © 2002/2010