ASP.NET MVC 3.0 Application Template CAPTCHA C# Code Example

The ASP.NET MVC 3.0 application template Captcha example project shows how to use the BotDetect CAPTCHA MvcCaptcha control in ASP.NET MVC 3.0 web applications.

Starting with the default ASP.NET MVC 3.0 Visual Studio 2010 project template, the example includes all code required to add CAPTCHA validation to the Account controller Register action.

The example remembers when the CAPTCHA is successfully solved within a single registration, and doesn't display it again if there are errors with other form values (the username, for example).

You can get a new CAPTCHA using the Register action link in the top right corner of the page, and see the explanation in the Account controller code.

Download the BotDetect ASP.NET CAPTCHA Generator archive to run this example

→ ASP.NET MVC version:

• Models\AccountModels.cs
• Views\Account\Register.cshtml
• Views\Shared\_Layout.cshtml
• Controllers\AccountController.cs
• CaptchaHelper.cs
• Global.asax.cs
• Web.config

Models\AccountModels.cs

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Globalization;
using System.Web.Mvc;
using System.Web.Security;

namespace AspNetMvc30CaptchaExampleCSharp.Models
{

  public class ChangePasswordModel
  {
    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Current password")]
    public string OldPassword { get; set; }

    [Required]
    [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long."
    , MinimumLength = 6)]
    [DataType(DataType.Password)]
    [Display(Name = "New password")]
    public string NewPassword { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = "Confirm new password")]
    [Compare("NewPassword", 
    ErrorMessage = "The new password and confirmation password do not match.")]
    public string ConfirmPassword { get; set; }
  }

  public class LogOnModel
  {
    [Required]
    [Display(Name = "User name")]
    public string UserName { get; set; }

    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [Display(Name = "Remember me?")]
    public bool RememberMe { get; set; }
  }

  public class RegisterModel
  {
    [Required]
    [Display(Name = "User name")]
    public string UserName { get; set; }

    [Required]
    [DataType(DataType.EmailAddress)]
    [Display(Name = "Email address")]
    public string Email { get; set; }

    [Required]
    [StringLength(100, 
    ErrorMessage = "The {0} must be at least {2} characters long.", 
    MinimumLength = 6)]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = "Confirm password")]
    [Compare("Password", 
    ErrorMessage = "The password and confirmation password do not match.")]
    public string ConfirmPassword { get; set; }

    // add Captcha code as a field in the protected action Model
    [Required(ErrorMessage = "Retyping the characters from the picture is required.")]
    [Display(Name = "Please retype the characters from the picture")]
    public string CaptchaCode { get; set; }
  }
}

Since we want to include Captcha validation in the Register action, we add a string field representing the Captcha code to the related RegisterModel class declaration.

The [Required] attribute specifies that the Captcha code input field cannot be left blank (and which error message to display if it is), while the [Display] attribute declares the text description used to prompt users to type the Captcha code.

[back to the top of the page]

Views\Account\Register.cshtml

@model AspNetMvc30CaptchaExampleCSharp.Models.RegisterModel
@using BotDetect.Web.Mvc;
@{
  ViewBag.Title = "Register";
}
@* add BotDetect header includes *@
@section BotDetectStyles {
  <link href="@BotDetect.Web.CaptchaUrls.Absolute.LayoutStyleSheetUrl" 
  rel="stylesheet" type="text/css" />
}
<h2>
  Create a New Account</h2>
<p>
  Use the form below to create a new account.
</p>
<p>
  Passwords are required to be a minimum of @Membership.
  MinRequiredPasswordLength
  characters in length.
