Search meta crawling the web
Web News

Email Us
Blog

cgi scripts for you

This script allows you to add a 'Captcha' security image to your forms and scripts

Please ensure you have the following perl modules installed on your server:

If you wish to use the audio function then you must also have flite installed on your server

Upload loading.gif to your webroot directory

On your server create a data directory above your webroot directory
ie if your webroot directory is /home/username/domain/public_html
create a directory at /home/username/domain/captchadata

Set the permissions so the directory is writable by the user the script/webserver will run as, if you are not sure you can chmod it to 777 as long as the directory is not accessable via a browser

You now need to create a directory to store the wav files if you are using audio. This must be within your web root so it can be accessed via a browser, this should also be writable by the user the script/webserver will run as.

In notepad open the script CaptchaGen.pl (note the pl file NOT the .cgi file yet)

You now have 9 variables to set:

$captchaage

This is the number of seconds before the Captcha image expires, this should be long enough for your visitor to complete the form but not too long. We would recommend between 300 and 600 seconds (5 - 10 minutes)

@captchalightcolors

This contains a list of 'light' colors to use on the image one of which will be randomly selected to be used in the image

@captchadarkcolors

This contains a list of 'dark' colors to use on the image one of which will be randomly selected to be used in the image

NOTE: you can have more or less light colors than dark if you wish, if a light color is used as the background then a dark color will be used for the text of visa versa

$keepfont

if set to 0 then each character in the image will use a random font, if set to 1 then every character will use the same font.

$keepfontcolor

If set to 0 each character in the image will use a random color (all light or all dark), if set to 1 then every character will be in the same color

$gradient

If set to 0 the background will be a solid color, if set to 1 the background will have a gradient from one color to another.

@blockfonts

There are some fonts that just don't work well on Captcha images, these should be listed here, by default we have blocked the symbol font as it is not alphanumeric and fonts where their name contains the word 'italic' as these when combined with the skewing done by the script can become hard to read.

@patterns

This is a list of the Imagemagick built in patterns that will be overlayed the image, a full list of these patterns can be found at http://www.imagemagick.org/script/formats.php#builtin-patterns

$captchachars

This is a string of all the characters being used for the Captcha image

$addnoise

This is the randomizer for selecting a 'noisy' image rather than a pattern from the @patterns list. If set to 0 your captcha will never add noise to the image, the higher the number the more likely the Captcha image will be 'noisy' and less likely use a pattern.

$flite_path

This is the command line command to call Flite to create the audio file, if you do not have flite installed then this must be blank.

Save the file now and upload it to your server as an ascii file. We recommend placing it in the data directory you created earlier.

Adding CaptchaGen functions to your script

It is recommended you look at the code of the captchagenexample.cgi included

Towards the beggining of your script you need to add the following code :

use CGI qw/:standard/;
use CGI::Carp qw(fatalsToBrowser);
use strict;

use vars qw($captchadatabase $captchascripturl $captchawavdir $captchawavurl);

# $captchascripturl is the url of the script used to display the image
# it could be this script or any script that 'requires the scaptcha.pl
$captchascripturl='http://captchagen.cgiscripts4u.com/cgi-bin/captchagenexample.cgi';

# $captchawavdir is the path of the directory where the wav files
# are stored. the script must be able to write to this dir
$captchawavdir='/home/admin/domains/cgiscripts4u.com/public_html/captchagen/waves';

# $captchawavurl is the url of the directory where the wav files
# are stored
$captchawavurl='http://captchagen.cgiscripts4u.com/waves';

# $captchadatabase is the full path to the directory where the captcha files are store
# this must be writeable by the script and should not be in your webroot
$captchadatabase='/home/admin/domains/cgiscripts4u.com/captchadata/';

require $captchadatabase."captchagen.pl";

The above code loads the captchagen script and sets the relevant variables needed for it.

If your script generates it's own form and needs to display the Captcha image the output must include

script({-type=>'text/javascript'},CaptchaAjaxCode())

which produces the javascript required.

You must then store the value returned form calling GenerateCaptchaForm(1) to a variable, ie

my $captchacode=GenerateCaptchaForm(1); 

Your form now needs to include the following html:

	
<img id='captchaimage' name='captchaimage' src="$captchascripturl?image=$captchacode">

<script type="text/javascript">
document.write('<input type="button" value="Refresh Image" onclick="RefreshCaptcha();return false;" />');
</script>

<input type=hidden name= "captchacoded" id="captchacoded" value=$captchacode>
<input name= "captcha" id='captcha'>

If you are using 'flite' then you also need to add the following to your form

<tr><td colspan=2><span id='captchasound'>  </span></td></tr>

the input names and id's are important and must be as above. Using javascript to display the 'refresh button' means those with javascript disabled will not see the button, this is good as javascript is needed to refresh the Captcha Image.

Once the form is submitted your script needs to check the submitted code is correct this is done by checking the subroutine CheckCaptcha(1) which can return 0 if the submitted code is wrong, 1 if it is correct or 'TimeOut' if the captcha has expired.

Displaying CaptchaGen Images on hardcoded forms (ie in html files)

The script can display the image in 2 ways:

Using the SSI call <!--#include virtual="/pathto/yourscript.cgi"-->
This will place two table rows into your web page, the first row contains the Captcha Image and a 'Refresh Image' button, the second row contains the input text box.

Using Javascript

Your form must include the following :

<img id='captchaimage' name='captchaimage' src='/loading.gif'/>
<input type=button value='Refresh Image' onclick='RefreshCaptcha();return false;'>
<input name='captcha' id='captcha'>

If you are using 'flite' then you also need to add the following to your form

<tr><td colspan=2><span id='captchasound'>  </span></td></tr>

Ensure you keep the names and id's as shown

After your form you need the following :

<script src='/pathto/yourscript.cgi?jscaptcha=1' type='text/javascript'></script>
<script>
RefreshCaptcha();
</script>

You could also add the following message, for those with javascript disabled. somewhere :

<noscript>
<p>Sorry as you do not have javascript enabled you are unable to use the captcha.</p>
</noscript>

If you have any questions feel free to Email Us