How to Use Captcha Image in Asp.Net Webform Using C#

In today's post i am going to cover "How to Use Captcha Image in Asp.Net Webform Using C#? In the previous tutorials i have explained sealed class ,Abstract class ,Ajax call,Ref and Out Keyword,Autoeventwireup Event in Asp.Net,Bind asp.net dropdown list using jquery  etc.

Before implementing the Captcha in Asp.Net webform let's discuss about "Why require CAPTCHA?" Answer is spamming, in today's world many uses different - different approaches that automatically fills the form using some scripts or code.Here Captcha comes into the picture because Captcha is an image that have random codes which can not be read by any script. This process is also known as Robot check.

Now i will show you how to use Captcha image in Asp.net Webform and prevent from getting misused.

Here I am using BotDetect third party captcha control.To get BotDetect captcha control either you download it and add to bin folder of your application and add a reference or you can use Nuget package manager to download.

Here is the screen how to add reference using nuget package manager.

1. Right click on reference folder of your applicatio.
2. Click on manage nuget packages
3. Search for BotDetect and install the Captcha package.(See below screenshot for reference)

To add BotDetect Captcha package refer below screen.

Now add HTML markup to build the basic form.

?

HTML marup

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<div>             <legend>Captcha in Asp.Net webform</legend>             <p class="prompt">                 <label for="CaptchaCodeTextBox">                 Retype the characters from the picture:</label>             </p> <botdetect:webformscaptcha runat="server" id="CaptchaControl" userinputcontrolid="txtCode" />             <div class="validationDiv">                 <asp:TextBox ID="txtCode" runat="server"></asp:TextBox>                 <asp:Button ID="btnValidate" runat="server" />                 <asp:Label ID="lblCorrect" runat="server" CssClass="correct"></asp:Label>             <asp:Label ID="lblError" runat="server"             CssClass="error"></asp:Label>             </div> </div>

Now add below code to validate the captcha in Asp.net webform.

?

Code to validate captcha

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

using System; public partial class _Default : System.Web.UI.Page {   protected void Page_PreRender(object sender, EventArgs e)   {     // initial page setup     if (!IsPostBack)     {       // set control text       btnValidate.Text = "Validate";       lblCorrect.Text = "Correct!";       lblError.Text = "Incorrect!";         // these messages are shown only after validation       lblCorrect.Visible = false;       lblError.Visible = false;     }       if (IsPostBack)     {       // validate the Captcha to check we're not dealing with a bot       bool isvalidCaptcha = CaptchaControl.Validate();       if (isvalidCaptcha)       {         lblCorrect.Visible = true;         lblError.Visible = false;       }       else       {         lblCorrect.Visible = false;         lblError.Visible = true;       }     }   } }

As we have done with the implemention part.We are just one step away from our goal.Yes, we need to add some configuration in web.config file.Below is the section that needs to be added to web.config.

Add below in <system.web> section

?

Code to validate captcha

1 2 3 4 5

<httphandlers>   <!-- Register the HttpHandler used for BotDetect Captcha requests -->   <add verb="GET" path="BotDetectCaptcha.ashx"   type="BotDetect.Web.CaptchaHandler, BotDetect"/> </httpHandlers>

Add below in <pages> section

?

Code to validate captcha

1 2 3 4 5

<controls>      <!-- Register the BotDetect tag prefix for easier use in all pages -->      <add assembly="BotDetect" namespace="BotDetect.Web.UI"      tagPrefix="BotDetect"/>      </controls>

Add below in <system.webserver> section

?

Code to validate captcha

1 2 3 4 5 6 7

<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>

So there is the final output.

I hope you have learn how to integrate BotDetect captcha control in Asp.Net webform and how it works. I would like to have feedback from my readers. Your valuable feedback, question, or comments about this article are always welcome.


Thanks.