Review: challenging users with multiplication - AJAX

From a web developer’s point of view, building a mechanism that permits you to protect online forms against attacks by spam bots, malicious automated submissions, and so forth, can be challenging. Developing such an application often requires using a server-side graphic library to generate the so-called noisy images. However, it’s possible to quickly create a similar mechanism with Ajax, without having to work directly with images generated in the web server. This is the fourth part of a four-part series that explains how to do just that.

TABLE OF CONTENTS:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

April 08, 2009

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

In case you haven’t had the chance to read the preceding article, below I included the complete source code of the Ajax-based application built in that tutorial. The application is capable of displaying a succession of multiplication equations within a targeted web form, whose results must be entered manually by users before submitting the form in question.

Here are all of the source files that comprise this Ajax-driven program:

(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 challenge strings generator</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 challenge strings generator</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="Multiply the above digits and enter the result" /></p>

</form>

</div>

</body>

</html>

(definition of 'get_checkingcode.php' file)

<?php

session_start();

$valuea=rand(1,10);

$valueb=rand(1,10);

$_SESSION['checkcode']=$valuea*$valueb;

echo $valuea.' x '.$valueb;

(definition of 'check_form.php' file)

<?php

session_start();

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

echo 'Correct verification code!';

}

else{

echo 'Incorrect verification code!';

}

As I mentioned before, if you test the previous Ajax program in your own machine, you’ll see that each time the previous sample HTML form is displayed on screen, it will include a challenge multiplication equation, which must be correctly calculated prior to submitting it. Indeed, this approach can be an interesting alternative to displaying typical random values, and as you saw for yourself, it’s quite simple to code as well.

Due to its intrinsic versatility, the application can be easily modified to work with different mathematical operations. This process would only require modifying the “get_checkingcode.php” file that you saw before, and nothing else.

Therefore, in the section to come I’ll be redefining this PHP file so it can be used to generate dynamic division equations in the form of challenge strings.

To learn the full details on how this will be done, please click on the link that appears below and keep reading.

Next: Using division equations as challenge strings >>