Generating Captcha images – ASP.NET MVC

Wikipedia describes Captcha images as:

a type of challenge-response test used in computing as an attempt to ensure that the response is generated by a person

There are a few simple plug-ins that you can use in your ASP.NET MVC app, like reCaptcha, but to have a fully flexible and integrated solution, you have to create your own. In this article, we will define our implementation to handle Captcha images.

Start by creating an empty MVC 3 Internet application.

Go to the HomeController.vb class and add the following Action method.

HomeController.vb

GetCaptcha Action

Function GetCaptcha() As ActionResult
    'Captcha Image Size  Width - Height
    Dim width As Integer = 75
    Dim height As Integer = 20

    'Captcha String
    Dim fontFamily = "Tahoma"
    ' -  Generate Random
    Dim randomsize As Integer = 5
    Dim randomstringbuilder As New StringBuilder()
    Dim random As New Random(DateTime.Now.Millisecond)
    Dim ch As Char
    For i As Integer = 0 To randomsize - 1
        ch = Convert.ToChar(Convert.ToInt32(Math.Floor(26 * random.NextDouble() + 65)))
        randomstringbuilder.Append(ch)
    Next
    Dim captchaString = randomstringbuilder.ToString

    ' Create a new 32-bit bitmap image.
    Dim bitmap As New Drawing.Bitmap(width, height, _
        Drawing.Imaging.PixelFormat.Format32bppArgb)

    ' Create a graphics object for drawing.
    Dim g As Drawing.Graphics = Drawing.Graphics.FromImage(bitmap)
    g.SmoothingMode = Drawing.Drawing2D.SmoothingMode.AntiAlias
    Dim rect As New Drawing.Rectangle(0, 0, width, height)

    ' Fill in the background.
    Dim hatchBrush As New Drawing.Drawing2D.HatchBrush(_
      Drawing.Drawing2D.HatchStyle.Wave, _
      Drawing.Color.LightGray, Drawing.Color.White)
    g.FillRectangle(hatchBrush, rect)

    ' Set up the text font.
    Dim size As Drawing.SizeF
    Dim fontSize As Single = rect.Height + 1
    Dim font As Drawing.Font
    Dim format As New Drawing.StringFormat()
    format.Alignment = Drawing.StringAlignment.Center
    format.LineAlignment = Drawing.StringAlignment.Center

    ' Adjust the font size until the text fits within the image.
    Do
        fontSize -= 1
        font = New Drawing.Font(fontFamily, fontSize, Drawing.FontStyle.Bold)
        size = g.MeasureString(captchaString, font, _
               New Drawing.SizeF(width, height), format)
    Loop While size.Width > rect.Width

    ' Create a path using the text and warp it randomly.
    Dim path As New Drawing.Drawing2D.GraphicsPath()
    path.AddString(captchaString, font.FontFamily, _
         CInt(font.Style), font.Size, rect, format)
    Dim v As Single = 4.0F
    Dim points As Drawing.PointF() = {New Drawing.PointF(random.[Next](rect.Width) / v, _
       random.[Next](rect.Height) / v), New Drawing.PointF(rect.Width - _
       random.[Next](rect.Width) / v, random.[Next](rect.Height) / v), _
       New Drawing.PointF(random.[Next](rect.Width) / v, _
       rect.Height - random.[Next](rect.Height) / v), _
       New Drawing.PointF(rect.Width - random.[Next](rect.Width) / v, _
       rect.Height - random.[Next](rect.Height) / v)}
    Dim matrix As New Drawing.Drawing2D.Matrix()
    matrix.Translate(0.0F, 0.0F)
    path.Warp(points, rect, matrix, Drawing.Drawing2D.WarpMode.Perspective, 0.0F)

    ' Draw the text.
    hatchBrush = New Drawing.Drawing2D.HatchBrush(_
      Drawing.Drawing2D.HatchStyle.DashedUpwardDiagonal, _
      Drawing.Color.DarkGray, Drawing.Color.Black)
    g.FillPath(hatchBrush, path)

    ' Add some random noise.
    Dim m As Integer = Math.Max(rect.Width, rect.Height)
    For i As Integer = 0 To CInt(Math.Truncate(rect.Width * rect.Height / 30.0F)) - 1
        Dim x As Integer = random.[Next](rect.Width)
        Dim y As Integer = random.[Next](rect.Height)
        Dim w As Integer = random.[Next](m \ 50)
        Dim h As Integer = random.[Next](m \ 50)
        g.FillEllipse(hatchBrush, x, y, w, h)
    Next

    ' Clean up.
    font.Dispose()
    hatchBrush.Dispose()
    g.Dispose()

    Dim captchaImageResult As FileContentResult = Nothing
    Using mystream As New System.IO.MemoryStream()

        bitmap.Save(mystream, System.Drawing.Imaging.ImageFormat.Jpeg)
        captchaImageResult = MyBase.File(mystream.GetBuffer, "image/jpeg")

    End Using
    bitmap.Dispose()

    'Save the Captcha Hash in the Session
    Session("botdeflector") = _
      Convert.ToBase64String(System.Security.Cryptography.MD5.Create().
      ComputeHash(Encoding.UTF8.GetBytes(captchaString)))

    'Return the Captcha Image
    Return captchaImageResult

