Introduction
Apparently, I am the last ASP.NET Web Forms developer in the whole World, which makes me kind of sad… anyway, after much crying, I decided to try out something: a comparison of Web Forms and MVC to solve a real life problem! Now, I only needed a problem to solve… Then, a colleague of mine came questioning me about captchas, so I thought, why not use it as my example? And here we are!
Everyone is familiar with captchas. They are a way to prevent the automated use of web forms, so as to make sure that it is indeed an human that is providing the information. There are lots of implementations out there, and I don’t claim that mine is better or worse, I just implemented it in a couple of hours as an exercise.
Core Library
I designed a couple of classes, framework-agnostic, to hold my abstractions and sample implementations. These are:
![Common]( "Common")
A succinct description is in order.
CaptchaSecretPersister
The contract for storing a secret key. Defines two methods, Store and Retrieve.
SessionCaptchaSecretPersister
An implementation of CaptchaSecretPersister that stores the secret key in the ASP.NET session.
CaptchaImageTransformer
The contract for transforming an image. Only has a single method, Transform.
NullCaptchaImageTransformer
Inherits from CaptchaImageTransformer, but doesn’t do anything.
CaptchaSecretGenerator
The contract for generating a new secret key (GetSecret).
RandomCaptchaSecretGenerator
An implementation of CaptchaSecretGenerator that generates a series of random letters.
CaptchaImageProducer
Base class for producing an image with a given secret key, dimensions, colors and an optional image transformer. Only has a single method, GetImage.
GdiCaptchaImageProducer
An implementation of CaptchaImageProducer that uses GDI+.
CaptchaSecretValidator
Base contract for secret key validation. Only defines a method, Validate.
CaseInsensitiveCaptchaSecretValidator
A case-insensitive string comparison implementation of CaptchaSecretValidator.
And here is their code:
publicabstractclass CaptchaSecretPersister
{publicabstractvoid Store(String secret);
publicabstract String Retrieve();
}
publicsealedclass SessionCaptchaSecretPersister : CaptchaSecretPersister
{publicstaticreadonly CaptchaSecretPersister Instance = new SessionCaptchaSecretPersister();
internalconst String Key = "Captcha";
publicoverridevoid Store(String secret)
{ HttpContext.Current.Session[Key] = secret;
}
publicoverride String Retrieve()
{return HttpContext.Current.Session[Key] as String;
}
}
publicabstractclass CaptchaImageTransformer
{publicabstractvoid Transform(Graphics g);
}
publicsealedclass NullCaptchaImageTransformer : CaptchaImageTransformer
{publicstaticreadonly CaptchaImageTransformer Instance = new NullCaptchaImageTransformer();
publicoverridevoid Transform(Graphics g)
{//do nothing
}
}
publicabstractclass CaptchaSecretGenerator
{publicabstract String GetSecret(UInt32 length);
}
publicsealedclass RandomCaptchaSecretGenerator : CaptchaSecretGenerator
{publicstaticreadonly CaptchaSecretGenerator Instance = new RandomCaptchaSecretGenerator();
publicoverride String GetSecret(UInt32 length)
{ var builder = new StringBuilder();
var rand = new Random();
for (var i = 0; i < length; i++)
{ var ch = (Char)('A' + rand.Next(26)); builder.Append(ch);
}
return builder.ToString();
}
}
publicabstractclass CaptchaImageProducer
{publicabstract Image GetImage(Int32 width, Int32 height, String secret, Color foreColor, Color backColor, CaptchaImageTransformer transformer);
}
publicsealedclass GdiCaptchaImageProducer : CaptchaImageProducer
{publicstaticreadonly CaptchaImageProducer Instance = new GdiCaptchaImageProducer();
publicoverride Image GetImage(Int32 width, Int32 height, String secret, Color foreColor, Color backColor, CaptchaImageTransformer transformer)
{ var img = new Bitmap(width, height, PixelFormat.Format32bppArgb);
using (var graphics = Graphics.FromImage(img))
using (var font = new Font(FontFamily.GenericSansSerif, 10F))
using (var color = new SolidBrush(foreColor))
{ graphics.TextRenderingHint = TextRenderingHint.AntiAlias;
graphics.Clear(backColor);
graphics.DrawString(secret, font, color, 0F, 0F);
if (transformer != null)
{ transformer.Transform(graphics);
}
return img;
}
}
}
publicabstractclass CaptchaSecretValidator
{publicabstract Boolean Validate(String storedSecret, String secret);
}
publicsealedclass CaseInsensitiveCaptchaSecretValidator : CaptchaSecretValidator
{publicstaticreadonly CaptchaSecretValidator Instance = new CaseInsensitiveCaptchaSecretValidator();
publicoverride Boolean Validate(String storedSecret, String secret)
{return String.Equals(storedSecret, secret, StringComparison.OrdinalIgnoreCase);
}
}
Noteworthy:
- Base classes are always abstract;
- Actual implementations are sealed, stateless, and therefore define a static read only field, to avoid multiple instantiations.
Both implementations, Web Forms and MVC, will use these classes.
Web Forms
So let’s start playing. Web Forms has the concept of validators. A validator must implement interface IValidator, and a BaseValidator class exists to make the task easier. When a form is submitted by a control that triggers validation, such as Button, all registered validators (Page.Validators) of the same validation group (ValidationGroup) as the trigger control are fired (Validate is called). The page will be considered valid if all validators have their IsValid property set to true. Knowing this, I created a custom control to display the captcha image and perform its validation:
publicsealedclass CaptchaImage : WebControl, IValidator
{public CaptchaImage() : base(HtmlTextWriterTag.Img)
{this.CaptchaSecretGenerator = RandomCaptchaSecretGenerator.Instance;
this.CaptchaImageTransformer = NullCaptchaImageTransformer.Instance;
this.CaptchaImageProducer = GdiCaptchaImageProducer.Instance;
this.CaptchaSecretPersister = SessionCaptchaSecretPersister.Instance;
this.CaptchaSecretValidator = CaseInsensitiveCaptchaSecretValidator.Instance;
this.CaptchaLength = 4;
this.CaptchaFormat = ImageFormat.Png;
this.ForeColor = Color.Black;
this.BackColor = Color.Transparent;
this.AlternateText = String.Empty;
this.ControlToSetError = String.Empty;
this.ControlToValidate = String.Empty;
(thisas IValidator).IsValid = true;
}
public CaptchaSecretPersister CaptchaSecretPersister { get; set; }
public CaptchaSecretGenerator CaptchaSecretGenerator { get; set; }
public CaptchaImageTransformer CaptchaImageTransformer { get; set; }
public CaptchaImageProducer CaptchaImageProducer { get; set; }
public CaptchaSecretValidator CaptchaSecretValidator { get; set; }
[DefaultValue("")]public String AlternateText { get; set; }
[DefaultValue(4)]
public UInt32 CaptchaLength { get; set; }
[DefaultValue(typeof(ImageFormat), "Png")]
public ImageFormat CaptchaFormat { get; set; }
[DefaultValue("")] [IDReferenceProperty]
[TypeConverter(typeof(ControlIDConverter))]
public String ControlToValidate { get; set; }
[DefaultValue("")] [IDReferenceProperty]
[TypeConverter(typeof(ControlIDConverter))]
public String ControlToSetError { get; set; }
[DefaultValue("")]public String ErrorMessage { get; set; }
publicevent EventHandler ValidationSuccess;
publicevent EventHandler ValidationFailure;
publicevent EventHandler ValidationComplete;
privatevoid OnValidationSuccess()
{ var handler = this.ValidationSuccess;
if (handler != null)
{ handler(this, EventArgs.Empty);
}
}
privatevoid OnValidationComplete()
{ var handler = this.ValidationComplete;
if (handler != null)
{ handler(this, EventArgs.Empty);
}
}
privatevoid OnValidationFailure()
{ var handler = this.ValidationFailure;
if (handler != null)
{ handler(this, EventArgs.Empty);
}
}
private ITextControl FindTextControl(String id)
{returnthis.NamingContainer.FindControl(id) as ITextControl;
}
protectedoverridevoid OnInit(EventArgs e)
{if (this.Enabled == true)
{this.Page.Validators.Add(this);
}
base.OnInit(e);
}
protectedoverridevoid Render(HtmlTextWriter writer)
{ var secret = this.CaptchaSecretGenerator.GetSecret(this.CaptchaLength);
this.CaptchaPersister.Store(secret);
using (var img = this.CaptchaImageProducer.GetImage((Int32)this.Width.Value, (Int32)this.Height.Value, secret, this.ForeColor, this.BackColor, this.CaptchaImageTransformer))
using (var stream = new MemoryStream())
{ img.Save(stream, this.CaptchaFormat);
this.Attributes[HtmlTextWriterAttribute.Src.ToString().ToLower()] = String.Format("data:image/{0};base64,{1}", this.CaptchaFormat.ToString().ToLower(), Convert.ToBase64String(stream.ToArray()));this.Attributes[HtmlTextWriterAttribute.Alt.ToString().ToLower()] = this.AlternateText;
}
base.Render(writer);
var val = thisas IValidator;
if (val.IsValid == false)
{ var errorControl = this.FindTextControl(this.ControlToSetError);
if (errorControl != null)
{ errorControl.Text = this.ErrorMessage;
}
else
{ writer.Write(this.ErrorMessage);
}
}
}
Boolean IValidator.IsValid { get; set; }
void IValidator.Validate()
{ var val = thisas IValidator;
val.IsValid = true;
var secretControl = this.FindTextControl(this.ControlToValidate);
if (secretControl != null)
{ var storedSecret = this.CaptchaSecretPersister.Retrieve();
val.IsValid = this.CaptchaSecretValidator.Validate(storedSecret, secretControl.Text);
if (val.IsValid == true)
{this.OnValidationSuccess();
}
else
{this.OnValidationFailure();
}
this.OnValidationComplete();
}
}
}
The CaptchaImage class inherits from WebControl, so that we can leverage some of its properties (ForeColor, BackColor), and defines a containing tag of IMG.
In its constructor, all relevant properties are instantiated to sensible defaults, these include a number of properties for the core library classes (CaptchaSecretPersister, CaptchaSecretGenerator, CaptchaImageProducer, CaptchaImageTransformer and CaptchaSecretValidator). Other important properties are:
The IsValid property, from IValidator, is implemented privately because most of the time we do not want to mess with it. Another inherited property, Enabled, can be used to turn off validation.
Then we have three events:
ValidationSuccess: raised when the validation occurs and is successful;
ValidationFailure: raised when a failed validation occurs;
ValidationComplete: always raised when a validation is performed, regardless of its outcome.
When the control loads, OnInit is called, and it registers itself with the Validators collection, this is a required step. In Render, it generates a secret key, stores it, produces an image from it and renders it as an inline image using the Data URI format. It is the same approach that I talked about a numberoftimes before. When the control receives a validation request, the Validate method is called, and the provided key is validated against the stored one.
A typical usage would be like this:
<web:CaptchaImage runat="server" ID="captcha" Width="50px" Height="25px" BackColor="Blue" AlternateText="Captcha riddle" ControlToValidate="text" ErrorMessage="Invalid captcha" OnValidationSuccess="OnSuccess" OnValidationFailure="OnFailure" OnValidationComplete="OnComplete" />
Whereas the registered event handlers might be:
protectedvoid OnSuccess(Object sender, EventArgs e)
{this.captcha.Visible = false;
}
protectedvoid OnFailure(Object sender, EventArgs e)
{}
protectedvoid OnComplete(Object sender, EventArgs e)
{}
Easy, don’t you think? Now, let’s move on to MVC!
MVC
In MVC we don’t really have controls, because of the separation of concerns and all that. The closest we have at the moment are extension methods, let’s have a look at the Captcha method:
publicstatic IHtmlString Captcha(this HtmlHelper html, Int32 width, Int32 height, UInt32 length = 4, String alternateText = "", ImageFormat captchaFormat = null, Color? foreColor = null, Color? backColor = null)
{ var captchaSecretGenerator = DependencyResolver.Current.GetService<CaptchaSecretGenerator>();
var captchaSecretPersister = DependencyResolver.Current.GetService<CaptchaSecretPersister>();
var captchaImageProducer = DependencyResolver.Current.GetService<CaptchaImageProducer>();
var captchaImageTransformer = DependencyResolver.Current.GetService<CaptchaImageTransformer>();
var secret = captchaSecretGenerator.GetSecret(length);
captchaSecretPersister.Store(secret);
using (var img = captchaImageProducer.GetImage(width, height, secret, foreColor ?? Color.Black, backColor ?? Color.Transparent, captchaImageTransformer))
using (var stream = new MemoryStream())
{ img.Save(stream, captchaFormat ?? ImageFormat.Png);
var tag = String.Format("<img src=\"data:image/{0};base64,{1}\" width=\"{1}\" height=\"{2}\" alt=\"{3}\"/>", (captchaFormat ?? ImageFormat.Png).ToString().ToLower(), Convert.ToBase64String(stream.ToArray()), width, height, alternateText);
returnnew HtmlString(tag);
}
}
It is unpractical to pass all components, so we are relying on MVC’s built-in dependency injection framework. I used Microsoft Unity as my Inversion of Control (IoC) container, and to make it integrate with MVC, I installed the Unity.MvcNuGet package:
![image]( "image")
Then I had to register the actual implementations for my services, this is usually done in the App_Start\UnityConfig.cs file’s RegisterTypes method:
container.RegisterInstance<CaptchaSecretGenerator>(RandomCaptchaSecretGenerator.Instance);
container.RegisterInstance<CaptchaImageProducer>(GdiCaptchaImageProducer.Instance);
container.RegisterInstance<CaptchaSecretPersister>(SessionCaptchaSecretPersister.Instance);
container.RegisterInstance<CaptchaImageTransformer>(NullCaptchaImageTransformer.Instance);
container.RegisterInstance<CaptchaSecretValidator>(CaseInsensitiveCaptchaSecretValidator.Instance);
The code from Unity.Mvc automatically hooks Unity with the DependencyResolver class, so we don’t have to do it ourselves. For an example implementation, I once wrote a post on it that you can check out, if you are curious.
Now, we need two things: a view and a controller. Let’s look at the view first (simplified):
@Html.Captcha(50, 25)
@using (Html.BeginForm("Validate", "Home")){ @Html.TextBox("secret")<button>Validate</button>
}
As you can see, the form will post to the Validate method of an HomeController. The output of the Captcha method doesn’t have to be inside the form, because it merely renders an IMG tag.
As for the controller, the Validate method is pretty straightforward:
public ActionResult Validate(String secret)
{ var captchaPersister = DependencyResolver.Current.GetService<CaptchaSecretPersister>();
var captchaSecretValidator = DependencyResolver.Current.GetService<CaptchaSecretValidator>();
var storedSecret = captchaPersister.Retrieve();
var isValid = captchaSecretValidator.Validate(storedSecret, secret);
if (isValid == true)
{ return this.View("Success"); }
else
{ return this.View("Failure"); }
}
It tries to obtain the services from the DependencyResolver, validates the supplied secret key and then returns the proper view, accordingly.
Conclusion
So, which implementation do you prefer? The Web Forms one, unsurprisingly, only needs a single class, CaptchaImage, and, of course, a host page; the assembly containing it can be referenced by other projects and used very easily. As for the MVC version, we need to have the Captcha extension method, the IoC bootstrapping/registration code, a view and a controller with a Validate method similar to the one presented. The extension method and the controller may come from another referenced assembly, it needs some work, but can definitely be done.
Of course, this is a sample implementation, things can be done in a myriad of alternative ways. I’d like to hear from you about the problems with this particular implementation, and alternative ways to do it. By the way, feel free to use and modify the code anyway you want to, I will soon make it available in my GitHub account.
