Quickstart Guide

Securimage requires no configuration after downloading. All you need to do is display the captcha image somewhere in your form, and validate the code submitted from within your form processor. Customising the image is also very easy. This guide explains the process of adding Securimage to an existing form.

First, download Securimage and upload the files to your web server if you have not done so already. In this example, we assume that the Securimage files have been uploaded to a folder named “securimage” in the root of your web directory (i.e. www.yoursite.com/securimage/).

Next, we will insert the captcha image into your form along with a text field for the user to type the code in.

At the desired position in your form, add the following code to display the CAPTCHA image:

<img id="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image" />

Next, add the following HTML code to create a text input box:

<input type="text" name="captcha_code" size="10" maxlength="6" />
<a href="#" onclick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false">[ Different Image ]</a>

Note: You can change the maxlength and size properties to match your image settings.
The second line is optional but gives the user the ability to display a new image if they are having trouble reading the image that was displayed.

Once you get the image added to your form and are satisfied with the look, we will move onto editing the PHP code that validates the CAPTCHA code typed in by the user.

Open the PHP file that processes the form data after submission.
You can find this by looking at the action value inside your <form> tag.

Note: In order to use Securimage, your form processor must be written in PHP.

On the very first line of the form processor, add the following code:

<?php session_start(); ?>
It is important to put this at the top of the file before any HTML output, otherwise the validation may always fail.

The next few steps will vary depending on how form validation is handled in your code. If you have little or no php knowledge the next part can be difficult.

To check if the code is correct, we will make a call to the Securimage class. The following php code should be integrated into the script that processes your form and should be placed where error checking is done. It is recommended to place it after any error checking and only attempt to validate the captha code if no other form errors occured. It should also be within <?php ?> tags.

include_once $_SERVER['DOCUMENT_ROOT'] . '/securimage/securimage.php';

$securimage = new Securimage();

This includes the file that contains the Securimage source code and creates a new Securimage object that is responsible for creating, managing and validating captcha codes.

Next we will check to see if the code typed by the user was entered correctly.

if ($securimage->check($_POST['captcha_code']) == false) {
  // the code was incorrect
  // you should handle the error so that the form processor doesn't continue

  // or you can use the following code if there is no validation or you do not know how
  echo "The security code entered was incorrect.<br /><br />";
  echo "Please go <a href='javascript:history.go(-1)'>back</a> and try again.";
  exit;
}

The call to the check method checks the generated CAPTCHA code against the code entered by the user. If the code was incorrect, an error message is printed with a link to go back to the form and the script is terminated with exit().
Make sure you check the code BEFORE the form is emailed or entered into a database and only if there were no other form errors.

Following the directions above should get Securimage working with minimal effort. Learn how to customize the captcha images or check out the faq page if you are having problems getting your form to work.

11 comments “Quickstart Guide”

Good day,

How can I

add Securimage to Symfony’s project? I added it as library and all fine, my problem comes when I try to add it to a form builder, if I pass the whole Securimage object to my html template and call the show method using {{captcha.show}} my app crash… If I execute before $img->show() it works but the captcha occupy the whole screen. I don’t know if you can help me with this

Thanks

Hi,

if I check the same captcha twice the second and the following checks will always fail even if the first check was correct. Is there a way to circumvent this?

No, not without modifying the Securimage source and only with great care. CAPTCHA codes should not generally be re-usable, otherwise there is potential that someone can abuse the captcha system by reusing the same code over and over.

Above you state that modifying the captcha image is easy. I would like an explanation about how this is done. The image on my page always stays to the far left and the spkr/change code on the right. Also the Enter code text is on the left of the text box and yours below is on the right. Seems that the Enter Code* Text should be bold and yours is not. Neither is mine. I tried to make the image smaller and change to blue text but then the text now formats to the right and a character can be cut off…why? I have tried putting it in a table and adjusting align right or align left as appropriate but these two seem to be glued together and only the spkr/change image and the text box with the Enter Code* text seem to move as a team.

Can I add this captcha within my wordpress plugin? Like as I followed and tried tried to do that but captcha image is not showing. Anyone have any idea?

Mobile Number:As 92300*******

[tel* PhoneNumber id:txt_phone class:txt_phone placeholder “Mobile Number”]

Password:

Already registered? Please Login here

[submit id:cnt_button class:cnt_button “CONTINUE…”]

Hi,

is it possible to use non-latin character for the CAPTCHA. We inter alia serve refugees from Syria and for them solving a CAPTCHA in latin letters is an extra effort. We might use the mathematical questions instead. But maybe there is an option to use arab characters as well? Do you have experience with how well they work in other character sets (e.g. Asian signs, Arab,…)

Is there a guide to use with ajax? or show errors on same page

Yes, the included example_form.php shows how to display errors on the same page, and example_form.ajax.php shows Ajax usage. Both are included with the download or can be viewed directly at https://github.com/dapphp/securimage

Hello, is it possible to use more than once the captcha on the same page but different tab?
I’ve tryed to do so on the website i provided, the image refresh on the first tab, but does not on the others.
Thanks!

Hi,

Yes it is possible. I looked at your page and each captcha image uses the same DOM id which isn’t allowed.

You will need to give each image it’s own and also use a namespace for each captcha as well. Example:

<img id="captcha1" src="securimage/securimage_show.php?namespace=tab1" alt="CAPTCHA Image" width="100">  <a href="#" onClick="document.getElementById('captcha1').src = 'securimage/securimage_show.php?namespace=tab1&id=' + Math.random(); return false" rel="nofollow"><img src="icon-refresh-128.png" alt="reload" width="30"></a>

<img id="captcha2" src="securimage/securimage_show.php?namespace=tab2" alt="CAPTCHA Image" width="100">  <a href="#" onClick="document.getElementById('captcha2').src = 'securimage/securimage_show.php?namespace=tab2&id=' + Math.random(); return false" rel="nofollow"><img src="icon-refresh-128.png" alt="reload" width="30"></a>

Leave a Reply


CAPTCHA Image
Play CAPTCHA Audio
Reload Image