Word Verification: How to have one for your site

[Vaughn]

Word Verification: How to have one for your site

Introduction
You must have come across several sites where user authentication is required to differentiate robots from humans. The most popular technique used on the internet these days is the word verification. In this article IÂ’ll demonstrate in ASP how you can have one for your own site.

The basic principle this technique operates upon is very simple, generate a random string (maybe get one from a dictionary), distort it visually and display it in a manner that robots can’t understand. We’re going to do exactly the same except we have one problem; ASP does not have any basic image manipulation capabilities. So how are we going to accomplish this? We’ll have to take help of an imaging component. There are lots of commercial components available on the internet that can do this for us and much more, but we are going to use a free component called ‘DynImage’ written by Chris Ashton (Thanks Chris!). This component also has many features and it will get our job done. You can get more information about this component including its documentation from the below URL:

http://www.oz.net/~cashton/dynimage.html

We already have this component installed on all our windows servers.

This is a bit lengthy tutorial, thus, I have divided it into the below seven sections:

1. Hello World!
2. Drawing the text.
3. Creating the form.
4. Specifying the string.
5. Validating userÂ’s input.
6. Randomizing the string.
7. Obfuscating the string.

So letÂ’s begin!

[Vaughn]

1) Hello World!

First of all let’s test this component with a simple ‘hello world’ test. Create an ASP page called ‘HelloWorld.asp’ and write the below code in it:

<%@Language=VBScript%>
<%
Set oDynImage = CreateObject("DynImage.DynImage")

oDynImage.Open 150, 50
oDynImage.FontSize = 24
oDynImage.TextOut 20, 10, "Hello World!"

Response.ContentType = "image/png"
Response.BinaryWrite oDynImage.Image
oDynImage.Close

Set oDynImage = Nothing
%>

Save the page and view it via your browser. You should see something like the image below:


Click here to check this in action!

Looks good, letÂ’s go through the code.

Set oDynImage = CreateObject("DynImage.DynImage")

Create the object.

oDynImage.Open 150, 50

Create a blank image of size 150 by 50

oDynImage.FontSize = 24

Set the size of the font to 24 points

oDynImage.TextOut 20, 10, "Hello World!"

Render our text.

Response.ContentType = "image/png"

Set the ContentType to a png image

Response.BinaryWrite oDynImage.Image

Render the Image.

oDynImage.Close

Close the object.

Set oDynImage = Nothing

Release memory.

Note: If you have noticed, I have not generated any HTML tags in the above example. This is because the output of the above code is a png image.

Now that we have a fair idea of how this component works, letÂ’s start working on our main concept. To begin with, we will create a form that will draw the image, ask the user to enter the string and then validate it.

[Vaughn]

2) Drawing the text

We will be using similar code as I mentioned in the example, except, the method will be slightly different. For ease of use, we will separate the form processing code and image generation code in two separate files. We will create an ASP file to generate the image and then ‘insert’ that image into our form at run time. The code to generate the image is as below, save it in a file called ‘genImage.asp':

<%@Language=VBScript%>
<%
Dim strWord
Dim intImageWidth
Dim intImageHeight
Dim oDynImage

strWord = "12345"
intImageWidth = 300
intImageHeight = 150

Set oDynImage = CreateObject("DynImage.DynImage")
With oDynImage
	.Open intImageWidth, intImageHeight

	.FontFace = "Arial"
	.FontWeight = 800
	.FontSize = 48
	.TextAlign = 5
	.TextOut (intImageWidth/2), (intImageHeight/2), strWord

	Response.ContentType = "image/png"
	Response.BinaryWrite .Image

	.Close
End With
Set oDynImage = Nothing
%>

The code is quite similar to what we saw earlier with a few additions. I’ve set the font face, weight size and alignment properties. For now it just draws the string ‘12345’ in the exact center of the image. We’ll replace it a string of our choice later. When browsed it will display the below image:

[Vaughn]

3) Creating the form.

Time to create the form! We will create a simple form that collects the string from the user and submits it back to the same page. Create a page called 'default.asp' (as in future, we want this page to be the default page of this directory) and insert the below code in it:

