Implementing basic Captcha in ASP.NET 5 MVC 6

Long back I wrote some posts about implementing captcha in ASP.NET MVC. This post is about implementing captcha in ASP.NET5 MVC 6.

How it works – while loading the page, captcha tag helper displays an image, and set a hidden field in the page with an encrypted value. Once users submits the page, this encrypted value validates against the captcha user input. If it is same the entry is accepted otherwise it show the error. For this post I am using very basic Base64 encryption.

ASP.NET5 doesn’t have any nuget packages which supports drawing, so you may need to use the .NET System.Drawing namespace. First you need to include the System.Drawing namespace in the project.json framework assemblies list.

"frameworks": {
  "dnx451": {
    "frameworkAssemblies": {
        "System.ServiceModel": "4.0.0.0",
        "System.Drawing": "4.0.0.0"
    }
  }
}

Instead of returning the image as Image content type, I am using HTML5 image data feature, converting the image to a Base64 string, and setting it to the src attribute of the image.

bitmap.Save(memoryStream, ImageFormat.Jpeg);
byte[] imageBytes = memoryStream.ToArray();
string base64String = Convert.ToBase64String(imageBytes);
output.Attributes["src"] = "data:image/png;base64," + base64String;

You can use the Tag Helper like this.

<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10" />
    <div>
        <img asp-captcha="true" class="img-thumbnail"/>            
    </div>
    </div>
</div>

Captcha in ASP.NET 5

To validate, I am using the Request.Form collection to get the hidden field value.

var captchaImage = Context.Request.Form["__captcha_image"];
var encryptedString = 
Convert.ToBase64String(UTF32Encoding.Unicode.GetBytes(user.Captcha));
if (captchaImage != encryptedString)
{
    ModelState.AddModelError("", "Captcha is not matching.");
    return View("SignUp");
}

You can find the full source code of CaptchaTagHelper on GitHub

Happy Programming