Home arrow AJAX & Prototype arrow Page 4 - Protecting Web Forms with AJAX

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:
  1. Protecting Web Forms with AJAX
  2. Developing a verification code mechanism
  3. Generating verification codes with Ajax
  4. Generating verification codes on the web server
By: Alejandro Gervasio
Rating: starstarstarstarstar / 8
March 18, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

<style type="text/css">

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

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

color: #000;

}

p{

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>

<script language="javascript" src="jquery.js"></script>

<script language="javascript">

$(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>

<div id="formbox">

<form action="check_form.php" method="post">

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

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

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

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

<p><textarea title="Enter your comments" rows="10" cols="10"></textarea></p>

<div id="codebox"></div>

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

<p><input type="submit" value="Send Data"></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!



 
 
>>> More AJAX & Prototype Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

AJAX & PROTOTYPE ARTICLES

- Best AJAX Tutorials for Forms
- The Best AJAX Tutorials
- 8 Great Ajax Tutorials
- Using Ajax and jQuery
- Using Ajax and jQuery with HTML Forms
- Ajax.org Offers Cloud9 IDE for JavaScript
- Java Technologies Provider ICEsoft Releases ...
- Using Recaptcha in AJAX Prototype Framework ...
- Google's Closure Compiler Service API: Addit...
- Installing Google Web Toolkit: Introducing t...
- Google's Closure Compiler Service API: Displ...
- Google's Closure Compiler Service API: Deliv...
- Google's Closure Compiler Service API: the A...
- Google's Closure Compiler Service API: the S...
- Google's Closure Compiler Service API: Optim...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: