ASP.NET WebForms Application Template CAPTCHA C# Code Example

First Time Here?

Check the BotDetect ASP.NET WebForms Captcha Quickstart for key integration steps.

The ASP.NET WebForms application template Captcha example project shows how to add BotDetect CAPTCHA protection to the registration form included in the default ASP.NET Web Forms Application project template coming with Visual Studio.

The example shows how to include BotDetect CAPTCHA validation in new user data validation for the example Register form

The example also shows how to complement server-side CAPTCHA validation with client-side Ajax CAPTCHA validation using ASP.NET unobtrusive validation applied to all form fields.

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

Visual Studio 2015 / Visual Studio 2013 / .NET 4.6 / .NET 4.5.1

The Visual Studio 2015 / 2013 WebForms application Captcha example project shows how to add BotDetect CAPTCHA protection to the registration form included in the default ASP.NET Web Forms Application project template coming with Visual Studio 2015 / 2013 (File > New Project > Installed > Templates > Visual C# > Web > ASP.NET Web Application > Web Forms).

Since the Register form uses ASP.NET Identity user management, the example shows how to include BotDetect CAPTCHA validation in new user data validation (see Account/Register.aspx and Account/Register.aspx.cs source code).

The example also shows how to complement server-side CAPTCHA validation with client-side Ajax CAPTCHA validation using ASP.NET 4.6 / 4.5.1 unobtrusive validation applied to all form fields (Scripts/WebForms/WebUICaptchaValidation.js).

Within this page, the root folder of the extracted archive is referred as the <BDC-DIR>.

This example is in the <BDC-DIR>/lgcy-on-lgcy/examples/t_api-captcha-webforms-aspnet.identity/csharp/ folder; and contains the following files:

Example Code Files

Account\Register.aspx

<%@ Page Title="Register" Language="C#" MasterPageFile="~/Site.Master" 
AutoEventWireup="true" CodeBehind="Register.aspx.cs" 
Inherits="AspNetWebForms451CaptchaExampleCSharp.Account.Register" %>

<%@ Import Namespace="BotDetect.Web.UI" %>

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
  <h2><%: Title %>.</h2>
  <p class="text-danger">
    <asp:Literal runat="server" ID="ErrorMessage" />
  </p>

  <div class="form-horizontal">
    <h4>Create a new account.</h4>
    <hr />

    <div class="col-md-6" id="form-container">

      <asp:ValidationSummary runat="server" CssClass="text-danger" />

      <div class="form-group">
        <asp:Label runat="server" AssociatedControlID="UserName" 
        CssClass="col-md-4 control-label">User name</asp:Label>
        <div class="col-md-8">
          <asp:TextBox runat="server" ID="UserName" CssClass="form-control" />
          <asp:RequiredFieldValidator runat="server" 
          ControlToValidate="UserName"
            CssClass="text-danger" ErrorMessage="The user name field is required. " />
        </div>
      </div>
      <div class="form-group">
        <asp:Label runat="server" AssociatedControlID="Password" 
        CssClass="col-md-4 control-label">Password</asp:Label>
        <div class="col-md-8">
          <asp:TextBox runat="server" ID="Password" TextMode="Password" 
          CssClass="form-control" />
          <asp:RequiredFieldValidator runat="server" 
          ControlToValidate="Password" CssClass="text-danger" 
          ErrorMessage="The password field is required. " />
        </div>
      </div>
      <div class="form-group">
        <asp:Label runat="server" AssociatedControlID="ConfirmPassword" 
        CssClass="col-md-4 control-label">Confirm password</asp:Label>
        <div class="col-md-8">
          <asp:TextBox runat="server" ID="ConfirmPassword" TextMode="Password" 
          CssClass="form-control" />
          <asp:RequiredFieldValidator runat="server" ControlToValidate="ConfirmPassword" 
          CssClass="text-danger" Display="Dynamic" 
          ErrorMessage="The confirm password field is required." />
          <asp:CompareValidator runat="server" ControlToCompare="Password" 
          ControlToValidate="ConfirmPassword" CssClass="text-danger" Display="Dynamic" 
          ErrorMessage="The password and confirmation password do not match." />
        </div>
      </div>
      <!-- Add the controls for CAPTCHA validation to the registration form -->
      <div class="form-group">
        <div class="col-md-offset-4 col-md-8">
          <BotDetect:WebFormsCaptcha ID="RegisterCaptcha" runat="server" />
        </div>
        <asp:Label runat="server" AssociatedControlID="CaptchaCode" 
        CssClass="col-md-4 control-label">Retype code</asp:Label>
        <div class="col-md-8">
          <asp:TextBox runat="server" ID="CaptchaCode" CssClass="form-control captchaVal" />
          <asp:RequiredFieldValidator ID="CaptchaRequiredValidator" 
            runat="server" ControlToValidate="CaptchaCode" CssClass="text-danger" Display="Dynamic" 
            ErrorMessage="Retyping the code from the picture is required." />
          <asp:CustomValidator runat="server" ID="CaptchaValidator" 
            ControlToValidate="CaptchaCode" CssClass="text-danger" Display="Dynamic" 
            ErrorMessage="Incorrect code, please try again."
            OnServerValidate="CaptchaValidator_ServerValidate" 
            ClientValidationFunction="ValidateCaptcha" />
        </div>
      </div>
      <div class="form-group" id="form-submit">
        <div class="col-md-offset-4 col-md-8">
          <asp:Button runat="server" OnClick="CreateUser_Click" Text="Register" 
          CssClass="btn btn-default" />
        </div>
      </div>
    </div>
  </div>
</asp:Content>

To show a Captcha test on the registration form, we add a <BotDetect:Captcha> control and a textbox in which the visitor will type the displayed Captcha code. We also tag this textbox with a special CSS class (captchaVal), so we can attach client-side jQuery validation to it dynamically without knowing its exact ID.

To make the Captcha code a required form field, we add a <asp:RequiredFieldValidator>. For proper Captcha validation comparing the user input to the Captcha code stored on the server during image generation, we add a <asp:CustomValidator> associated with the textbox and set its OnServerValidate property to point to a validation function in form code-behind. To allow unobtrusive Ajax Captcha validation, we set its ClientValidationFunction to point at the custom Ajax Captcha validation script we will define in client-side code.

[back to the top of the page]

Account\Register.aspx.cs

using Microsoft.AspNet.Identity;
using Microsoft.AspNet.Identity.EntityFramework;
using Microsoft.AspNet.Identity.Owin;
using System;
using System.Linq;
using System.Web;
using System.Web.UI;
using AspNetWebForms451CaptchaExampleCSharp.Models;

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

namespace AspNetWebForms451CaptchaExampleCSharp.Account
{
  public partial class Register : Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      // setup client-side input processing
      RegisterCaptcha.UserInputID = CaptchaCode.ClientID;
    }

    protected void CreateUser_Click(object sender, EventArgs e)
    {
      if (this.IsValid)
      {
        var manager = new UserManager();
        var user = new ApplicationUser() { UserName = UserName.Text };
        IdentityResult result = manager.Create(user, Password.Text);
        if (result.Succeeded)
        {
          IdentityHelper.SignIn(manager, user, isPersistent: false);
          IdentityHelper.RedirectToReturnUrl(Request.QueryString["ReturnUrl"], 
          Response);
        }
        else
        {
          ErrorMessage.Text = result.Errors.FirstOrDefault();
        }

        //Response.Redirect("~/About");
      }

    }

    protected void CaptchaValidator_ServerValidate(object source, 
    System.Web.UI.WebControls.ServerValidateEventArgs args)
    {
      // validate the Captcha to check we're not dealing with a bot
      args.IsValid = RegisterCaptcha.Validate(args.Value.Trim());

      CaptchaCode.Text = null; // clear previous user input
    }
  }
}

