Code Snippets

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 AspControlBoxBasecontrol 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 IGatewayControlinterface 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 PictureBoxcontrol. And what do you know - a PictureBoxalready has a Textproperty since it is derived from Control.

So, most of the work is already done. All I had to do is combine the PictureBoxcontrol with a Gateway handler. The next step is to create a WebGUI control derived from PictureBoxthat 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 PageLoadevent or after the InitializeComponent()in the constructor.)

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

A screenshot

Origenal artical here in Code Project.Com

Download Code

Note: Codes are submitted as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Terms of Agreement:
By using this code, you agree to the following terms...

1. You may use this code in your own programs (and may compile it into a program and distribute it in compiled format for languages that allow it) freely and with no charge.
2. You MAY NOT redistribute this code (for example to a web site) without written permission from the original author. Failure to do so is a violation of copyright laws.
3. You may link to this code from another website, but ONLY if it is not wrapped in a frame.
4. You will abide by any additional copyright restrictions which the author may have placed in the code or code's description.