Generating verification codes on the web server - AJAX

Are you looking for a new way to protect your web forms from malicious hackers and spam bots? Then you've come to the right place. In this four-part article series, you'll learn how to use Ajax to protect those forms. Keep reading to learn how to build an Ajax-based verification code mechanism that you can use on your own web site.

TABLE OF CONTENTS:

By: Alejandro Gervasio

Poor Best

Rating:

/ 8

March 18, 2009

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

In the previous section, you learned how to create a simple Ajax application which would fetch a PHP file from the web server to generate verification codes each time a user attempts to submit the web form coded previously.

Therefore, it’s time to create the PHP file. As you’ll see in a moment, it's pretty easy to follow. Here it is:

<?php

function RandomGenerator($length=4){

$chars="ABCDEFGHIJKLMNPQRSTUVWXYZ123456789";

if(!is_int($length)||$length<1){

$length=4;

}

$rndstr='';

$maxvalue=strlen($chars)-1;

for($i=0;$i<$length;$i++){

$rndstr.=substr($chars,rand(0,$maxvalue),1);

}

return $rndstr;

}

session_start();

$_SESSION['checkcode']=RandomGenerator();

echo $_SESSION['checkcode'];

As shown above, all that this PHP file does is generate a four-digit random string by using a function defined for that specific purpose, called “RandomGenerator.” Once this verification string has been created in the web server, it’s sent back to the client to be displayed within the web form. Not too difficult to understand, right?

Well, having demonstrated how to build a PHP file that generates the randomized verification codes, it’s time to put all the pieces together and show the full source code for this web application that lets us create a safer HTML form. So, first, here’s the client-side module:

(definition of 'sample_form.htm' file)

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

<head>

<title>Ajax-based Random Code Generator System</title>

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

font: bold 16pt Arial, Helvetica, sans-serif;

color: #000;

}

font: bold 9pt Arial, Helvetica, sans-serif;

color: #000;

}

#formbox{

width: 380px;

text-align: right;

padding: 10px;

background: #eee;

}

#codebox{

font: bold 18pt Arial, Helvetica, sans-serif;

color: #00f;

}

.inputbox,textarea{

width: 300px;

border: 1px solid #999;

}

.checkingcode{

width: 50px;

border: 1px solid #999;

}

</style>

$(document).ready(function(){

// get verification code with Ajax

$.get('get_checkingcode.php',{data:'getting code'},function(checkingcode){$('#codebox').html(checkingcode);});

});

</script>

</head>

<body>

<h1>Ajax-based Random Code Generator System</h1>

<p>First Name <input type="text" class="inputbox" title="Enter your first name" /></p>

<p>Email <input type="text" class="inputbox" title="Enter your email address" /></p>

<p>Enter your comments below:</p>

<p>Verification Code: <input type="text" name="code" class="checkingcode" title="Enter the above four-digit verification code" /></p>

</form>

</div>

</body>

</html>

Now that I’ve listed the complete client-side code for this web application, it’s time to show the corresponding signatures of the PHP files that comprise its server-side module. These look like this:

(definition of 'get_checkingcode.php' file)

<?php

function RandomGenerator($length=4){

$chars="ABCDEFGHIJKLMNPQRSTUVWXYZ123456789";

if(!is_int($length)||$length<1){

$length=4;

}

$rndstr='';

$maxvalue=strlen($chars)-1;

for($i=0;$i<$length;$i++){

$rndstr.=substr($chars,rand(0,$maxvalue),1);

}

return $rndstr;

}

session_start();

$_SESSION['checkcode']=RandomGenerator();

echo $_SESSION['checkcode'];

(definition of 'check_form.php' file)

<?php

session_start();

if($_SESSION['checkcode']==$_POST['code']){

echo 'Correct verification code!';

}

else{

echo 'Incorrect verification code!';

}

As you can see, the server-side module of this web application is composed of two PHP files. The first one, as I explained before, is tasked with generating the corresponding verification codes that will be displayed within the web form, before being submitted. The second one simply checks to see whether or not the code entered in the form is correct.

In each case, an indicative message will be displayed on the browser, informing the user of the result of this checking process.

Finally, to complement the previous explanation, below I included a couple of screen shots that shows how the verification codes are generated when a fictional user is filling in the web form coded before:

Now that you hopefully grasped how easy it is to use an Ajax application to create safer web forms, feel free to introduce your own improvements to all of the sample files shown in this tutorial. The experience will be really instructive, believe me.

Final thoughts

In this first installment of the series I explained how to build a simple Ajax-based program and how to build a simple code verification mechanism. These can be easily incorporated into any web form to make it more secure against attacks.

As I stated in the beginning, this isn’t a bullet-proof approach, since its has some evident vulnerabilities. However, it’s really easy to develop, and best of all, does not require the use of a server-side graphic library.

In the upcoming part, I’ll be demonstrating how to use some simple mathematical operations to implement a code verification system similar to the one discussed previously. Want to see how this mechanism will be developed? Then don’t miss the next article!