Home arrow AJAX & Prototype arrow Page 2 - Using Simple Checksums for Web Form Verification with Ajax

Review: code verification system with Ajax - AJAX

As you know, Ajax is a technology that can be used to perform all sorts of clever tasks; this includes building web forms that are less vulnerable to attacks from malicious web bots. Indeed, itís pretty simple to develop certain mechanisms that permit the dynamic generation of verification codes via Ajax, which must be entered manually by a user before submitting an HTML form. This is the second part of a four-part series that shows you how to make your web forms safer with Ajax.

TABLE OF CONTENTS:
  1. Using Simple Checksums for Web Form Verification with Ajax
  2. Review: code verification system with Ajax
  3. Displaying basic mathematical sums as challenge strings
  4. The Ajax application's full source code
By: Alejandro Gervasio
Rating: starstarstarstarstar / 3
March 25, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Before we develop this new application, I will show you the complete source code of the example built in the preceding article. As I mentioned, it dynamically generated a few random values each time a user attempted to submit a contact web form.

The source files that comprised this application looked like this:

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



(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'll possibly recall, the three files shown above are all the source code required to get this web form protection mechanism working correctly. In this  case, the first file is charged with displaying the sample web form that incorporates this protective system, and is also tasked with fetching, via Ajax, the PHP file that actually generates the corresponding random values.

On the server side, there's one PHP file that echoes to the browser the random strings, while another one simple checks to see if the user entered the correct challenge value or not. Simple to code and read, isn't it?

So far, so good. At this point, you're hopefully familiar with the way that the previous Ajax application generates random codes for protecting a targeted web form. Thus, it's time to see how the same logic can be applied to displaying elemental mathematical sums as challenge strings.

Curious about how this will be achieved? Then click on the link below and read the following section.



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