<%@Language=VBScript%>
<% Option Explicit %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Word Verification</title>
</head>

<body>
<form id="frmWord" name="frmWord" method="post" action="default.asp">
 Â* Â* Enter the text in the image above.<br />
 Â* Â* <input name="txtWord" type="text" />
 Â* Â* <br />
 Â* Â* <br />
 Â* Â* <input type="submit" name="Submit" value="Submit" />
</form>
</body>
</html>

Quite simple code, nothing unusual here. Try entering some string and submitting the form. You will be returned to the same page.

Now we will ‘insert’ the image generated by our ‘genImage.asp’ in this form. Add the below code right after the <body> tag.

<%
Response.Write("<img src=" & Chr(34) & "genImage.asp" & Chr(34) & "/>")
%>
<br />
<br />

As you can see we are using the ASP page as the image itself. But will it work? Save the file and find out for yourself. You should get results as below:


Check your code here:
default.asp

[Vaughn]

4) Specifying the string

Up till now the ‘genImage.asp’ page has been drawing the string ‘12345’ as it was hard-coded. Now, we will tell it what string to draw via our form using a QueryString parameter, so that we can validate it with the user’s input later.

i) Add the below code after the <% Option Explicit %> statement:

<%
Dim strWord

strWord = "Hello!"
%>

ii) Modify our ‘Response.Write’ statement which inserts the image, as below and save the page:

Response.Write("<img src=" & Chr(34) & "genImage.asp?String=" & strWord & Chr(34) & "/>")

At this point, your code should look like this:
default.asp

If you submit or refresh the form, there will be no change in way the form behaves, simply because we have not modified the ‘genImage.asp’ to draw the string which it has been passed.

iii) Open ‘genImage.asp’ and replace the below line…:

strWord = "12345"

Â…with the below two:

strWord = Request.QueryString("String")
If Len(Trim(strWord)) = 0 Then strWord = "?????"

At this point, your code should look like this:
genImage.asp

Save the page and refresh your form, you should see the new string now.

[Vaughn]

5) Validating userÂ’s input.

Now that our user can see our string letÂ’s validate his/her input. Open the 'default.asp' file.

1) Add the below variable declaration:

Dim strResult

ii) Add the below code right after the ‘strWord = "Hello!"’ statement:

If Request.ServerVariables("REQUEST_METHOD") = "POST" Then
	If strWord = Trim(CStr(Request.Form("txtWord"))) Then
 Â*strResult = "Yes"
	Else
 Â*strResult = "No"	
	End If
End If
Session("Word") = strWord

iv) And add the below code after the </form> tag.

<h4>Word Verified? <%=strResult%></h4>

At this point, your code should look like this:
default.asp

Save the form and test it. If you enter the string ‘Hello!’ you will see ‘Yes’ after ‘Word Verified?’, ‘No’ otherwise.

[Vaughn]

6) Randomizing the string

Now that we are done validating the input, letÂ’s randomize our string. As I mentioned earlier on, you can either get words from a dictionary or make a random string. WeÂ’ll be using a random string generator. I found a very good function on the internet to accomplish this, some time ago. WeÂ’ll save this function in a ASP file and then include it in the pages where we want to call this function.

Create a new ASP file called ‘Functions.asp’, paste the below in it and save it. The full code listing is as below:

<%
Function RndStringGen(str_lenght, str_whatcase, str_numberbias) 'define function and passed parameters
'What Case
'0=All lower case
'1=All Upper case
'2=Random Mixure

Dim str_counter
Dim str_chracters
Dim str_chracters_final

