This is a simple version that uses minimal amount of codes. However, this practice is not suitable for websites that require stringent security protection.
The PHP codes make use of the GD library to generate a PNG image file that will be read by the HTML code. The PHP will randomly generate two characters and two numbers with first digit as character followed by a number, then a character and a number. Of course, you can change it to something more complicated like making it a mathematical problem to be solved by the visitor. The PNG image will be accompanied by a browser cookie with the answer to the captcha. The cookie will then be compared with the input by the user to see if they match. You can also send the answer back to the server to be verified in order to make it more secure. However, it is not the scope of this example as I try to make it as simple as possible so that it is easy to understand.
Here are the PHP codes:
|
<?php
// I name this file captcha.php error_reporting(0); // this is important to turn off all the warnings if any session_start(); $angle = rand(-10,10); $fontSize = 20; $captchaText = chr(97 + rand(0, 25)).rand(0,9).chr(97 + rand(0, 25)).rand(0,9); $img = imagecreatetruecolor(120, 50); $bgColor = imagecolorallocate($img, rand(50,150), rand(50,150), rand(50,150)); //background color - random dark coolor $fgColor = imagecolorallocate($img, rand(200,255), rand(200,255), rand(200,255)); //foreground color - random light color imagefill($img, 0, 0, $bgColor); imagettftext($img, $fontSize, $angle, 25, 35, $fgColor, "./LiberationSerif-Bold.ttf", $captchaText); setcookie("randomCharacterCookieName", $captchaText, time()+3600, '/'); // will expire in one hour header("Cache-Control: no-cache, must-revalidate"); header('Content-type: image/png'); imagepng($img); imagedestroy($img); ?> |
Make sure your PHP has the GD library support before you proceed.
The tricky part is the one highlighted in red. You need to upload a font to your home directory to make this PHP script to work. Why don't we use the server font? Most of the time, the shared server won't have any TrueType font in it or the GD doesn't have the authority to run it. It is still better to upload your own font and you have more choice for the font as well. I chose the Liberation font as it is royalty free. You can change to your own font if you prefer.
And now comes the Javascript and HTML:
|
<html> <script> function checkCaptcha() { var ans = document.getElementById('answer').value; var tmp = document.cookie; var chunk = tmp.split('='); if (chunk[chunk.length-1] == ans) { alert("yes!"); // proceed with your post verification codes such submitting the form etc. } else { alert("no!"); } } </script> <body> <img src="captcha.php"> <br> Type what you see above here: <br> <input type="text" id=answer size=4 maxlength=4> <a href="javascript:checkCaptcha()">Check</a> </body> </html> |
After running the HTML, I captured this response from Chrome after a right answer is entered:
I captured this response from Chrome after entering a wrong answer purposely:
There are still many things you can improve from these codes. For example, you can still include capital letter or even some special characters to the captcha. You can also scramble the answer in the cookie and descramble it during verification with the answer embedded in the cookie.
Well, here is the Captcha tutorial! Finally!
