Encapsulate a CaptchaImage anti-spam project in a composite web control

• Download source files - 22 KB
• Download demo project - 8.86 KB

Introduction

This article continues on an existing article found on CodeProject and written by Brainjar. You'll find this project here. He proposed a good strategy to prevent web forms from spammers:

CAPTCHA stands for "completely automated public Turing test to tell computers and humans apart." What it means is, a program that can tell humans from machines using some type of generated test. A test most people can easily pass but a computer program cannot.

You've probably encountered such tests when signing up for an online email or forum account. The form might include an image of distorted text, like that seen above, which you are required to type into a text field.

The idea is to prevent spammers from using web bots to automatically post form data in order to create email accounts (for sending spam) or to submit feedback comments or guestbook entries containing spam messages. The text in the image is usually distorted to prevent the use of OCR (optical character reader) software to defeat the process. Hotmail, PayPal, Yahoo!, and a number of blog sites have employed this technique.

Purpose

What I wanted is to have a control which I could use to put on my web page, and this control should immediately prevent a form from spam.

The idea

I have written a WebControl which encapsulates:

• an image: this image is using as source "CaptchaImage.axd". This "page" is in fact an HTTP handler which will return an image in the response stream. This image contains the "anti-spam" code, and has been generated using the CaptchaImage object provided by BrainJar.
• a textbox: the user has to fill the image code in the textbox in order to ensure it is not an automated bot which is working on the form.
• a RequiredValidator: this will ensure that there is data filled in the textbox.
• a CustomValidator: it will test the text in the textbox with the anti-spam code which has been stored in session.

The Content

How to install it

1. Add a reference to the CaptchaImage assembly.
2. In the web.config file, you have two lines to add in /configuration/system.web:
1. In the ./HttpHandler section, add a reference to the handler which returns a generated CaptchaImage.

<httpHandlers>
  <add verb="GET" path="CaptchaImage.axd" 
      type="CaptchaImage.CaptchaImageHttpHandler"/>
</httpHandlers>

2. In the ./controls section, add the tag reference of the Captcha image assembly which contains the interesting web control.

<controls>
<add tagPrefix="Captcha" namespace="CaptchaImage" assembly="CaptchaImage"/>
</controls>

3. Well... it is almost done. Now, let's go to use it.

How to use it

1. Create your form to prevent from spam.
2. Drag and drop the web control which has appeared in your toolbar, or add this tag:

<Captcha:CaptchaControl runat="server" ID="captcha" />

3. Specify a ValidationGroup on your Submit button and give the same name to the ValidationGroup property of the captcha control.

ValidationGroup="Contact"

4. Another property which could be of interest is "MessageError". This will set an error message that you could get through a validation summary like in the sample project.

MessageError="An error has occured at validation of anti-spam code.
              <br/> Pleade check it in again."

5. The tag should have this appearance now:

<Captcha:CaptchaControl runat="server" ID="captcha" 
   ValidationGroup="Contact" 
   MessageError="An error has occured at validation of anti-spam code.
                 <br/> Pleade check it in again." />

6. The last step to do is to add a test in the OnClick event of your Submit button.

protected void SubmitButton_Click(object sender, EventArgs e)
{
    if (Page.IsValid) { //TO DO } 
}

Requirements

Learn about:

• Validators strategy provided by ASP.NET
• Web controls
• HttpHandler

Conclusion

HttpHandlers are a quite new logic for me, and I chose this technology mainly for the background work instead of building a web page. May be it's not done for this purpose... may be it is... but I think it's more logical to work like that when doing automated stuff.

CaptchaImage was a well built project and it was a pleasure to use it.

Greetz to

BrainJar: http://www.codeproject.com/aspnet/CaptchaImage.asp.

and every source which is provided on the net.

Sorry... as usual, for my poor English ;)