'Check validity of passed parameters
If Len(str_lenght) = 0 Or IsNumeric(str_lenght) = False Then str_lenght = 10 End If
	str_lenght = CLng(str_lenght)
	If str_lenght < 1 Or str_lenght > 1000 Then str_lenght = 10 End If
	If Len(str_numberbias) = 0 Or IsNumeric(str_numberbias) = False Then str_numberbias = 5 End If
	str_numberbias = CSng(str_numberbias)
	If str_numberbias < 0 Or str_numberbias > 10 Then str_numberbias = 5 End If
	str_numberbias = str_numberbias / 10 'make to value below 1 so it is of the same magnatude as the random string

	'create string using a Do Loop
	str_counter = 0
	
	Do Until str_counter = str_lenght
 Â*Randomize
 Â*If rnd < str_numberbias Then 'work out which statement to do
 Â*	Randomize
 Â*	str_chracters = str_chracters & Chr((((57 - 48) * rnd) + 48)) 'numeric characters
 Â*Else
 Â*	Randomize
 Â*	str_chracters = str_chracters & Chr((((122 - 97) * rnd) + 97)) 'alpha characters
 Â*End If
	
 Â*str_counter = CInt(str_counter) + 1
	Loop

'-------------------------------------------------
	
	If str_whatcase = 1 Then 'make all alpha characters upper case
 Â*str_chracters_final = UCase(str_chracters)
	ElseIf str_whatcase = 2 Then 'random chance of upper case / lower case
 Â*For i = 1 to Len(str_chracters)
 Â*	j = Mid(str_chracters, i, 1) 'next character in the string
 Â*	Randomize
 Â*	If rnd < 0.5 Then '50% change of being each case - ignored if not alpha
 Â* Â*j = UCase(j)
 Â*	Else
 Â* Â*j = LCase(j)
 Â*	End If
 Â*	str_chracters_mixed = str_chracters_mixed & j 'add the character to the string
 Â*Next
 Â*str_chracters_final = str_chracters_mixed
	Else 'default action - Lower case
 Â*str_chracters_final = LCase(str_chracters)
	End If

	RndStringGen = str_chracters_final
End Function
%>

Now, weÂ’ll call this function in our form.

i) Add the below line, right after the ‘<% Option Explicit %>’ statement:

<!-- #include file = "Functions.asp" -->

ii) Replace the statement ‘strWord = "Hello!"’ with the below one:

strWord = Session("Word")

iii) Add the below two line, right after your 'End If' block.

strWord = RndStringGen(5, 1, 0)

At this point, your code should look like this:
default.asp

Now, each time the form will be refreshed, a random string will be generated. Save the form and test it.

[Vaughn]

7) Obfuscating the string.

WeÂ’re almost there. Now that most of the important stuff is taken care of, we can add some code to obfuscate our text. For this, weÂ’ll simply draw each character at an alternate angle and then draw a few random lines on our text; that ought to confuse the robots.

Up till now, we were using a single ‘TextOut’ statement to draw our text. But now as we need to draw each character at a separate angle, we will need one ‘TextOut’ statement for a character each. We’ll add a simple ‘For Next’ loop to accomplish this. The logic will be simple, if the position of character from left is odd the character will be drawn at a degree of -25 degree (or any of your choice) and at 25 degree if even. We will also add a little space between characters.

If you have noticed, we were drawing the text right in the middle of our image by aligning it horizontally and vertically using the ‘TextAlign’ property of the component. As we will be drawing individual characters, we will have to write appropriate code to ensure that the characters are aligned in the middle, we will use the ‘TextAlign’ property to take care of its vertical alignment. We will need to calculate the starting point of each character.

For getting the pixel to draw the first character, weÂ’ll do the below:
(a.) Calculate the total width of the string using the ‘TextWidth’ method. Let’s say we have five characters and we get a width of approx 100 points.
(b.) Add a fixed space between two characters. The total space will be the space multiplied by the total number of characters less one. So if we have space fixed at 10 points and if we have 5 characters then the total width required for space will be as below:
10 * (5 - 1) = 40
(c.) Add (a.) + (b.) and subtract it from the width of the image, weÂ’ll get the free unused space. For our example, assuming the width of the image as 300...
300 - (100 + 40) = 160
(d.) Divide (c.) by 2 and add 1 to it, weÂ’ll get the location of horizontal pixel where we can draw our first character. Continuing our example calculation will be as below:
(160 / 2) + 1 = 81

