How to Implement CAPTCHA in ASP.Net MVC

CAPTCHAs

A CAPTCHA is a validation layer to recognize the type of user before sending data to the server.

Advantages of CAPTCHAs

There are many tools to send automated messages. If you have not implemented a CAPTCHA in your feedback or user registration page then you will get many spam messages or users.

So the main advantages of CAPTCHA is to avoid spam messages or users.

How to use CAPTCHA in ASP.NET MVC

There are many open-source libraries available to do this. Even though you can write your own code to implement a CAPTCHA in your application, that totally depends on you.

See the following images.


                                                                  Char CAPTCHA Example


                                                                  After CAPTCHA validation


                                                                     Math CAPTCHA Example

Step 1

Create the Empty ASP.NET MVC application.

Step 2

Add the CaptchaMvc library to the Reference Layer like this.



Step 3

In the Model layer add a Feedback class and create the property like this.

namespace MathCaptcha.Models
{
    public class Feedback
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Comment { get; set; }

    }
}

Step 4

Create a HomeController and write the action method like this.

using System.Web.Mvc;
using CaptchaMvc.HtmlHelpers;


namespace MathCaptcha.Controllers
{
    public class HomeController : Controller
    {

        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(string empty)
        {
            // Code for validating the CAPTCHA
            if (this.IsCaptchaValid("Captcha is not valid"))
            {

                return RedirectToAction("ThankYouPage");
            }

            ViewBag.ErrMessage = "Error: captcha is not valid.";
            return View();
        }

        public ActionResult ThankYouPage()
        {
            return View();
        }

    }
}

Note: Do not forget to use the CAPTCHA MVC.HtmlHelpers namespace. In the post action method I wrote code for CAPTCHA validation.

Step 5

Now create the Index View like this.

@using CaptchaMvc.HtmlHelpers
@using MathCaptcha;
@using CaptchaMvc;

@model MathCaptcha.Models.Feedback

@{
    ViewBag.Title = "Index";
}

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Feedback</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Title)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Comment)
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(model => model.Comment,5,40,null)
            @Html.ValidationMessageFor(model => model.Comment)
        </div>

        @Html.MathCaptcha()

        @*@Html.Captcha(3)*@
         <br />
        <p class="Error">  @ViewBag.ErrMessage </p>
        <p>
            <input type="submit" value="Send" />
        </p>
    </fieldset>
}

Note: Here if you use the @Html.MathCaptcha() helper class then it will generate a mathmatical CAPTCHA. If you use the @Html. Captcha(3) helper class then it will generate a Char CAPTCHA. 3 is the length of the CAPTCHA.

Step 6: Create the ThankYouPage index like this.

@model MathCaptcha.Models.Feedback

@{
    ViewBag.Title = "ThankYouPage";
}

<h2>ThankYouPage</h2>

<b> Thank you sending your valuable feedback to us.</b>

Points to remember 

1. Just include the CaptchaMvc libray.
   
   
2. Use the CaptchaMvc.HtmlHelpers namespace.
   
   
3. Use the MathCaptcha namespace for using mathCaptcha.
   
   
4. Use the CaptchaMvc namespace for using CharCaptcha.
   
   
5. For a math CAPTCHA use the @Html.MathCaptcha() helper class.
   
   
6. For a Char CAPTCHA use the @Html.Captcha(3) helper class.

Summary

Here we saw how to use a CAPTCHA in an ASP.NET MVC application. It is very simple and straight forward to implement in MVC applications.