OK, I recently had the need to create a PHP CAPTCHA system for a friend, and I am sharing this as a tutorial with the good people here at Trap17. I am sure you have all seen a CAPTCHA before (although you may not have known what it was called). They are the little codes you often have to enter when you register with a site, to make sure you are a person and not an automated script. Some common examples look something like this:



My system doesn't really do anything as fancy, but I think that it is slightly more readable that some of those that get generated. Everyone wants to see the final product before they start, so here are a few examples of what this script generates:



OK, lets get started. Open up your favourite text/code editor (Kate, Notepad, Dreamweaver...) and you're ready.

First, we need to tell the browser what we are going to ouput at the end of this, seeing as it won't be standard HTML.



Simple enough. We are creating an image. Its a PNG. Now we need some randomness in our process. I have used 2 random numbers here, one as a string to be encoded with MD5, and the other will be used to cut our 32 character MD5 output into a 8 character code.



Our first number is anywhere between 0 and 9999. It doesn't really matter what the range is, its just used to give MD5 something to encrypt. Our second number has to be specifically in the range of 0 to 24. Why? MD5 creates a 32 character string, of which we only need 8 characters. To add some extra randomness, this number chooses our starting character. It can't go above 24 (32-8) or we get less than 8 characters. So, to generate our string:



Now we can start on the actual image. Here is where you get some customisation. If you look at my example above, I have used 3 background images which I premade for my script to use. You can use as many or as few as you like, just add the file names to this array, and add that to your code so far. Make sure they are in the PNG format! My array looks like this (with the images in the same directory as the script):



Designing the backgrounds with an image editor allows you to make sure that the text will be readable on them. All of mine allow the text to be easily seen to a human, but not so easily to a computer. Now of course, we need to pick one of these images to use as the basis for our CAPTCHA. There is a useful function called array_rand which will select one item from an array at random. Bingo!



The GD library (available with all good hosts, such as Trap17) allows us to create images to output, and we will use this now. First, we create an image from a premade PNG background with this oh-so-inventively named function:



Next, we set the text colour and size. I have used a white colour as it shows up well on all of my backgrounds. Try changing the values if white doesn't look good for you.



I've also done some fancy central alignment on the text, despite the fact all my images have the same dimensions It allows for expansion, and you can design images to fit your site design.



That simply gets the width and height of the background in pixels. Now we do some maths to find where the top left of the text should go, compensating for the width of the text.



Lastly, we plug all this together. We add the text to the image, display it to the browser, then destroy the temporary file.



If you have any problems then feel free to ask away and I'll do my best. In the future I may add the functionality for a PHP-generated background, random colours, custom fonts, and to apply some warping to the text. My aim is to still keep it readable though.

I carried out a (very un-scientific) test using my scanner's OCR software and that was unable to read the text. I am sure that if someone was determined and bothered enough then they would be able to break it, but it adds that little extra layer of protection to prevent people submitting things over and over, or computers being used to creat hundreds of messages, accounts...

I have also attached the completed source code and my images here too. Feel free to use them, and if you do it would be nice to see how you are using it. Also, feel free to offer improvements and suggestions.

Demo: http://www.rvalkass.co.uk/CAPTCHA/

 

 

 

Reply

Very nicely done.
Excellent Tutorial style and presentation.

In spite of the testing which you have done, I would be concerned about the contrasting of the text against the backgrounds, so perhaps the text colour could be modified in this code snippet to blend the text into the chosen background a little bit more? There seems to be too much contrast of the text against the background and although your scanner didn't pick it up, other systems and methods may be able to deterine the text, so altering the colour might be required...?

Reply

I've been thinking about that, and have tried a few things to combat it. Generating random colours was one option, but that can occasionally lead to one or two characters being a bit difficult to read. Another option was applying a filter across the image. I didn't know these existed until I started looking through the GD library's functions. Putting the following code just before the imagepng($img_handle); line creates a sort of jagged-blur effect across the image:



It does sacrifice human readability a bit, generating images like this:



Adjusting the number 0.1 creates some different levels of the effect. I've tried running edge detection on the original images, and it proved quite reliable at picking the characters out. Random colours made life a bit more difficult, but this was the best way to beat edge detection, as now it picks edges up all over the image. With pixel maps for each character I think it would still be quite easy for someone to decipher it, but it's still an added layer.

I'll keep adjusting it and see what I can come up with.

 

 

 

Reply

Very nicely put and extremely simple to follow. Maybe you could make a little form showing how to implent this actually into a web page, e.g. a contact us form. Or you could assign a session to this, and use md5 encryption on it to process this that way. I have quickly made an example of this:
Image.php:


Form.php


Process.php


I have not tested this, so there maybe a few errors.

Reply

I'm sure this will be great help to people who would like to implement a CAPTCHA image in their contact forum, thanks for the tutorial. Unlike others yours is very easy to read and understand. Once again thanks for creating it

Reply

Great tutorial!

I can honestly say that I never took the time to think of the work involved in those things. Honestly, never cared to because they're annoying. However, seeing how they're made kinda makes me appreciate it.

Again, great tutorial. Perhaps you'll have more coming in the future? We'll see, I guess.

Reply

wow, i love this good security tutorial, never again spam activity come to my site next time...

Reply

nice work, this will save a lot of people forums getting spammed.

Thanks,

Reply

How do you implement this into a current form, or as a filter to the form pages? I really like this tutorial, since it's simple and easier to setup than other scripts on the internet.

Reply

QuickSilva very handily wrote an example above, showing how you can implement this into a form. Basically you have to pass the text used on the image as a variable along with what the user enters. When they submit the form they are on, the script the form is passed to will check if the variable with the image text, and the one with the user's text match. If they do then they passed the CAPTCHA, if not, then tell them to go back and do it again.

In the script, the variable $hash_string contains the text that appears on the image. If you pass that along with the form data as usual then in the script you have set up which deals with the form, one of the first things it should do is check that the user entered field and the $hash_string variable match (it's up to you if you want to make it case sensitive). QuickSilva has used sessions, which is another way to pass the variable along.

If you want some help implementing this then I am happy to help you if you PM me with the details.

Reply