Creating a Captcha Control – Part 1

The word CAPTCHA means “Completely Automated Public Turing to tell Computers and Humans Apart”.Captcha is commonly used in registration forms and other forms to disallow spiders and / or bots to automatically submit a form. Captcha is usually some text on an image that can be read by humans but unreadable by computers. An example image of a captcha is below.

 

Creating a captcha controls involves dynamically generating some text, converting the text into an image, passing the image to the client, pass on the text in some other format so it could be tested against. In this particular instance, I have created a captcha control through which we control properties like font size, colour, background image, character set to choose the characters from and number of characters to display. It will also control additional properties for setting text for various buttons like Test button, Reload button and success and error message. The control also contains option for reading out the text for accessibility reasons.

The control could be used like below:

Using the control

1. <uc1:CaptchaControl ID="CaptchaControl1" runat="server" TestButtonText="Try" BackgroundImagePath="~/images/captcha2.png"
2. ErrorMessage="Try Another Image" SuccessMessage="good job" CaptchaLength="10" CharacterSet="ABCDEFG123456"
3. ReLoadButtonText="Reload" FontSize="20" FontFamily="Trebuchet MS" TextColor="Blue" />

After a new project is setup in Visual Studio, a user control is added to the project. The user control simply contains an Image control for displaying captcha, a TextBox control where a user would enter text for comparison, a Label control that displays status – correct or incorrect text entered, three Button controls – one for testing the user, one for reloading the captcha text in case the text cannot be read by the user and another button for reading out the captcha text. It’s important that the text could be read out as it helps visually impaired users to enter the information.

Code for the user control is below.

User Control - aspx

1. <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CaptchaControl.ascx.cs" Inherits="CaptchaApp.CaptchaControl" %>
2. <asp:Image ID="Im1" runat="server" />
3. <asp:TextBox ID="T1" runat="server"></asp:TextBox>
4. <asp:Button ID="B1" runat="server" Text="Test" OnClick="ValidateCaptcha" />
5. <asp:Label ID="LStatus" runat="server"></asp:Label><br /><br />
6. <asp:Button ID="B2" runat="server" Text="Load Another Image" OnClick="LoadAnother" />
7. <asp:Button ID="BSpeak" runat="server" Text="Speak" OnClick="ReadCaptcha" />

As can be seen, the ImageUrl property for the Image control is not set. It will be set from code-behind.

In my next post, I will discuss how I have created the various properties of the control through the code-behind of this user control.

The source code of the captcha control can be downloaded from CodePlex  at http://captchadotnet.codeplex.com/