In the Page_Load event handler, we set the UserInputID property of the Captcha control required for client-side Captcha object initialization. This is needed because the custom client-side Ajax Captcha validation code will require that object instance to work.

In the CaptchaValidator_ServerValidate function registered to handle server-side validation of the <asp:CustomValidator>, we use the Captcha control's Validate() method to check user input. We also clear the Captcha code textbox after validation, since each Captcha code can only be validated once for security reasons.

[back to the top of the page]

Scripts\WebForms\WebUICaptchaValidation.js

// CAPTCHA client-side validation function
function ValidateCaptcha(source, arguments) {
  var captcha = $(".captchaVal").get(0).Captcha;
  var validationUrl = captcha.ValidationUrl + "&i=" + arguments.Value;
  $.getJSON(validationUrl, function (data) {
    // WebUIValidation.js status update
    source.isvalid = data;
    ValidatorUpdateDisplay(source);
    ValidatorUpdateIsValid();

    // reload the Captcha image if validation failed
    if (!data) { captcha.ReloadImage(); }
  });
}

In this file, we extend the unobtrusive client-side WebForms validation with a simple Captcha validation function.

To access the client-side Captcha object, we read it from the Captcha property of the textbox marked with the captchaVal CSS class. We can then get the ValidationUrl pointing to the BotDetect HttpHandler endpoint used for Ajax Captcha validation, append the user input as an additional &i= querystring parameter, and start the Ajax validation call using the jQuery $.getJSON() function.

When the Ajax call returns the JSON-encoded Captcha validation result, we forward it to unobtrusive client-side WebForms validation code that updates ASP.NET validator status and display. We also reload the Captcha image immediately if validation failed, since the code it is showing will have been invalidated in that case, and can't be used anymore.

[back to the top of the page]

App_Start\BundleConfig.cs

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

namespace AspNetWebForms451CaptchaExampleCSharp
{
  public class BundleConfig
  {
    // For more information on Bundling, visit http://go.microsoft.
    com/fwlink/?LinkID=303951
    public static void RegisterBundles(BundleCollection bundles)
    {
      bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(
                      "~/Scripts/WebForms/WebForms.js",
                      "~/Scripts/WebForms/WebUIValidation.js",
                      "~/Scripts/WebForms/WebUICaptchaValidation.js",
                      "~/Scripts/WebForms/MenuStandards.js",
                      "~/Scripts/WebForms/Focus.js",
                      "~/Scripts/WebForms/GridView.js",
                      "~/Scripts/WebForms/DetailsView.js",
                      "~/Scripts/WebForms/TreeView.js",
                      "~/Scripts/WebForms/WebParts.js"));

      // Order is very important for these files to work, they have explicit 
      dependencies
      bundles.Add(new ScriptBundle("~/bundles/MsAjaxJs").Include(
              "~/Scripts/WebForms/MsAjax/MicrosoftAjax.js",
              "~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js",
              "~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js",
              "~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js"));

      // Use the Development version of Modernizr to develop with and learn from.
      Then, when you’re
      // ready for production, use the build tool at http://modernizr.com to 
      pick only the tests you need
      bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                      "~/Scripts/modernizr-*"));

      ScriptManager.ScriptResourceMapping.AddDefinition(
          "respond",
          new ScriptResourceDefinition
          {
            Path = "~/Scripts/respond.min.js",
            DebugPath = "~/Scripts/respond.js",
          });
    }
  }
}

To make ASP.NET WebForms unobtrusive validation load the Captcha Ajax validation function, we have to add it to the /bundles/WebFormsJs script bundle.

[back to the top of the page]

Web.config

<?xml version="1.0" encoding="utf-8"?>
<!--
  For more information on how to configure your ASP.NET application, please 
  visit
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
  <configSections>
  <!-- For more information on Entity Framework configuration, visit http://go.
  microsoft.com/fwlink/?LinkID=237468 -->
  <section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.
  EntityFrameworkSection, EntityFramework, Version=6.0.0.0, Culture=neutral, 
  PublicKeyToken=b77a5c561934e089" requirePermission="false" />
  <section name="botDetect" requirePermission="false" 
  type="BotDetect.Configuration.BotDetectConfigurationSection, BotDetect" />
  </configSections>
  <connectionStrings>
  <add name="DefaultConnection" connectionString="Data Source=(LocalDb)\v11.0;
  AttachDbFilename=|DataDirectory|\aspnet-AspNetWebForms451CaptchaExampleCSharp-
  20140226081620.mdf;Initial Catalog=aspnet-AspNetWebForms451CaptchaExampleCSharp-
  20140226081620;Integrated Security=True" providerName="System.Data.SqlClient" 
  />
  </connectionStrings>
  <appSettings>
  <!--<add key="owin:AutomaticAppStartup" value="true" />-->
  </appSettings>
  <system.web>
  <authentication mode="None" />
  <compilation debug="false" targetFramework="4.5.1" />
  <httpRuntime targetFramework="4.5.1" />
  <pages>
    <namespaces>
    <add namespace="System.Web.Optimization" />
    <add namespace="Microsoft.AspNet.Identity" />
    </namespaces>
    <controls>
    <add assembly="Microsoft.AspNet.Web.Optimization.WebForms" 
    namespace="Microsoft.AspNet.Web.Optimization.WebForms" tagPrefix="webopt" />
    <!-- Register the BotDetect tag prefix for easier use in all pages -->
    <add assembly="BotDetect" namespace="BotDetect.Web.UI" tagPrefix="BotDetect"/>
    </controls>
  </pages>
  <membership>
    <providers>
    <!--
        ASP.NET Membership is disabled in this template. Please visit the 
        following link http://go.microsoft.com/fwlink/?LinkId=301889 to learn 
        about the ASP.NET Membership support in this template
        -->
    <clear />
    </providers>
  </membership>
  <profile>
    <providers>
    <!--
        ASP.NET Membership Profile is disabled in this template. Please visit 
        the following link http://go.microsoft.com/fwlink/?LinkId=301889 to 
        learn about the ASP.NET Membership support in this template
        -->
    <clear />
    </providers>
  </profile>
  <roleManager>
    <!--
          ASP.NET Membership Role is disabled in this template. Please visit the 
          following link http://go.microsoft.com/fwlink/?LinkId=301889 to learn 
          about the ASP.NET Membership support in this template
        -->
    <providers>
    <clear />
    </providers>
  </roleManager>
  <!--
            If you are deploying to a cloud environment that has multiple web 
            server instances,
            you should change session state mode from "InProc" to "Custom". In 
            addition,
            change the connection string named "DefaultConnection" to connect to 
            an instance
            of SQL Server (including SQL Azure and SQL  Compact) instead of to 
            SQL Server Express.
      -->
  <httpHandlers>
    <!-- Register the HttpHandler used for BotDetect Captcha requests -->
    <add verb="GET" path="BotDetectCaptcha.ashx" 
    type="BotDetect.Web.CaptchaHandler, BotDetect" />
  </httpHandlers>
  <!-- Register a custom SessionIDManager for BotDetect Captcha requests -->
  <sessionState mode="InProc" customProvider="DefaultSessionProvider" 
  sessionIDManagerType="BotDetect.Web.CustomSessionIdManager, BotDetect">
    <providers>
    <add name="DefaultSessionProvider" type="System.Web.Providers.
    DefaultSessionStateProvider, System.Web.Providers, Version=1.0.0.0, 
    Culture=neutral, PublicKeyToken=31bf3856ad364e35" 
    connectionStringName="DefaultConnection" />
    </providers>
  </sessionState>
  </system.web>
  <system.webServer>
  <validation validateIntegratedModeConfiguration="false" />
  <handlers>
    <!-- Register the HttpHandler used for BotDetect Captcha requests (IIS 7.0+) -->
    <remove name="BotDetectCaptchaHandler" />
    <add name="BotDetectCaptchaHandler" preCondition="integratedMode" verb="GET" 
    path="BotDetectCaptcha.ashx" type="BotDetect.Web.CaptchaHandler, BotDetect"/>
  </handlers>
  <modules>
    <remove name="FormsAuthenticationModule" />
  </modules>
  </system.webServer>
  <runtime>
  <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
    <dependentAssembly>
    <assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35"/>
    <bindingRedirect oldVersion="1.0.0.0-1.0.0.0" newVersion="1.0.0.0"/>
    </dependentAssembly>
    <dependentAssembly>
    <assemblyIdentity name="EntityFramework" culture="neutral" 
    publicKeyToken="b77a5c561934e089" />
    <bindingRedirect oldVersion="0.0.0.0-6.0.0.0" newVersion="6.0.0.0" />
    </dependentAssembly>
  </assemblyBinding>
  </runtime>
  <entityFramework>
  <defaultConnectionFactory 
    type="System.Data.Entity.Infrastructure.LocalDbConnectionFactory, EntityFramework">
    <parameters>
    <parameter value="v11.0" />
    </parameters>
  </defaultConnectionFactory>
  <providers>
    <provider invariantName="System.Data.SqlClient" 
    type="System.Data.Entity.SqlServer.SqlProviderServices, EntityFramework.SqlServer" />
  </providers>
  </entityFramework>
  <botDetect helpLinkEnabled="true" helpLinkMode="image" />
</configuration>

To allow the application to use BotDetect Captcha protection, we must enable and configure sessionState (required for BotDetect), and register the BotDetect HttpHandler in both <system.web><httpHandlers> and <system.webServer><handlers> configuration sections.

[back to the top of the page]

© Captcha, Inc. 2004-2023. All rights reserved.

BotDetect, BotDetect CAPTCHA, Lanap, Lanap CAPTCHA, Lanap BotDetect, Lanap BotDetect CAPTCHA, Lanapsoft, Lanapsoft CAPTCHA, Lanapsoft BotDetect, Lanapsoft BotDetect CAPTCHA, and Lanap Software are trademarks of Captcha, Inc. All other product, brand, and company names are mentioned for identification purposes only and are trademarks or registered trademarks of their respective owners.

Captcha, Inc. -- formerly: Lanapsoft, Inc. / Lanap, Inc.