</p>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" 
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" 
type="text/javascript"></script>
@using (Html.BeginForm("Register", "Account"))
{
  <p>
    @Html.ValidationSummary(true, 
    "Account creation was unsuccessful. Please correct the errors and try again.")
  </p>
  <div>
    <fieldset id="RegisterFields">
      <legend>Account Information</legend>
      <div class="editor-label">
        @Html.LabelFor(m => m.UserName)
      </div>
      <div class="editor-field">
        @Html.TextBoxFor(m => m.UserName)
        @Html.ValidationMessageFor(m => m.UserName)
      </div>
      <div class="editor-label">
        @Html.LabelFor(m => m.Email)
      </div>
      <div class="editor-field">
        @Html.TextBoxFor(m => m.Email)
        @Html.ValidationMessageFor(m => m.Email)
      </div>
      <div class="editor-label">
        @Html.LabelFor(m => m.Password)
      </div>
      <div class="editor-field">
        @Html.PasswordFor(m => m.Password)
        @Html.ValidationMessageFor(m => m.Password)
      </div>
      <div class="editor-label">
        @Html.LabelFor(m => m.ConfirmPassword)
      </div>
      <div class="editor-field">
        @Html.PasswordFor(m => m.ConfirmPassword)
        @Html.ValidationMessageFor(m => m.ConfirmPassword)
      </div>
      @* add Captcha validation controls to the protected action View *@
      @{ MvcCaptcha registrationCaptcha = CaptchaHelper.GetRegistrationCaptcha();
      }
      @if (!registrationCaptcha.IsSolved)
      {
        <div class="editor-label">
          @Html.LabelFor(m => m.CaptchaCode)
          @Html.Captcha(registrationCaptcha)
        </div>
        <div class="editor-field">
          @Html.TextBoxFor(m => m.CaptchaCode)
          @Html.ValidationMessageFor(m => m.CaptchaCode)
        </div>
      }
      <p style="width: 210px; text-align: right;">
        <input type="submit" value="Register" />
      </p>
    </fieldset>
  </div>
}

Following ASP.NET MVC 3.0 Captcha View instructions, the BotDetectStyles section includes required BotDetect stylesheets in the generated page header.

To keep View code simple, we delegate MvcCaptcha instance creation to a helper class, and use it along with Model fields to generate the required markup using straightforward HtmlHelper calls.

Since we want to avoid re-displaying the Captcha challenge to users after they solve it, we only call the markup generation code if the IsSolved property is not set by a previous successful Captcha validation.

[back to the top of the page]

Views\Shared\_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>@ViewBag.Title</title>
  <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" 
  type="text/css" />
  <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" 
  type="text/javascript"></script>
  <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" 
  type="text/javascript"></script>
  @* allow BotDetect stylesheet includes in selected Views *@
  @RenderSection("BotDetectStyles", required: false)
</head>
<body>
  <div class="page">
    <header>
            <div id="title">
                <h1>BotDetect CAPTCHA ASP.NET MVC 3.0 Example</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </nav>
        </header>
    <section id="main">
            @RenderBody()
        </section>
    <footer>
        </footer>
  </div>
</body>
</html>

To allow easy inclusion of BotDetect stylesheets into Views which require them, the BotDetectStyles section was declared in the layout template header.

[back to the top of the page]

Controllers\AccountController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
using System.Web.Security;
using AspNetMvc30CaptchaExampleCSharp.Models;

using BotDetect.Web.Mvc;

namespace AspNetMvc30CaptchaExampleCSharp.Controllers
{
  public class AccountController : Controller
  {

    //
    // GET: /Account/LogOn

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

    //
    // POST: /Account/LogOn

    [HttpPost]
    public ActionResult LogOn(LogOnModel model, string returnUrl)
    {
      if (ModelState.IsValid)
      {
        if (Membership.ValidateUser(model.UserName, model.Password))
        {
          FormsAuthentication.SetAuthCookie(model.UserName, model.RememberMe);
          if (Url.IsLocalUrl(returnUrl) && returnUrl.Length > 1 
          && returnUrl.StartsWith("/") && !returnUrl.StartsWith("//")
          && !returnUrl.StartsWith("/\\"))
          {
            return Redirect(returnUrl);
          }
          else
          {
            return RedirectToAction("Index", "Home");
          }
        }
        else
        {
          ModelState.AddModelError("", 
          "The user name or password provided is incorrect.");
        }
      }

      // If we got this far, something failed, redisplay form
      return View(model);
    }

    //
    // GET: /Account/LogOff

