Bom, venho com esta matéria, demonstrar uma forma mais “simples” de se fazer uma imagem de verificação, mais conhecida como CAPTCHA.
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!!!";
}
}
}
<%@ 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>
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.
