Create a Captcha for Visual WebGUI

Introduction

I am currently developing a system using Visual WebGUI and C# as the programming language. For more info on Visual WebGUI (WGX), click here. I needed a mechanism to verify that the registration to the website was done by humans and not by some spam bot or script. That is what captcha's are for.

The problem

The problem is that I could not find any existing captcha's for Visual WebGUI. I had two options:

1. Use the AspControlBoxBase control to embed an existing ASP page onto my Form/Page.
2. To develop a Visual WebGUI control.

As a real techie, for various reasons (mainly because I thought it would be tough and a challenge), I opted for option 2.

More about Captchas

On CodeProject, I found this article that explains more about captcha's. In essence, the captcha is a matrix of pixels of scrambled text that makes it very difficult to use some OCRs to extract the text from the image. A captcha is a whole science on its own. Some are very complex, with special features for visually impaired people, with text to speech converters. But, that is not the focus of this article.

In short, we need something that will convert a text to a captcha image.

A WGX gateway handler

First, I did a bit of searching on WGX controls, and found this article about developing Visual WGX gateway handlers, and I decided to combine the use of gateways with WGX controls.

A gateway handler is a clever way for classes and controls to handle their own HTTP responses to the browsers. HTTP handlers can respond to any kind of data to the browsers - HTML, XML, or even binary image/bitmap data, to browsers, in a contained manner.

A gateway handle can be created by implementing the IGatewayControl interface in your class

IGatewayHandler IGatewayControl.GetGatewayHandler(IContext objContext, 
                                                  string strAction)
{
  //here we write html or data to HttpContext.Current.
  //     Response.OutputStream that wil end up in the browser
}

A WGX control

Since the capthca is a scrambled image converted from some text, I decided to make a new control, and derive it from an existing WGX PictureBox control. And what do you know - a PictureBox already has a Text property since it is derived from Control.

So, most of the work is already done. All I had to do is combine the PictureBox control with a Gateway handler. The next step is to create a WebGUI control derived from PictureBox that implements a IGatewayControl.

public class Captcha : PictureBox, IGatewayControl
{
    public void RenderImage()
    {
        //this is called to render the image based 
        //on the Text property of the control
    }
}

The new control

This is the class we end up with. Surprisingly, very, very simple.

public class Captcha : PictureBox, IGatewayControl
{
    public Captcha()
    {
    }

    public void RenderImage()
    {                       
        this.Image = new GatewayResourceHandle(new GatewayReference(this, "image"));
        // img.Image;
        this.Update();
    }        

    IGatewayHandler IGatewayControl.GetGatewayHandler(IContext objContext, 
                                                      string strAction)
    {
        CaptchaImage img = new CaptchaImage(this.Text, this.Width, this.Height);
        img.Image.Save(HttpContext.Current.Response.OutputStream, 
                       System.Drawing.Imaging.ImageFormat.Jpeg);
        return null;
    }
}

How do we use it

Add the captcha control code to your project and compile your project. Once you compile your project, the captcha will appear in the Visual Studio control toolbox.

Drag the control onto your form. Then, change the height and width as you please.

In order to update and refresh the Captcha image, call the function below. (Remember to call it from the PageLoad event or after the InitializeComponent() in the constructor.)

private void SetCapthca()
{
    captchaMain.Text = "vn0y8";//or some other sandom text generator
    captchaMain.RenderImage();
}

A screenshot

This will show a scrambled image of the control's Text property in the control: