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.
Bom, venho com esta matéria, demonstrar uma forma mais “simples” de se fazer uma imagem de verificação, mais conhecida como CAPTCHA.
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:
Um controle Image, um TextBox, um Button e uma Label. Agora uma visualização da tela complilada:
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:
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.
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!!!";
}
}
}
Listagem 1. Código .cs da página 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" />
<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>
Listagem 2. aspx do Default.aspx
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.
Se a pessoa digitou o número correto, é mostrada uma mensagem de confirmação na label.
Agora se a pessoa digitar um número que não corresponde ao da imagem, é mostrada uma mensagem solicitando o número correto.
Artigos relacionados
-
Artigo
-
Artigo
-
Artigo
-
Artigo
-
Artigo