Learn how to create a sign-up form for a website with a security image. The image prevents fake sign-ups and spam. In this tutorial, we will learn how to create a security image template, then put it to use.
Computers have such amazing power today that they are able to behave almost like humans. Programs can be written to interact with many websites. Unfortunately, many of these interactions are ones we don’t want, including fake sign-ups, spam through contact forms, and stealing places in line for items such as tickets.
The best way to avoid this is to include confirmations only real humans can comprehend. One of the most popular methods of doing this is through Security Images. In a nutshell, security images are dynamically generated images containing text that is hidden within other graphics. The characters must be entered correctly in a confirmation field to continue. In this tutorial, we will learn how to create a security image template, then put it to use.
Prerequisites:
Basic PHP skills
Basic GD Graphics Library knowledge (not required, but helpful)
Basic MySQL/PHP integration skills
PHP with GD graphics library (included with PHP 4.3.x)
MySQL database
Included files - securityimage_finished.php, signupdemo_finished.php, bg1.png, bg2.png, bg3.png
Preparation
Before beginning, you will need to create a database table in your MySQL database. Use the following SQL to do so:
CREATE TABLE `security_images` ( `ID` int(11) NOT NULL auto_increment, `insertdate` datetime NOT NULL default '0000-00-00 00:00:00', `referenceid` varchar(100) NOT NULL default '', `hiddentext` varchar(100) NOT NULL default '', PRIMARY KEY (`ID`) ) TYPE=MyISAM;
Laying Down a Plan
I believe the best first step is to create a plan. First of all, we will have a signup form, signupdemo.php. In the form, we will have a security image, a hidden field containing the unique reference ID to this image, and a confirmation field. The image will be called from another PHP page, securityimage.php.
When the security image is requested, the unique reference ID will be passed in the url as refid (i.e. securityimage.php?refid=abcdefg123hij). This page will generate a random string of a set length and output an image containing the text. Next, the reference ID and the hidden text value will be entered into the MySQL database table, security_images. Finally, any records older than one day will be deleted from the table.
When the user submits the signup form, the handler script will collect the hidden reference ID, and the entered hidden text. Then, it will check these two values against the database. If the query doesn’t return 0 records, the signup is valid. Otherwise, it is invalid, and the user will have to re-enter the security image text.
