Imagem de Segurança - CAPTCHA

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (7)  (1)

Bom, venho com esta matéria, demonstrar uma forma mais “simples” de se fazer uma imagem de verificação, mais conhecida como 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 ver no link (http://www.microsoft.com/brasil/msdn/Tecnologias/aspnet/Spoofing.mspx  ).

 

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:

 

tela.JPGimg1

 

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

 

Agora uma visualização da tela complilada.

 

inicial.JPGimg2

 

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:

 

solution.JPGimg3

 

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" width: 154px" />
        <br />
        <asp:TextBox ID="TextBox1" Visible="true" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Visible="true" OnClick="Button1_Click" Text="Button" /><br />
        <asp:Label ID="lblMsg" runat="server"></asp:Label><br />
        <br />
        <br />
     </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.

 

acerto.JPGimg4

 

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

 


 

erro.JPGimg5

 

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

 

 

 

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?