Now that we have got the pixel to draw our first character, we can calculate the points of the rest of the characters based on it. Why do we need to get the point to draw each character? We can simply get the next point of each character with little math. The problem is each character will have separate widths. Thus, the position of the next character will depend on the width and position of the preceding character.

The next draw point will be an addition of the below:
(a.) Starting draw point
(b.) Width of the current characters drawn
(c.) Space determined to keep between characters multiplied by number of characters drawn.

I hope the logic is clear at this point. LetÂ’s edit the code to reflect the above.

i) Open the ‘genImage.asp’ and add the below declarations:

Dim intCounter
Dim intStringLen
Dim intStringWidth
Dim intSpaceBetweenChars
Dim intStartDrawPoint
Dim intNextDrawPoint

ii) Add the below statement after the ‘intImageHeight = 150’ statement:

intStringLen = Len(strWord)
intSpaceBetweenChars = 10

iii) Remove the below statements:

.TextAlign = 5
.TextOut (intImageWidth/2), (intImageHeight/2), strWord

iv) Add the below code in its place

.TextAlign = 4

intStringWidth = .TextWidth(strWord)
intStartDrawPoint = ((intImageWidth - (intStringWidth + (intSpaceBetweenChars * (intStringLen - 1)))) / 2) + 1
intNextDrawPoint = intStartDrawPoint
For intCounter = 1 To intStringLen
	.TextOut intNextDrawPoint, (intImageHeight/2), Mid(strWord, intCounter, 1)
 Â*intNextDrawPoint = intDeviation + intStartDrawPoint + .TextWidth(Left(strWord, intCounter)) + (intSpaceBetweenChars * intCounter)
Next

Save the page and check it via your browser. YouÂ’ll see a random string of five characters drawn on the image with equal space in between.

Now, letÂ’s draw each character at an alternate angel. If the number of character is even weÂ’ll draw it at an angle of 25 degrees, -25 otherwise.

iv) Add the below code right after the ‘For intCounter = 1 To intStringLen’ statement:

If intCounter Mod 2 = 0 Then
	.FontAngle = 25
Else
	.FontAngle = -25
End If

Save the page and refresh it. Each character will be drawn at an alternate angle as we expected but the characters seem to overlap each other. WeÂ’ll need to adjust the horizontal space by little.

v) Add the below declaration.

Dim intDeviation

vi) Replace the code we added in the last step (iv) with the one below:

If intCounter Mod 2 = 0 Then
	.FontAngle = 25
	intDeviation = 15
Else
	.FontAngle = -25
	intDeviation = -15
End If

Save and execute the page, the spacing between the characters should not be approximately equal.

Let’s draw a few random lines over our string. We will be using the same ‘RndStringGen’ function to get line co-ordinates.

vii) Add the below statement right after the ‘<%@Language=VBScript%>’ statement:

<!-- #include file = "Functions.asp" -->

viii) Add the below declaration:

Dim intNumberofLines

ix) Add the below statement after ‘intSpaceBetweenChars = 10’:

intNumberofLines = 5

x) Finally, add the below code right after the end of our ‘For Next’ loop:

.Color = &hFFCC33
.LineWidth = 4
For intCounter = 1 to intNumberofLines
	.Line RndStringGen(2, 0, 10), RndStringGen(2, 0, 10), RndStringGen(3, 8, 10), RndStringGen(3, 8, 10)
Next

Save the page and test it.

At this point, your code should look like this:
genImage.asp

WeÂ’re done! The final product can be checked at the below URL:
http://vaughn.accuwebhosting.biz/Captchaasp/

I hope you found this tutorial useful. Your questions/comments/suggestions are most welcome at vaughn[at]accuwebhosting.com

Cheers!

[Manuel_]

Hi,

Check the User validation section:

If Request.ServerVariables("REQUEST_METHOD") = "POST" Then
If strWord = Trim(CStr(Request.Form("txtWord"))) Then
strResult = "Yes"
Else
strResult = "No"
End If
End If
Session("Word") = strWord[/b]

in that section you will have strResult = yes, (String is verified) instead of you can write code or function to load a new page.