Today, your friendly neighborhood web geek will be showing you how to implement a CAPTCHA.
The CAPTCHA's nothing new. You've probably run into it while filling up the odd web form. CAPTCHA stands for "Completely Automated Public Turing test to tell Computers and Humans Apart" and is more or less what it says - there's a distorted sequence of letters and/or numbers, a text box for you to enter that text in, and a button which, if clicked, will compare your input against the sequence to determine if you're human or bot.
For more background, follow this link. (http://en.wikipedia.org/wiki/CAPTCHA)
There are a lot of free CAPTCHA plugins floating around the web that you can implement, but it's important that you know how it works. And really, it's not all that difficult to figure out, and implement your own.
What do I need?
That's the spirit! Now, the CAPTCHA we'll be making is made out of AJAX code, using a combination of HTML, CSS, JavaScript and PHP. Here are the components.- a front-end layout comprising of a placeholder for your CAPTCHA sequence,a textbox for user input, a button for submission, and a button to reload the CAPTCHA.
- a back-end PHP script to randomly generate a sequence of letters and/or numbers
- a back-end PHP script to compare user input to that sequence.
- a distorter to visually warp the sequence so that it's not easily machine-readable. Some guys like to use a graphics library for this. We'll just be using good old CSS.
- front-end AJAX scripts to send user input to the back-end PHP scripts mentioned above.
Do note that this is not instant code - you'll need to run this setup on a web server.
To begin...
Here's the easiest part: The front-end layout. use the HTML/CSS code below:tt_captcha.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Captcha</title>
</head>
<body>
Please enter the numbers you see below: <input maxlength="6" id="txtCaptcha" /><input type="button" value="Send">
<br />
<div id="lblCaptcha" style="height:50px;width:160px;border:1px solid #AAAAAA;overflow:hidden;padding-left:20px;"></div>
<a href="#">Get a new image</a>
</body>
</html>
<html>
<head>
<title>CSS Captcha</title>
</head>
<body>
Please enter the numbers you see below: <input maxlength="6" id="txtCaptcha" /><input type="button" value="Send">
<br />
<div id="lblCaptcha" style="height:50px;width:160px;border:1px solid #AAAAAA;overflow:hidden;padding-left:20px;"></div>
<a href="#">Get a new image</a>
</body>
</html>
The HTML code is straightforward. You have a text box, and then you have a button labelled Send which does nothing at the moment. Then below it, you have a lblCaptcha div which holds the CAPTCHA sequence. And below that is a link which, when clicked, is supposed to generate a new sequence. At this moment, this link does nothing either.
Here's what the CSS does for the lblCaptcha div.
border:1px solid #AAAAAA - gives it a nice grey border.
overflow:hidden - makes sure any overlapping stuff is trimmed off.
Now we're going to add an AJAX script to call a PHP script. Add the following JavaScript to your head tag.
<head>
<title>CSS Captcha</title>
<script>
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>
</head>
<body>
Please enter the numbers you see below: <input maxlength="6" id="txtCaptcha" /><input type="button" value="Send">
<br />
<div id="lblCaptcha" style="height:50px;width:160px;border:1px solid #AAAAAA;overflow:hidden;padding-left:20px;"></div>
<a href="#">Get a new image</a>
</body>
</html>
<title>CSS Captcha</title>
<script>
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>
</head>
<body>
Please enter the numbers you see below: <input maxlength="6" id="txtCaptcha" /><input type="button" value="Send">
<br />
<div id="lblCaptcha" style="height:50px;width:160px;border:1px solid #AAAAAA;overflow:hidden;padding-left:20px;"></div>
<a href="#">Get a new image</a>
</body>
</html>
The getCaptcha() function calls the tt_getcaptcha.php script without any arguments, signalling to the script to generate a CAPTCHA sequence, and then display the sequence in the lblCaptcha div.
So now add the following snippets to your HTML
<body onload="getCaptcha();">
Please enter the numbers you see below: <input maxlength="6" id="txtCaptcha" /><input type="button" value="Send">
<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">
<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>
This ensures that the page calls the getCaptcha() function to generate a CAPTCHA sequence as soon as the page loads. The same function is called when you hit the "Get a new image" link.
In this function, document.getElementById("lblCaptcha").innerHTML=xmlhttp.responseText is the line that fills the lblCaptcha div with the results returned from the tt_getcaptcha.php script.
No comments:
Post a Comment