Adding CAPTCHA In ASP.NET Application

26. December 2010 01:44

API ASP.NET  10 Comments

Using CAPTCHA was never easy for me before I got a class from an unknown user on a community forum post. I have just re-used the class to get my work done. The class is extremely easy to use and let you incorporate the CAPTCHA into your application in just few lines of code.

You can set the height and width of the CAPTCHA image while initializing the CAPTCHA class. The CAPTCHA image generated from the class can be set to the image control directly or it can be save to the local path and then set to the image control. For this example I am saving it to the local path and then set to the image control. And the CAPTCHA image code generated by the class is automatically set to the session variable named CaptchaCode.

Time to get some hand on it

On the page get an image control to display CAPTCHA image, a textbox where user will enter the CAPTCHA text and a button when clicked, we can check and validate if the code entered is correct or not. Plug the DLL in your ASP.NET project and go to the Page_Load event. Here we will generate the image of the height and width we wish to have for out CAPTCHA image and then save the image to the CaptchaImages folder with the random image code generated. The code on the Page_Load event goes like this:

 protected void Page_Load(object sender, EventArgs e)
{
        if (!Page.IsPostBack)
        {
            CaptchaImage cImage = new CaptchaImage(CaptchaImage.generateRandomCode(), 140, 40);
            cImage.Image.Save(Server.MapPath("~\\CaptchaImages\\" + Convert.ToString(Session["CaptchaCode"]) + ".jpg"), ImageFormat.Jpeg);
            CaptachaImage.ImageUrl = "~\\CaptchaImages\\" + Convert.ToString(Session["CaptchaCode"]) + ".jpg";
            cImage.Dispose();
        }
        CaptchaCode = Convert.ToString(Session["CaptchaCode"]);
}

Before you can use the above code, declare a public variable which I have used to hold the value of the CAPTCHA code. I named it CaptchaCode. You can name it whatever you like it. We will be using this variable later to check it against the user input. Hit F5 to start and test your application. If everything is in place and you will be able to see the below output.

To check if the user enters the correct CAPTCHA code, we must have an event on button click which will validate the user input and prompt the user if CAPTCHA code is correct or incorrect. The code on the button click is:

protected void btn_Validate(object sender, EventArgs e)
{
        if (CaptchaCode == txt_ccode.Text)
        {
            ClientScript.RegisterClientScriptBlock(typeof(Page), "ValidateMsg", "<script>alert('You entered Correct CAPTCHA Code!');</script>");
        }
        else
        {
            ClientScript.RegisterClientScriptBlock(typeof(Page), "ValidateMsg", "<script>alert('You entered INCORRECT CAPTCHA Code!');</script>");
        }
}

The above code will check the CAPTCHA code entered by the user and check against the CAPTCHA code we previously saved in the session variable (CaptchaCode). If the validation is a success, user will get the message notifying him that he enters correct CAPTCHA code or the error message otherwise.

And that's it, we have successfully implement a CAPTCHA in our ASP.NET application. So, here are few things we can do with this CAPTCHA library:

  • Set image height and width.
  • Saves the image to the local path.
  • Automatically sets the generated CAPTCHA code to the application session.

I have build the sample project in ASP.NET 4.0, if you wanted to use the library in ASP.NET 3.x, then compile the project with lower version of ASP.NET and it will work perfectly. The below zip file contains both the projects.

Download: Captcha.NET.zip (377.63 kb)

Currently rated 3.8 by 19 people

Comments (10)

C C
9/5/2011 9:43:07 AM #

Prashant, In the code for the Page_Load, you have "CaptachaImage.ImageUrl", which causes an error probably due to the misspelling of the class, CaptachaImage. I removed the 2nd "a" which caused another error on ImageUrl, the property doesn't exist in the class. What is that supposed to refer to? Could you let me know? Thanks.

C C
9/5/2011 9:53:39 AM #

Nevermind my previous comment, I figured it out. Thanks.

Nilesh Nilesh
9/21/2011 4:38:23 PM #

Thanks its really good application, appriciate your effort

Bongi Bongi
10/31/2011 2:46:36 PM #

i need the code for creating the strikethrough words for CAPTCHA

prashant prashant
11/1/2011 9:30:17 PM #

I haven't tested the code but I think you need to create a new FonStyle and then set it to the Captcha Font.

spinlight spinlight
11/12/2011 2:59:16 AM #

You may want to include code to delete the image that is generated. When running this, it took me a while to notice my CaptchaImages directory getting larger and larger...

sharan sharan
2/10/2012 1:56:52 AM #

how to set image generated from the class directly to the image control

sharan sharan
2/10/2012 1:57:30 AM #

thanks in advance

Prashant Prashant
2/10/2012 10:32:07 AM #

I haven't tried that but you need to work with Image server control and set the image generated on the server side. Though it's is my idea of doing this, but I am not sure that it is the best way out.

Patel Rutika Patel Rutika
3/2/2012 12:30:11 PM #

Nice Blog and I am going to congratulate you to get higher traffic within your blog.There are a lot of information within your blog which is really helpful for worldwide developers and they can learn and also get a solution for their technical problem . It is really good that you are giving extra time to maintaining the blog and give revert back answer to all world wide developer. Best of luck for your upcoming career.

Add Comment

Visit blogadda.com to discover Indian blogs Computers Blogs