Live person verification

Robots that harvest site contact pages to send spam mail are such a pain. Verification of the existence of a live person at the client end is of paramount importance these days to protect one from being inundated with unwanted advertisments for "growing formula" and other such stuff.

Creating such a system for your own site is a fairly simple matter and can be accomplished by mixing a little GDI+ knowledge with some simple ASP.Net to create a "capcha" style obfuscated word code that the user must recognize and duplicate before continuing.

Just for fun, I created such a system for my own contact form but, in the interests of sharing and to explain another simple principle, that of creating images on the fly from your server, I will reveal all here.

Play the joker

I wanted to have a system that the user has to recognize a few letters and which would be difficult for an OCR style image reader to get. Just to make sure that the system was really really obfuscated, I also wanted to change the resulting text to make it night on impossible to read by machine.

A lovely font for this thing i Jokerman as it already has a nicely obfuscated glyph outline but, to serve my paranoia, I added a little "je ne sais quoi" of my own by reversing the text and background colour in places.

On the fly images

The principle of generating on the fly images is fairly simple. You can create an ASPX page or component that returns an image in the content stream, then, when the request happens, just create the image using GDI+.

I created a simple ASPX page called genimage.aspx which has the following markup. You see the simplicity...

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="genimg.aspx.cs" Inherits="genimg" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<div>

</div>

</form>

</body>

</html>

Essentially, it does nothing!

Then, in the codebehind I created the bit that generates the image...

public partial class genimg : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

Response.ContentType = "image/jpeg";

Bitmap bm = new Bitmap(200, 120, PixelFormat.Format24bppRgb);

Graphics g = Graphics.FromImage(bm);

//DRAWING HAPPENS HERE!

gp.Dispose();

g.Dispose();

pc.Dispose();

bm.Save(Response.OutputStream, ImageFormat.Jpeg);

}

You can see that the idea of creating that image is simplicity itself. You can draw whatever you like on it using all the techniques of GDI+ so any amount of lovely images, transparent objects, whatever!

For my own purposes I created a random string of characters, drew the text in the Jokerman font, asses a path to mess up the image just enough to upset any attempt at OCR and returned the result. Here is the full code:

public partial class genimg : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

Random rnd = new Random((int)DateTime.Now.Ticks);

Response.ContentType = "image/jpeg";

StringBuilder sb = new StringBuilder();

for (int n = 0; n < 3; n++)

{

sb.Append((char)(rnd.Next(26) + 0x41));

}

Bitmap bm = new Bitmap(200, 120, PixelFormat.Format24bppRgb);

Graphics g = Graphics.FromImage(bm);

g.Clear(Color.White);

GraphicsPath gp = new GraphicsPath();

PrivateFontCollection pc = new PrivateFontCollection();

pc.AddFontFile(Server.MapPath("Bin")+"\\JOKERMAN.TTF");

Session["currlets"] = sb.ToString();

gp.AddString(sb.ToString(), pc.Families[0], 0, 72, new Rectangle(0,0,200,120), StringFormat.GenericTypographic);

gp.AddLine(new Point(0, 50), new Point(200, 60));

gp.AddLine(new Point(0, 78), new Point(200, 40));

g.FillPath(Brushes.Black, gp);

gp.Dispose();

g.Dispose();

pc.Dispose();

bm.Save(Response.OutputStream, ImageFormat.Jpeg);

}

You will note that the TTF font file is stored in the site someplace. The image returned looks a bit like this:

Session data

To enable the consuming page to allow the user to type in the character sequence, the code stores the randomly generated string in the session variable "currlets" for "current letters". All one needs to do then is to check the contents of an input box with the content of that session variable and there you have it. A simple live person verification object.

The code that makes it all work on the consuming page is shown below.

<asp:Image runat="server" ImageUrl="~/genimg.aspx" style="border-style:groove; border-color:DarkGreen;"/>

<p>What letters do you see in the image above?</p><asp:TextBox

ID="confirmcode" runat="server" /><br /><br /><asp:Button runat="server" OnClick="OnSubmitClick" Text="Send mail" />

&nbsp<asp:Button runat="server" OnClick="OnClearClick" Text="Clear form" />

This generates an image, a verification textbox, a "submit" button and a "Clear Form" button. The codebehind manages the submit button in the following manner:

if ((Session["currlets"] != null) && ((string)Session["currlets"] == this.confirmcode.Text.ToUpper()))

{

// DO THE WORK HERE

}

Summary

So, creating a live person verification system is based upon the creation of an image on the fly using GDI+, the creation of a simple letter code which is stored in the session variables and the checking of that data against the contents of a text box.