Click here to Skip to main content
15,867,308 members
Articles / Web Development / ASP.NET
Article

A CAPTCHA Control for ASP.NET 2

Rate me:
Please Sign up or sign in to vote.
4.86/5 (55 votes)
14 Mar 2008LGPL35 min read 357.6K   5.6K   174   67
A CAPTCHA control that is simple, secure, and easy to use.

Note: A new version of this control is available here. All further updates to the control are posted to the project's page on SourceForge.net.

Sample Image - CaptchaNET_2.gif

Introduction

CAPTCHA is short for "completely automated public Turing test to tell computers and humans apart", and is the most popular technique used to prevent computer programs from sending automated requests to Web servers. These can be for meta-searching search engines, doing dictionary attacks in login pages, or sending spam using mail servers. You might have seen CAPTCHA images in the Google register page when you do availability check on too many usernames, or in Yahoo!, PayPal, or other big Web sites.

Sources

The first CAPTCHA image generator I used was written using the CAPTCHA Image article by BrainJar. After that, I read the MSDN HIP challenge article and made many changes to my code. The code used in this control is based on the MSDN HIP article, but some parts are not changed.

How It Works

  • Captcha.ascx is the control file. When loaded, it calls the SetCaptcha() method. This method does everything needed, using other classes.
  • RandomText class generates cryptographically-strong random texts.
  • RNG class generates cryptographically-strong random numbers.
  • CaptchaImage class creates the image.
  • Encryptor class is used for encryption and decryption.
  • Captcha.ashx returns the image.

We will discuss some of them later in this article.

The Control

The main method in the control code is SetCaptcha() which is executed whenever we need to change the picture or load it.

C#
private void SetCaptcha()
{
    // Set image
    string s = RandomText.Generate();

    // Encrypt
    string ens = Encryptor.Encrypt(s, "srgerg$%^bg",
                 Convert.FromBase64String("srfjuoxp"));

    // Save to session
    Session["captcha"] = s.ToLower();

    // Set URL
    imgCaptcha.ImageUrl = "~/Captcha.ashx?w=305&h=92&c=" +
                          ens + "&bc=" + color;
}

This encrypts a random text using an encryption key which is hard-coded in this code. To prevent hard coding, you can store this information in the database and retrieve it when needed. This method also saves text to the session for comparison with user input.

To make the control style match with the page style, there are two properties used:

  • Style
  • Background color

The Style property sets the control style and the background color sets the background color for the generated image.

Two event handlers handle the Success and Failure events. We use a delegate for these handlers.

C#
public delegate void CaptchaEventHandler();

When the user submits the form, btnSubmit_Click() validates the user input.

C#
protected void btnSubmit_Click(object s, EventArgs e)
{
    if (Session["captcha"] != null && txtCaptcha.Text.ToLower() ==
    Session["captcha"].ToString())
    {
        if (success != null)
        {
            success();
        }
    }
    else
    {
        txtCaptcha.Text = "";
        SetCaptcha();

        if (failure != null)
        {
            failure();
        }
    }
}

RNG Class

The RNG class generates cryptographically-strong random numbers, using the RNGCryptoServiceProvider class.

C#
public static class RNG
{
    private static byte[] randb = new byte[4];
    private static RNGCryptoServiceProvider rand
                   = new RNGCryptoServiceProvider();

    public static int Next()
    {
        rand.GetBytes(randb);
        int value = BitConverter.ToInt32(randb, 0);
        if (value < 0) value = -value;
        return value;
    }
    public static int Next(int max)
    {
        // ...
    }
    public static int Next(int min, int max)
    {
        // ...
    }
}

RandomText Class

To create a cryptographically-strong random text, we use the RNG class to randomly select each character from the array of characters. This is a very useful technique I first saw in the CryptoPasswordGenerator.

C#
public static class RandomText
{
    public static string Generate()
    {
        // Generate random text
        string s = "";
        char[] chars = "abcdefghijklmnopqrstuvw".ToCharArray() +
                       "xyzABCDEFGHIJKLMNOPQRSTUV".ToCharArray() +
                       "WXYZ0123456789".ToCharArray();
        int index;
        int lenght = RNG.Next(4, 6);
        for (int i = 0; i < lenght; i++)
        {
            index = RNG.Next(chars.Length - 1);
            s += chars[index].ToString();
        }
        return s;
    }
}

CaptchaImage Class

This is the heart of our control. It gets the image text, dimensions, and background color, and generates the image.

The main method is GenerateImage() which generates the image using the information we provide.