    public ActionResult LogOff()
    {
      FormsAuthentication.SignOut();

      return RedirectToAction("Index", "Home");
    }

    //
    // GET: /Account/Register

    public ActionResult Register()
    {
      // when the View is accessed directly and not posted, we clear any
      // remembered CAPTCHA solving state. 
      // The users only have to solve the CAPTCHA once within a single 
      // registration, but if they reload the Register page later,
      // it is shown again. 
      // Otherwise, they could register an unlimited number of accounts 
      // within a single Session after solving the CAPTCHA only once.
      MvcCaptcha.ResetCaptcha("RegistrationCaptcha");

      return View();
    }

    //
    // POST: /Account/Register

    [HttpPost]
    [CaptchaValidationActionFilter("CaptchaCode", "RegistrationCaptcha", 
    "Your input doesn't match displayed characters.")]
    public ActionResult Register(RegisterModel model)
    {
      if (ModelState.IsValid)
      {
        // Attempt to register the user
        MembershipCreateStatus createStatus;
        Membership.CreateUser(model.UserName, model.Password, model.Email, null, 
        null, true, null, out createStatus);

        if (createStatus == MembershipCreateStatus.Success)
        {
          FormsAuthentication.SetAuthCookie(model.UserName, false /* createPersistentCookie */);
          return RedirectToAction("Index", "Home");
        }
        else
        {
          ModelState.AddModelError("", ErrorCodeToString(createStatus));
        }
      }

      // If we got this far, something failed, redisplay form
      return View(model);
    }

    //
    // GET: /Account/ChangePassword

    [Authorize]
    public ActionResult ChangePassword()
    {
      return View();
    }

    //
    // POST: /Account/ChangePassword

    [Authorize]
    [HttpPost]
    public ActionResult ChangePassword(ChangePasswordModel model)
    {
      if (ModelState.IsValid)
      {

        // ChangePassword will throw an exception rather
        // than return false in certain failure scenarios.
        bool changePasswordSucceeded;
        try
        {
          MembershipUser currentUser = Membership.GetUser(User.Identity.Name, 
          true /* userIsOnline */);
          changePasswordSucceeded = currentUser.ChangePassword(model.OldPassword,
          model.NewPassword);
        }
        catch (Exception)
        {
          changePasswordSucceeded = false;
        }

        if (changePasswordSucceeded)
        {
          return RedirectToAction("ChangePasswordSuccess");
        }
        else
        {
          ModelState.AddModelError("", 
          "The current password is incorrect or the new password is invalid.");
        }
      }

      // If we got this far, something failed, redisplay form
      return View(model);
    }

    //
    // GET: /Account/ChangePasswordSuccess

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

    #region Status Codes
    private static string ErrorCodeToString(MembershipCreateStatus createStatus)
    {
      // See http://go.microsoft.com/fwlink/?LinkID=177550 for
      // a full list of status codes.
      switch (createStatus)
      {
        case MembershipCreateStatus.DuplicateUserName:
          return "User name already exists. Please enter a different user name.";

        case MembershipCreateStatus.DuplicateEmail:
          return "A user name for that e-mail address already exists. Please 
          enter a different e-mail address.";

        case MembershipCreateStatus.InvalidPassword:
          return "The password provided is invalid. Please enter a valid 
          password value.";

        case MembershipCreateStatus.InvalidEmail:
          return "The e-mail address provided is invalid. Please check the value 
          and try again.";

        case MembershipCreateStatus.InvalidAnswer:
          return "The password retrieval answer provided is invalid. Please 
          check the value and try again.";

        case MembershipCreateStatus.InvalidQuestion:
          return "The password retrieval question provided is invalid. Please 
          check the value and try again.";

        case MembershipCreateStatus.InvalidUserName:
          return "The user name provided is invalid. Please check the value and 
          try again.";

        case MembershipCreateStatus.ProviderError:
          return "The authentication provider returned an error. Please verify 
          your entry and try again. If the problem persists, please contact your 
          system administrator.";

        case MembershipCreateStatus.UserRejected:
          return "The user creation request has been canceled. Please verify 
          your entry and try again. If the problem persists, please contact your 
          system administrator.";

        default:
          return "An unknown error occurred. Please verify your entry and try 
          again. If the problem persists, please contact your system 
          administrator.";
      }
    }
    #endregion
  }
}

