Crear un CAPTCHA para .NET
Hola a todos, como el titulo lo dice; el día de hoy voy a mostrarles como añadir un captcha para nuestras aplicaciones en .NET.
¿Que es un CAPTCHA?
“Captcha o CAPTCHA son las siglas de Completely Automated Public Turing test to tell Computers and Humans Apart (prueba de Turing completamente automática y pública para diferenciar ordenadores de humanos).1 Este test es controlado por una máquina, en lugar de por un humano como en la prueba de Turing. Por ello, consiste en una prueba de Turing inversa.” WikipediaPara empezar con este pequeño tutorial voy a crear un nuevo proyecto, el cual va a ser realizado en Visual Studio 2013, voy a iniciar un Nuevo Proyecto > Visual C# > Web > Aplicación web ASP.NET
Se me abrirá una nueva ventana para escoger el tipo de proyeto web que deseo implementar, por el momento y ya que no voy a hacer nada mas, voy a escoger una plantilla de proyecto vacía (Empty).
Opcional
Para darle un toque “bonito” instale Bootstrap en el proyecto desde NuGet, el cual me coloca tres carpetas:- Content
- fonts
- Script
Formulario Captcha
Ahora si, para lo que estamos aquií; voy a crear un nuevo formulario que tendra por nombre frmCaptcha el cual lo utilizaré en un nuevo formulario al que le pondre frmRegistro donde se realizará la validación.A continuación les dejo el código que utilicé en frmCaptcha, cabe destacar que en este formulario no se realizó ninguna modificacion en el aspx.
Tambien comentar que hay algunas referencias adicionales que hay que añadir
- System.Drawing
- System.Drawing.Drawing2D
- System.Drawing.Imaging
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Captcha
{
public partial class frmCaptcha : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Bitmap objBitmap = new Bitmap(130, 80);
Graphics objGraphics = Graphics.FromImage(objBitmap);
objGraphics.Clear(Color.White);
Random objRandom = new Random();
objGraphics.DrawLine(Pens.Black, objRandom.Next(0, 50), objRandom.Next(10, 30), objRandom.Next(0, 200), objRandom.Next(0, 50));
objGraphics.DrawRectangle(Pens.Blue, objRandom.Next(0, 20), objRandom.Next(0, 20), objRandom.Next(50, 80), objRandom.Next(0, 20));
objGraphics.DrawLine(Pens.Blue, objRandom.Next(0, 20), objRandom.Next(10, 50), objRandom.Next(100, 200), objRandom.Next(0, 80));
Brush objBrush =
default(Brush);
//create background style
HatchStyle[] aHatchStyles = new HatchStyle[]
{
HatchStyle.BackwardDiagonal, HatchStyle.Cross, HatchStyle.DashedDownwardDiagonal, HatchStyle.DashedHorizontal, HatchStyle.DashedUpwardDiagonal, HatchStyle.DashedVertical,
HatchStyle.DiagonalBrick, HatchStyle.DiagonalCross, HatchStyle.Divot, HatchStyle.DottedDiamond, HatchStyle.DottedGrid, HatchStyle.ForwardDiagonal, HatchStyle.Horizontal,
HatchStyle.HorizontalBrick, HatchStyle.LargeCheckerBoard, HatchStyle.LargeConfetti, HatchStyle.LargeGrid, HatchStyle.LightDownwardDiagonal, HatchStyle.LightHorizontal
};
//create rectangular area
RectangleF oRectangleF = new RectangleF(0, 0, 300, 300);
objBrush = new HatchBrush(aHatchStyles[objRandom.Next(aHatchStyles.Length - 3)], Color.FromArgb((objRandom.Next(100, 255)), (objRandom.Next(100, 255)), (objRandom.Next(100, 255))), Color.White);
objGraphics.FillRectangle(objBrush, oRectangleF);
//Generate the image for captcha
string captchaText = string.Format("{0:X}", objRandom.Next(1000000, 9999999));
//add the captcha value in session
Session["CaptchaVerify"] = captchaText;
Font objFont = new Font("Consolas", 20, FontStyle.Bold);
//Draw the image for captcha
objGraphics.DrawString(captchaText, objFont, Brushes.Black, 20, 20);
objBitmap.Save(Response.OutputStream, ImageFormat.Gif);
}
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="frmRegistro.aspx.cs" Inherits="Captcha.frmRegistro" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Registro Usuario</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.css" rel="stylesheet" />
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
<form id="form1" runat="server" class="form-horizontal">
<div>
<fieldset>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><span class="fa fa-info-circle"></span> Formulario para registro de nuevo usuario</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label for="inputNombre" class="col-lg-2 control-label">Nombre</label>
<div class="col-lg-4">
<asp:TextBox ID="txtNombreUsuario" runat="server" CssClass="form-control"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label for="inputNombre" class="col-lg-2 control-label">E-mail</label>
<div class="col-lg-4">
<asp:TextBox ID="txtCorreoUsuario" runat="server" CssClass="form-control"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label for="inputNombre" class="col-lg-2 control-label">Usuario</label>
<div class="col-lg-4">
<asp:TextBox ID="txtLoginUsuario" runat="server" CssClass="form-control"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label for="inputNombre" class="col-lg-2 control-label">Password</label>
<div class="col-lg-4">
<asp:TextBox ID="txtPasswordUsuario" runat="server" TextMode="Password" CssClass="form-control"></asp:TextBox>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-4">
<asp:Image ID="Image1" runat="server" Height="55px" ImageUrl="~/frmCaptcha.aspx" Width="186px" />
</div>
</div>
<div class="form-group">
<label for="inputNombre" class="col-lg-2 control-label">Codigo Verificacion</label>
<div class="col-lg-4">
<asp:TextBox ID="txtVerificacionUsuario" runat="server" TextMode="Password" CssClass="form-control"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label for="inputNombre" class="col-lg-2 control-label input-sm text-danger" runat="server" id="mensajeAlerta"></label>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-4">
<asp:Button ID="btnRegistro" runat="server" Text="Registrarse" CssClass="btn btn-primary" OnClick="btnRegistro_Click" />
</div>
</div>
</div>
</div>
</fieldset>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Captcha
{
public partial class frmRegistro : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnRegistro_Click(object sender, EventArgs e)
{
//Verifico el Captcha
if (txtVerificacionUsuario.Text == Session["CaptchaVerify"].ToString())
{
//En el caso de que sea correcto se puede colocar el código aqui
//Se puede utilizar un Response.Redirect([url destino])
}
else
{
this.mensajeAlerta.InnerText = "Por favor ingrese el codigo de verificación";
}
}
}
}
Tambien quiero señalar que hay otros Captcha que están listos para usarse, uno de ellos el cual es muy completo es el Captcha de Google el cual tiene información muy detallada acerca de su uso y el cual lo trataré en un futuro.
Adicional a este existen otros como:
- TheCAPTCHA
- Securimage
- ReCAPTCHA
- JCAPTCHA
- 3DCaptcha
- ProtectWebForm.com
Para terminar nada mas acotar que este pequeño tuto fue tomado de http://programacion.net/articulo/como_crear_un_captcha_con_una_aplicacion_asp_net_1695 pero con un pequeño toque de mi autoría.
0 comentarios:
Publicar un comentario
Muchas gracias en cuanto terminemos de revisar el comentario se verá reflejado en el blog