End Function

What is mostly happening here is the generation of the image, pasting in the text that you want for the Captcha image, adding some noise, and in the end, we save the hash for the generated text. This is what we will use later to verify that the user submitted the correct string of text. The most important part is saving the hash to the session state.

Change the index page a little, adding a new form, an image tag with its source set as the captcha image, and a submit button.

Index.vbhtml

@Code
    ViewData("Title") = "Home Page"
End Code
<h2>@ViewData("Message")</h2>

@Using Html.BeginForm

    @<div>
        <img src='@Url.Action("GetCaptcha")' alt='Captcha' />
        <input type="text" size="10" 
           name="CaptchaAnswer" autocomplete="off" />
        <br />
        <input type="submit" value="Submit"/>
    </div>

End Using

Add a new POST only index Action method.

HomeController.vb

Index Action (POST)

<HttpPost()>
Function index(CaptchaAnswer As String) As ActionResult

    Dim captchaHash = Session("botdeflector")

    If captchaHash = Convert.ToBase64String(_
       System.Security.Cryptography.MD5.Create().ComputeHash(_
       Encoding.UTF8.GetBytes(UCase(CaptchaAnswer)))) Then

        'Valid
        ViewData("Message") = "YOU ARE A PERSON :>"

    Else
        'Invalid
        ViewData("Message") = "YOU ARE A ROBOT!"

    End If

    Return View()

End Function

The validation begins with converting the Captcha answer the user supplied to its hash equivalent, then we get our saved hash from the current user session, compare them, and return the result.

Here is the complete project if you want it. And you can also use the following helper functions for random generation of strings or numbers:

Generate Random Number Function

Private Function generateRandomNumber(ByVal size As Integer) As String

    Dim builder As New StringBuilder()
    Dim random As New Random(DateTime.Now.Millisecond)
    Dim ch As Char
    For i As Integer = 0 To size - 1
        ch = random.Next(9).ToString
        builder.Append(ch)
    Next
    Return builder.ToString()

End Function

Generate Random String Function

Private Function generateRandomString(ByVal size As Integer) As String

    Dim builder As New StringBuilder()
    Dim random As New Random(DateTime.Now.Millisecond)
    Dim ch As Char
    For i As Integer = 0 To size - 1
        ch = Convert.ToChar(Convert.ToInt32(Math.Floor(26 * random.NextDouble() + 65)))
        builder.Append(ch)
    Next
    Return builder.ToString()

End Function

Screenshot of Demo Site