Search KB Filter article types
Captcha for Visual WebGUI by Stephanus
Categories: Skinnable and Inherited Controls, Sending dynamic content to client (Gateways), Code
Tags: Developers, Gateway, 2. Intermediate, 3. Advanced, Customization, Integration, Pre v6.3, v6.3, v6.4 and Later
Revision: 1
Posted: 09/Jan/2008
Updated: 09/Jan/2008
Status: Publish
Types: Code

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

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.


About the author

Related Articles

Skinnable and Inherited Controls  
Title Update Author
Hi everyone, I develop a simple inputbox class with some features like value checking, maximum value size, etc. It is used as the MessageBox class and you can modify it at your needs. Check the attached sample application. Regards, Scott.
Tags: Developers, 2. Intermediate, 3. Advanced, Pre v6.3, v6.3, v6.4 and Later
02/Jan/2010    2010/01/02
Tags: Developers, Data Binding, 2. Intermediate, 3. Advanced, Customization, Layouting, Pre v6.3, v6.3, v6.4 and Later
05/Jan/2009    2009/01/05
Control of a combobox with a checked list and a tree.
Tags: Developers, Navigation, 2. Intermediate, 3. Advanced, Customization, Layouting, Navigation, Pre v6.3, v6.3, v6.4 and Later
06/Jan/2008    2008/01/06
Tags: Developers, Data Binding, Windows & Dialogs, 1. Beginner, 2. Intermediate, Customization, Data Binding, Pre v6.3, v6.3, v6.4 and Later, 3. Advanced
03/Jan/2009    2009/01/03
Code snippet for custom Drag&Drop image
Tags: Developers, Drag & Drop, Resource Handlers, C#, XSLT, 2. Intermediate, 3. Advanced, Customization, DHTML, v6.4 and Later
08/June/2011    2011/06/08
Extended ListView Enhancements - from Webcast conducted on May 5th & 6th 2010 Requires v6.4 beta2e and above and MS Visual Studio 2008
Tags: Developers, Data Binding, 2. Intermediate, 3. Advanced, Customization, Data Binding, v6.4 and Later
05/Jan/2010    2010/01/05
.NET Web, Cloud and Mobile application delivery platform | Sitemap | Terms of Use | Privacy Statement | Copyright © 2005-2011 Visual WebGui®       Visual WebGui weblog on ASP.NET Visual WebGui Group on LinkedIn Visual WebGui updates on Twitter Visual WebGui Page on Facebook Visual WebGui YouTube Channel Visual WebGui Platform News RSS