To add Captcha validation to the Register action Controller code, we perform a single line of setup in the Register action when the user GETs it, and execute the [CaptchaValidationActionFilter] filter when the user POSTs it.

The filter attribute will automatically add the appropriate ModelState error if the Captcha code input doesn't match the code displayed to the user in the Captcha picture.

[back to the top of the page]

CaptchaHelper.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

using BotDetect;
using BotDetect.Web;
using BotDetect.Web.UI;
using BotDetect.Web.Mvc;

public class CaptchaHelper
{
  public static MvcCaptcha GetRegistrationCaptcha()
  {
    // create the control instance
    MvcCaptcha registrationCaptcha = new MvcCaptcha("RegistrationCaptcha");
    registrationCaptcha.UserInputID = "CaptchaCode";

    // all Captcha properties are set in this event handler
    WebFormsCaptcha.InitializedWebCaptcha +=
        new EventHandler<InitializedWebCaptchaEventArgs>(
            RegistrationCaptcha_InitializedWebCaptcha);


    return registrationCaptcha;
  }

  // event handler used for Captcha control property randomization
  static void RegistrationCaptcha_InitializedWebCaptcha(object sender,
      InitializedWebCaptchaEventArgs e)
  {
    if (e.CaptchaId != "RegistrationCaptcha")
    {
      return;
    }

    Captcha registrationCaptcha = sender as Captcha;

    // fixed Captcha settings 
    registrationCaptcha.ImageSize = new System.Drawing.Size(200, 50);
    registrationCaptcha.CodeLength = 4;

    // randomized Captcha settings
    registrationCaptcha.ImageStyle = CaptchaRandomization.GetRandomImageStyle();
    registrationCaptcha.SoundStyle = CaptchaRandomization.GetRandomSoundStyle();
  }
}

Captcha instance creation and property setting is encapsulated in this simple helper class. This separation allows application Views to stay simple regardless of the amount of Captcha customization chosen.

[back to the top of the page]

Global.asax.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace AspNetMvc30CaptchaExampleCSharp
{
  // Note: For instructions on enabling IIS6 or IIS7 classic mode, 
  // visit http://go.microsoft.com/?LinkId=9394801

  public class MvcApplication : System.Web.HttpApplication
  {
    public static void RegisterGlobalFilters(GlobalFilterCollection filters)
    {
      filters.Add(new HandleErrorAttribute());
    }

    public static void RegisterRoutes(RouteCollection routes)
    {
      routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

      // BotDetect requests must not be routed
      routes.IgnoreRoute("{*botdetect}", 
      new { botdetect = @"(.*)BotDetectCaptcha\.ashx" });

      // Set the Register action as the example project default, 
      // since it includes the Captcha control and we want to show it
      routes.MapRoute(
          "Default", // Route name
          "{controller}/{action}/{id}", // URL with parameters
          new { controller = "Account", action = "Register", 
          id = UrlParameter.Optional } // Parameter defaults
      );

    }

    protected void Application_Start()
    {
      AreaRegistration.RegisterAllAreas();

      RegisterGlobalFilters(GlobalFilters.Filters);
      RegisterRoutes(RouteTable.Routes);
    }
  }
}

Since all BotDetect requests are handled by the BotDetect HttpHandler, ASP.NET Url Routing must be configured to ignore BotDetect requests, which can be achieved by a single line of code in Global.asax code-behind.

[back to the top of the page]

Web.config

<?xml version="1.0"?>
<!--
  For more information on how to configure your ASP.NET application, please 
  visit
  http://go.microsoft.com/fwlink/?LinkId=152368
  -->

<configuration>
  <configSections>
    <!-- Register the BotDetect configuration section -->
    <section name="botDetect" requirePermission="false" 
    type="BotDetect.Configuration.BotDetectConfigurationSection, BotDetect"/>
  </configSections>
  <connectionStrings>
    <add name="ApplicationServices"
         connectionString="data source=.\SQLEXPRESS;Integrated Security=SSPI;
         AttachDBFilename=|DataDirectory|aspnetdb.mdf;User Instance=true"
         providerName="System.Data.SqlClient" />
  </connectionStrings>
  <appSettings>
    <add key="webpages:Version" value="1.0.0.0"/>
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
  </appSettings>
  <system.web>
    <compilation debug="true" targetFramework="4.0">
      <assemblies>
        <add assembly="System.Web.Abstractions, Version=4.0.0.0, Culture=neutral,
        PublicKeyToken=31BF3856AD364E35" />
        <add assembly="System.Web.Routing, Version=4.0.0.0, Culture=neutral, 
        PublicKeyToken=31BF3856AD364E35" />
        <add assembly="System.Web.Mvc, Version=3.0.0.0, Culture=neutral, 
        PublicKeyToken=31BF3856AD364E35" />
        <add assembly="System.Web.WebPages, Version=1.0.0.0, Culture=neutral, 
        PublicKeyToken=31BF3856AD364E35" />
      </assemblies>
    </compilation>
    <authentication mode="Forms">
      <forms loginUrl="~/Account/LogOn" timeout="2880" />
    </authentication>
    <membership>
      <providers>
        <clear/>
        <add name="AspNetSqlMembershipProvider" type="System.Web.Security.
        SqlMembershipProvider" connectionStringName="ApplicationServices"
             enablePasswordRetrieval="false" enablePasswordReset="true" 
             requiresQuestionAndAnswer="false" requiresUniqueEmail="false"
             maxInvalidPasswordAttempts="5" minRequiredPasswordLength="6" 
             minRequiredNonalphanumericCharacters="0" 
             passwordAttemptWindow="10"
             applicationName="/" />
      </providers>
    </membership>
    <profile>
      <providers>
        <clear/>
        <add name="AspNetSqlProfileProvider" type="System.Web.Profile.
        SqlProfileProvider" connectionStringName="ApplicationServices" 
        applicationName="/" />
      </providers>
    </profile>
    <roleManager enabled="false">
      <providers>
        <clear/>
        <add name="AspNetSqlRoleProvider" type="System.Web.Security.
        SqlRoleProvider" connectionStringName="ApplicationServices" 
        applicationName="/" />
        <add name="AspNetWindowsTokenRoleProvider" 
        type="System.Web.Security.WindowsTokenRoleProvider" applicationName="/" />
      </providers>
    </roleManager>
    <!-- make sure Session State is enabled -->
    <pages enableSessionState="true">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Routing" />
        <add namespace="System.Web.WebPages" />
      </namespaces>
    </pages>
    <!-- configure Session State for BotDetect use -->
    <sessionState mode="InProc" cookieless="AutoDetect" timeout="20" 
    sessionIDManagerType="BotDetect.Web.CustomSessionIdManager, BotDetect" />
    <httpHandlers>
      <!-- register HttpHandler used for BotDetect Captcha requests -->
      <add verb="GET" path="BotDetectCaptcha.ashx" 
      type="BotDetect.Web.CaptchaHandler, BotDetect"/>
    </httpHandlers>
  </system.web>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false"/>
    <modules runAllManagedModulesForAllRequests="true"/>
    <handlers>
      <!-- register HttpHandler used for BotDetect Captcha requests -->
      <remove name="BotDetectCaptchaHandler"/>
      <add name="BotDetectCaptchaHandler" preCondition="integratedMode" 
      verb="GET" path="BotDetectCaptcha.ashx" 
      type="BotDetect.Web.CaptchaHandler, BotDetect"/>
    </handlers>
  </system.webServer>
  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Mvc" 
        publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-2.0.0.0" newVersion="3.0.0.0" />
      </dependentAssembly>
    </assemblyBinding>
  </runtime>
  <botDetect helpLinkEnabled="true" helpLinkMode="image"/>
</configuration>

The application's web.config file includes the standard BotDetect HttpHandler and Session state configuration elements.

[back to the top of the page]