Captcha control distinguishes between the humans vs the robots. Most of the high traffic websites utilizes the Captcha to limit the spammers from posting on their website. In this article we will demonstrate how to create an Image Captcha HtmlHelper in ASP.NET MVC Framework.

Recommended Reading:

We have published several articles on HighOnCoding which talks about Captcha control. It is recommended that you check out the following articles:

1) Creating the CAPTCHA Functionality
2) Creating a Simple Image Less Captcha Control Using ASP.NET MVC Framework

Creating HtmlHelper:

The Captcha control will be exposed on the web page by using HtmlHelper. If you are unfamiliar with HtmlHelper then check out this article and this video. Our HtmlHelper will return an Image tag and a hidden field which will keep track of the generated captcha image. Here is the bare bones of the Captcha method.



Don't worry about the CaptchaService code right now we are going to tackle it later. The returned image tag points to the "CaptchaHandler.axd" generic HttpHandler. The HttpHandler is responsible for displaying the image on the page. In the next section we are going to implement the CaptchaService which is responsible for creating the random captcha image.

Implementing the Captcha Service:

CaptchaService class handles the creation of the captcha image. The captcha image is created using random text and then adding noise to the image to make it harder for the bots to read. Once the image is generated it is kept in the Cache to be reused for a different user. The GetCaptchaImage method is shown below:

  
     
The GetCaptchaImage method returns the CaptchaItem instance which contains the information about the generated image. The GetRandomText method generates a random text. The implementation is shown below:



The random text is passed to the GenerateRandomCaptchaImage method where it is used to create an image. The GenerateRandomCaptchaImage also calls DrawRandomLines method which is used to add noise to the image. The noise will make sure that actual human is interacting with the computer and not a programmed bot.



Just to give you an idea here is one of the random image generated.



If you think that the image is very hard to read even for the humans then you can modify the DrawRandomLines method to draw less lines.

Validating the User Input Against the Captcha HtmlHelper:

Our final task is to validate the user input against the random text generated from the Captcha HtmlHelper. The Captcha HtmlHelper is used on the page using the following code:

 

It is always a better idea to give Captcha control a unique id. You can achieve this by updating the Captcha method to include the "id".

The Validate method of the CaptchaService is used to validate the user input. The implementation is shown below:



The Validate method is invoked from the controller as shown below:



Conclusion:

In this article we learned how to create a Captcha HtmlHelper which can be used in an ASP.NET MVC application. The captcha helper limits the bots to post spam on the website and evaluates the identity of the user by enabling them to type the correct captcha word to access restricted resources.

[Download Sample]