Add the following JavaScript code to your front-end, in the head tag.
<script>
function compareCaptcha()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert(xmlhttp.responseText);
getCaptcha();
}
}
xmlhttp.open("POST","tt_comparecaptcha.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("captcha="+document.getElementById("txtCaptcha").value);
}
function getCaptcha()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("lblCaptcha").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","tt_getcaptcha.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();
}
</script>
function compareCaptcha()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert(xmlhttp.responseText);
getCaptcha();
}
}
xmlhttp.open("POST","tt_comparecaptcha.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("captcha="+document.getElementById("txtCaptcha").value);
}
function getCaptcha()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("lblCaptcha").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","tt_getcaptcha.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();
}
</script>
The compareCaptcha() function takes input from the txtCaptcha text box and sends it to the back-end script tt_comparecaptcha.php. If there's a match, or not, it will announce the result via the command alert(xmlhttp.responseText). It will then regenerate the CAPTCHA.
Now modify your front-end with this little nugget, so the compareCaptcha() function will fire off once you click the submit button.
<body onload="getCaptcha();">
Please enter the numbers you see below: <input maxlength="6" id="txtCaptcha" /><input type="button" value="Send" onclick="compareCaptcha();">
<br />
<div id="lblCaptcha" style="height:50px;width:160px;border:1px solid #AAAAAA;overflow:hidden;padding-left:20px;"></div>
<a href="#" onclick="getCaptcha();">Get a new image</a>
</body>
Please enter the numbers you see below: <input maxlength="6" id="txtCaptcha" /><input type="button" value="Send" onclick="compareCaptcha();">
<br />
<div id="lblCaptcha" style="height:50px;width:160px;border:1px solid #AAAAAA;overflow:hidden;padding-left:20px;"></div>
<a href="#" onclick="getCaptcha();">Get a new image</a>
</body>
All done? Excellent. We're going to write the script next. Create a new file and fill it in as follows:
tt_comparecaptcha.php
<?php
session_start();
?>
session_start();
?>
Again, we have the session_start() line to ensure that we're still running the session. This means that the $_SESSION["captcha"] variable is still active, and still holds the same value as the last time you generated it.
So all we need to do now is the following. This gets the value that the user entered into the text box.
<?php
session_start();
$captcha=$_POST["captcha"];
?>
session_start();
$captcha=$_POST["captcha"];
?>
And this compares it with the $_SESSION["captcha"] variable, then outputs a result message which the earlier JavaScript is supposed to pick up.
<?php
session_start();
$captcha=$_POST["captcha"];
if ($captcha==$_SESSION["captcha"])
{
echo "Captcha successful!";
}
else
{
echo "Value did not match.";
}
?>
session_start();
$captcha=$_POST["captcha"];
if ($captcha==$_SESSION["captcha"])
{
echo "Captcha successful!";
}
else
{
echo "Value did not match.";
}
?>
Now, run your front-end. Type in a correct sequence. What happens?
How about an incorrect sequence?
And there we are! A functioning CAPTCHA. Give yourself a pat on the back!
But hold up - there's something off about this CAPTCHA. It's too neat. A robot could read that sequence easily. So what do we do about that?
No comments:
Post a Comment