The start of the code, according to the flowchart shown previously, presents the web form, and does client side validation of the Asirra captcha answer. You'll find explanations of the code in blue font: <html>
<head>
<title>Asirra Captcha System in PHP</title>
<?php
//Check if the web form has been submitted
if (!(isset($_POST['UserName'])))
{
//Form is still not submitted, display the web form to the user
?>
<!--The JavaScript function for validating the user answer-->
<script type="text/javascript">
function HumanCheckComplete(isHuman)
{
if (isHuman)
{
formElt = document.getElementById("mainForm");
formElt.submit();
}
else
{
alert("Please correctly identify the cats.");
return false;
}
}
</script>
</head>
<body>
<h3>
This form will determine if you are a HUMAN or a ROBOT.
</h3>
<p>Kindly enter the required details below.</p>
<form action="<?php echo $SERVER['PHP_SELF']; ?>" method="POST" id="mainForm">
<br>User Name: <input type="text" name="UserName">
<br>Favorite Food: <input type="text" name="FavoriteFood">
<br>
<!--The JavaScript code for communicating with the Asirra server and fetching images from petfinder.com. This function also allows the developer to adjust the parameters on how the images will be shown on the web page. For example; customizing the aspect ratio of the box and the manner how the zoomed or big images will be presented; whether at the top, bottom or left-->
<script type="text/javascript" src="//challenge.asirra.com/js/AsirraClientSide.js"></script>
<script type="text/javascript">
// You can control where the big version of the photos appear by
// changing this to top, bottom, left, or right
asirraState.SetEnlargedPosition("bottom");
// You can control the aspect ratio of the box by changing this constant
asirraState.SetCellsPerRow(6);
</script>
<!--The submit button has a JavaScript onclick event attached to it. So when the submit button is clicked, the Javascript function HumanCheckComplete will execute on the client browser.-->
<br><input type="button" value="Submit" onclick="javascript:Asirra_CheckIfHuman(HumanCheckComplete)">
</form> The form should look like the screen shot below:
The Server Side Script Validation <?php
}
else
//form is submitted, execute server side validation on Asirra catpcha
{
$inResult = 0;
$passed = 0;
function startElement($parser, $name, $attrs)
{
global $inResult;
$inResult = ($name=="RESULT");
}
function endElement($name)
{
global $inResult;
$inResult = 0;
}
function characterData($parer, $data)
{
global $inResult;
global $passed;
if ($inResult && $data == "Pass")
{
$passed = 1;
}
}
//PHP function to actually validate the captcha server side, so the first step is to get the ticket from the POST, then connect to the Asirra server using CURL.
//Once the response has been received, it will be used to check whether the validation succeeded or not.
function ValidateAsirraChallenge()
{
global $passed;
$AsirraServiceUrl = "http://challenge.asirra.com/cgi/Asirra";
$ticket = $_POST['Asirra_Ticket'];
$url = $AsirraServiceUrl."?action=ValidateTicket&ticket=".$ticket;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5);
$resultXml = curl_exec($ch);
curl_close($ch);
$xml_parser = xml_parser_create();
xml_set_element_handler($xml_parser, "startElement", "endElement");
xml_set_character_data_handler($xml_parser, "characterData");
xml_parse($xml_parser, $resultXml, 1);
xml_parser_free($xml_parser);
if (!$passed)
{
die("Asirra validation failed!");
}
}
ValidateAsirraChallenge();
//Now that the captcha validation has been successful, process the rest of the PHP form processing script.
echo '</head>';
echo '<body>';
echo "<p>Hi ".htmlspecialchars($_POST['UserName'])."! Since you read this page, you are really a human and NOT a robot!";
echo "And your favorite food is ".htmlspecialchars($_POST['FavoriteFood']).".";
echo '<br /><br />';
echo 'You may <a href="/asirracaptchaform.php">take this again</a>.';
}
?>
</body>
</html>
blog comments powered by Disqus |
|
|
|
|
|
|
|