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.

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:

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" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Image ID="la" height="30" runat="server" src="GeraImagemLoka.aspx" style="width: 154px" />
        

        <asp:TextBox ID="TextBox1" Visible="true" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Visible="true" OnClick="Button1_Click" Text="Button" />

        <asp:Label ID="lblMsg" runat="server"></asp:Label>

        

        

     </div>
    </form>
</body>
</html>

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.

img4

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

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? benjamim@benjamim.net

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 benjamim@benjamim.net.

Conheça nosso parceiro:

Enviar um Artigo

Enviado por: Emmanuel

Outros artigos

Assine o Feed desta categoria

Debugando aplicações web no Visual Studio 2005 com firefox - 23/09/2007
Server.Transfer ou Response.Redirect - 14/09/2007
Remover som no evento KeyDown - 30/07/2007
Usando Interfaces no .NET - 26/07/2007
Ver mais...

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

» Procurando iPhones?
... e que tal iPods?

Melhor Visualizado com
800x600 de Resolução

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:

Login:
Senha: