Post
Ask Question

Captcha Image in ASP.Net

Nearly every website has the same style. When the user fills in an online form for an online registration for many things, such as an examination, booking a ticket online or any kind of money transaction, an image is shown in the registration form. When you have successfully filled in the specified words (provided in the image) in the TextBox, your form is submitted.

Captcha image in Asp.Net

These kinds of images are called CAPTCHA images. In this article, I will show you how to implement a CAPTCHA feature in your ASP.Net web form application.

For using this feature, we have the "mscaptcha.dll" file. You can download this file from this article.

Question: What is the "MSCaptcha.dll" file?

Answer: The "MSCaptcha.dll" file provides a user control for randomly generating CAPTCHA images.

So let's start implementation of CAPTCHAs in our website.

  1. Open Visual Studio
  2. "File" -> "New" -> "Project..." then seelct "ASP.Net Webform Application"
  3. Add a new web form
  4. Download "Mscaptcha.dll"
  5. Now right-click on the project and select "Add Reference" then select "mscaptcha.dll" from where you stored it then click on "Ok".

    Captcha image1

    You can see in the following image that "MScaptcha.dll" is loaded into your project.

    Captcha image2
     
  6. If you are developing your application in Visual Studio 2012 or later then you need to implement one more step. Visual Studio 2010/2008/2005 users don't need to implement the seventh step.
  7. Select your project and click on "Properties".

    Captcha image3
     
  8. Change Managed Pipeline mode Integrated to Classic.
  9. Now you are ready to implement the CAPTCHA feature in your application. Now open web.config and add the following httpHandlers code, under the <system.web> section:

    1. <httpHandlers>  
    2.     <addverb="GET"path="CaptchaImage.axd"  
    3.  type="MSCaptcha.CaptchaImageHandler, MSCaptcha" />  
    4. </httpHandlers> 

  10. Open webform1.aspx and add the following line:
    1. <%@RegisterAssembly="MSCaptcha"Namespace="MSCaptcha"TagPrefix="cc1"%>

Webform1.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>  
  2. <%@ Register Assembly="MSCaptcha" Namespace="MSCaptcha" TagPrefix="cc1" %>  
  3. <!DOCTYPE html>  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title></title>  
  7. </head>  
  8. <body>  
  9.     <form id="form1" runat="server">  
  10.     <div>  
  11.     <cc1:CaptchaControl ID="cptCaptcha" runat="server"  
  12.         CaptchaBackgroundNoise="Low" CaptchaLength="5"  
  13.         CaptchaHeight="60" CaptchaWidth="200"  
  14.         CaptchaLineNoise="None" CaptchaMinTimeout="5"  
  15.         CaptchaMaxTimeout="240" FontColor = "#529E00" />  
  16.     </div>  
  17.         <asp:TextBox ID="txtCaptcha" runat="server"></asp:TextBox>  
  18.         <br />  
  19.         <asp:Button ID="btnVerify" runat="server" Text="Verify Image" OnClick="btnVerify_Click" />  
  20.         <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="*Required" ControlToValidate = "txtCaptcha"></asp:RequiredFieldValidator>  
  21.         <br />  
  22.         <br />  
  23.         <asp:Label ID="lblErrorMessage" runat="server" Font-Names = "Arial" Text=""></asp:Label>  
  24.     </div>  
  25.     </form>  
  26. </body>  
  27. </html>
As you saw in the code above, cc1:CaptchaControl is a user control, that we get from "MSCaptha.dll".

Now when the user clicks on the button it will determine whether the text entered is valid or not.

Weform1.aspx.cs
  1. protected void btnVerify_Click(object sender, EventArgs e)  
  2. {  
  3.     cptCaptcha.ValidateCaptcha(txtCaptcha.Text.Trim());  
  4.     if (cptCaptcha.UserValidated)  
  5.     {  
  6.         lblErrorMessage.ForeColor = System.Drawing.Color.Green;  
  7.         lblErrorMessage.Text = "Valid text";  
  8.     }  
  9.     else  
  10.     {  
  11.         lblErrorMessage.ForeColor = System.Drawing.Color.Red;  
  12.         lblErrorMessage.Text = "InValid Text";  
  13.     }  
  14. }

That's it. Press F5 and test your app.

Captcha image4

You can see in the preceding image, there's an image when you enter the same text that you get a valid message otherwise you will get an invalid error.

For any suggestions/queries, please send your comments. Happy Programming.


Similar Articles