C#
private void GenerateImage()
{
    // Create a new 32-bit bitmap image.
    Bitmap bitmap = new Bitmap(this.width, this.height,
        PixelFormat.Format32bppArgb);

    // Create a graphics object for drawing.
    Graphics g = Graphics.FromImage(bitmap);
    Rectangle rect = new Rectangle(0, 0, this.width, this.height);
    g.SmoothingMode = SmoothingMode.AntiAlias;

    // Fill background
    using (SolidBrush b = new SolidBrush(bc))
    {
        g.FillRectangle(b, rect);
    }

First, we declare Bitmap and Graphics objects, and a Rectangle whose dimensions are the same as the Bitmap object. Then, using a SolidBrush, we fill the background.

Now, we need to set the font size to fit within the image. The font family is chosen randomly from the fonts family collection.

C#
// Set up the text font.
int emSize = (int)(this.width * 2 / text.Length);
FontFamily family = fonts[RNG.Next(fonts.Length - 1)];
Font font = new Font(family, emSize);

// Adjust the font size until
// the text fits within the image.
SizeF measured = new SizeF(0, 0);
SizeF workingSize = new SizeF(this.width, this.height);

while (emSize > 2 &&
      (measured = g.MeasureString(text, font)).Width
       > workingSize.Width || measured.Height
       > workingSize.Height)
{
    font.Dispose();
    font = new Font(family, emSize -= 2);
}

We calculate a size for the font by multiplying the image width by 2 and then dividing it by the text length. It works well in most cases; for example, when the text length is 4 and the width is 8 pixels, the font size would be 4. But if the text length is 1, the font size would be 16. Also, when the image height is too short, the text will not fit within the image. When the calculated size is less than 2, we can be sure that it fits within the image except when the image height is very short, which we don't pay attention to. But when it is bigger than 2, we must make sure that the text fits within the image. We do that by getting the width and height the text needs for the selected font and size. If the width or height doesn't fit, then we reduce the size and check again and again till it fits.

The next step would be adding the text. It is done using a GraphicsPath object.

C#
GraphicsPath path = new GraphicsPath();
path.AddString(this.text, font.FontFamily,
        (int)font.Style, font.Size, rect, format);

The most important part is colorizing and distorting the text. We set the text color using RGB codes, each one using a random value between 0 and 255. A random color is then generated successfully. Now, we must check if the color is visible within the background color. It's done by calculating the difference between the text color R channel and the background color R channel. If it is less than 20, we regenerate the R channel value.

C#
// Set font color to a color that is visible within background color
int bcR = Convert.ToInt32(bc.R);
int red = random.Next(256), green = random.Next(256), blue =
    random.Next(256);
// This prevents font color from being near the bg color
while (red >= bcR && red - 20 < bcR ||
    red < bcR && red + 20 > bcR)
{
    red = random.Next(0, 255);
}
SolidBrush sBrush = new SolidBrush(Color.FromArgb(red, green, blue));
g.FillPath(sBrush, path);

Lastly, we distort the image by changing the pixel colors. For each pixel, we select a random picture from the original picture (the Bitmap object which we don't change) and set a random pixel color for it. Since distort is random, we see different distortions.

C#
// Iterate over every pixel
double distort = random.Next(5, 20) * (random.Next(10) == 1 ? 1 : -1);

// Copy the image so that we're always using the original for
// source color
using (Bitmap copy = (Bitmap)bitmap.Clone())
{
    for (int y = 0; y < height; y++)
    {
        for (int x = 0; x < width; x++)
        {
            // Adds a simple wave

            int newX =
              (int)(x + (distort * Math.Sin(Math.PI * y / 84.0)));
            int newY =
              (int)(y + (distort * Math.Cos(Math.PI * x / 44.0)));
            if (newX < 0 || newX >= width)
                newX = 0;
            if (newY < 0 || newY >= height)
                newY = 0;
            bitmap.SetPixel(x, y,
            copy.GetPixel(newX, newY));
        }
    }
}

Captcha.ashx

This HTTP handler gets the information needed to create a CAPTCHA image, and returns one. Note that this handler receives the encrypted text and has the key to decrypt it.

C#
public class Captcha : IHttpHandler
{
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "image/jpeg";
        context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
        context.Response.BufferOutput = false;

        // Get text
        string s = "No Text";
        if (context.Request.QueryString["c"] != null &&
            context.Request.QueryString["c"] != "")
        {
            string enc = context.Request.QueryString["c"].ToString();

            // space was replaced with + to prevent error
            enc = enc.Replace(" ", "+");
            try
            {
                s = Encryptor.Decrypt(enc, "srgerg$%^bg",
            Convert.FromBase64String("srfjuoxp"));
            }
            catch { }
        }
        // Get dimensions
        int w = 120;
        int h = 50;
        // Width
        if (context.Request.QueryString["w"] != null &&

            context.Request.QueryString["w"] != "")
        {
            try
            {
                w = Convert.ToInt32(context.Request.QueryString["w"]);
            }
            catch { }
        }
        // Height
        if (context.Request.QueryString["h"] != null &&
            context.Request.QueryString["h"] != "")
        {
            try
            {
                h = Convert.ToInt32(context.Request.QueryString["h"]);
            }
            catch { }
        }
        // Color
        Color Bc = Color.White;
        if (context.Request.QueryString["bc"] != null &&

            context.Request.QueryString["bc"] != "")
        {
            try
            {
                string bc = context.Request.QueryString["bc"].
            ToString().Insert(0, "#");
                Bc = ColorTranslator.FromHtml(bc);
            }
            catch { }
        }
        // Generate image
        CaptchaImage ci = new CaptchaImage(s, Bc, w, h);

        // Return
        ci.Image.Save(context.Response.OutputStream, ImageFormat.Jpeg);
        // Dispose
        ci.Dispose();
    }

    public bool IsReusable
    {
        get
        {
            return true;
        }
    }
}

There are only two points to be noted about this class:

  1. Since in a URL, '+' means space, we replace a space with '+' (for encrypted text).
  2. Using # in the URL causes problems. We don't send # with the color value. For example, when color is #ffffff, we send ffffff and then add # in the handler.

Summary

When the control loads, it executes the SetCaptcha() method. The RandomText class generates a random text, and we save the text to the Session object and encrypt it. This method then generates the image URL using the dimensions, the encrypted text, and the background color information.

You may see an example of using this control in the source code.

License

This article, along with any associated source code and files, is licensed under The GNU Lesser General Public License (LGPLv3)


Written By
Australia Australia
I'm a Computer Science student at Monash University, Australia.

See my blog at http://blog.farshidzavareh.com

Comments and Discussions

 
GeneralMy vote of 5 Pin
King Coffee17-Aug-13 10:52
King Coffee17-Aug-13 10:52 
GeneralMy vote of 5 Pin
Mohammad Barari10-Jan-12 5:55
professionalMohammad Barari10-Jan-12 5:55 
Generaltoo good.. Pin
GPUToaster™29-Oct-10 2:06
GPUToaster™29-Oct-10 2:06 
GeneralMy vote of 5 Pin
mahdikiani19-Jul-10 19:37
mahdikiani19-Jul-10 19:37 
GeneralNew CAPTCHA Idea Pin
Ali Hamdar27-Mar-10 11:14
Ali Hamdar27-Mar-10 11:14 
GeneralNice Simple Captcha Implementation Pin
Satyanand_kv21-Oct-08 3:34
Satyanand_kv21-Oct-08 3:34 
GeneralNewbie Tutorial [modified] Pin
princerc2-Sep-08 8:45
princerc2-Sep-08 8:45 
GeneralAdding Antialiasing Pin
Waleed Eissa16-Jul-08 6:34
Waleed Eissa16-Jul-08 6:34 
GeneralRe: Adding Antialiasing Pin
Waleed Eissa16-Jul-08 7:29
Waleed Eissa16-Jul-08 7:29 
GeneralHandler while using IIS problem Pin
zirosman27-Apr-08 3:38
zirosman27-Apr-08 3:38 
Hello,
Thanks for this control !

Hope someone can help me:
I have a TestCaptcha website. when I'm usingthe built in VS Development webserver all the handlers working ok. [I see the images for the Captcha Image and the accsibilty audio]

after I moved to an IIS webserver [not the built in] the images not showing

hope for any help.

TIA
GeneralRe: Handler while using IIS problem Pin
zirosman27-Apr-08 19:14
zirosman27-Apr-08 19:14 
GeneralRe: Handler while using IIS problem Pin
Peter1000019-Mar-09 7:52
Peter1000019-Mar-09 7:52 
GeneralNice implementation of this captcha Pin
CoolVini6-Mar-08 4:24
CoolVini6-Mar-08 4:24 
GeneralRe: Nice implementation of this captcha Pin
Farshid Zavareh13-Mar-08 22:37
Farshid Zavareh13-Mar-08 22:37 
GeneralRe: Nice implementation of this captcha Pin
CoolVini14-Mar-08 0:52
CoolVini14-Mar-08 0:52 
GeneralRe: Nice implementation of this captcha Pin
Farshid Zavareh14-Mar-08 1:49
Farshid Zavareh14-Mar-08 1:49 
GeneralRe: Nice implementation of this captcha Pin
CoolVini14-Mar-08 2:03
CoolVini14-Mar-08 2:03 
GeneralRe: Nice implementation of this captcha Pin
Farshid Zavareh14-Mar-08 3:35
Farshid Zavareh14-Mar-08 3:35 
GeneralRe: Nice implementation of this captcha Pin
CoolVini14-Mar-08 3:50
CoolVini14-Mar-08 3:50 
GeneralRe: Nice implementation of this captcha Pin
Farshid Zavareh14-Mar-08 4:12
Farshid Zavareh14-Mar-08 4:12 
GeneralQuestions and comments Pin
jmcunningham27-Nov-07 4:31
jmcunningham27-Nov-07 4:31 
GeneralRe: Questions and comments Pin
Farshid Zavareh13-Mar-08 22:13
Farshid Zavareh13-Mar-08 22:13 
QuestionDoes anyone have this in VB Pin
SirNathaniel1-Aug-07 1:38
SirNathaniel1-Aug-07 1:38 
GeneralDon’t put too much faith in CAPTCHAs in general Pin
JoelMMCC26-Jun-07 11:37
JoelMMCC26-Jun-07 11:37 
GeneralRe: Don&#8217;t put too much faith in CAPTCHAs in general Pin
Farshid Zavareh27-Jun-07 2:58
Farshid Zavareh27-Jun-07 2:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.