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/

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...?

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.

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.

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

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.

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

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

Thanks,