ArCaptcha 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.
Customizing ArCaptcha is also very easy, we will discuss it in the next part. or you can download your generated customized file directly from the demo page.
First, you need to download the lastes version of ArCaptcha and upload the files
to your web server if you have not done so already.
In this example, we assume that the ArCaptcha files have been uploaded to a folder named “ArCaptcha” in
the root of your web directory (i.e. www.yoursite.com/ArCaptcha/).
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 (recommended to be the last field in the form), add the following code to display the CAPTCHA image:
| 1 | <img id="captcha" src="/ArCaptcha/GetArCaptcha.php" alt="ArCaptcha" /> |
| 2 | <input type="text" name="captcha_code" size="10" maxlength="8" style="direction: rtl" /> |
| 3 | <a href="#" onclick="document.getElementById('captcha').src = '/ArCaptcha/GetArCaptcha.php?' + Math.random(); return false;"> [change image] </a> |
Note: You can change the maxlength and size properties to match your image settings. And 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.
On the very first line of the form processor, add the following code:
| 1 | <?php session_start(); ?> |
Note: 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 ArCaptcha 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 captcha code if no other form errors occurred. It should also be within <?php ?> tags.
| 1 | include_once $_SERVER['DOCUMENT_ROOT'] . '/ArCaptcha/ArCaptcha.php'; |
| 2 | $ArCaptcha = new ArCaptcha(); |
This includes the file that contains the ArCaptcha source code and creates a new ArCaptcha 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.
| 3 | if ($ArCaptcha->validate($_POST['captcha_code']) === false) { |
| 4 | /** |
| 5 | * The entered verify code is incorrect. |
| 6 | * You need to tell terminate the processing script |
| 7 | * and tell the user that the entered verify code is incorrect. |
| 8 | */ |
| 9 | echo 'The verify code you entered is incorrect!'; |
| 10 | exit; |
| 11 | } |
The call to the validate function checks the generated verify code against the code entered by
the user. If the code was incorrect, the code will enter to the if statement,
where you have to tell the use that the entered verify code is not correct and terminate 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 ArCaptcha working with minimal effort. Learn how to customize the captcha images in the next part or check out the faq page if you are having problems getting your form to work.
In the previous part, we learnt how to configure ArCaptcha in the minimal effort, in this part, we will learn how to customize ArCaptcha to suit your design, configuration and even your taste.
Customizing ArCaptcha can be done in two different places, GetArCaptcha.php file or ArCaptcha.php directly. We recommend you to customize it from GetArCaptcha.php file, and the following examples will show you how to customize it from GetArCaptcha.php file:
Changing colors in ArCaptcha is so easy, you can change the color of the background, and the color
of the noise and distorted lines as well, for the noise and distorted lines color, it will be discussed
in Changing Difficulty part.
ArCaptcha uses the hex colors, for example 0X000000 for the black color, or 0XFFFFFF for the white color.
To change the background color, un-comment the following line in GetArCaptcha.php file and replace the variable
value with the color you want:
| 1 | $img->back_color = 0XFFFFFF; |
| 1 | $img->transparent = false; |
Difficulty level can be changed through three ways:
| 1 | $img->draw_noise = false; |
| 1 | $img->draw_lines = false; |
| 1 | $img->num_lines = 4; |
| 1 | $img->noise_color = 0XDCDCC8; |
You might want to change the default font in ArCaptcha, ArCaptcha supports the True Type Font (TTF), to use your custom font, you need to upload the font file to your web server add place it in ArCaptcha folder or any other place you want, and use the absolute path if the file and replace the value of the font_file with it in the following line after un-commenting it:
| 1 | $img->font_file = $_SERVER['DOCUMENT_ROOT'] . '/fonts/font.ttf'; |
You can change the length of the verify code and the font size so easy, the length of the verify code means
the number of the characters used in the verify code.
To change the lenght of the verify code, change the value for variable in the following line after un-commenting it:
| 1 | $img->length = 4; |
| 1 | $img->font_size = 20; |
You can add some aesthetic touches to the captcha image, so it suites your design and taste, the colors of the verify code characters are being generated randomly in ArCaptcha (for aesthetic and security reasons), you can change the darkness level of the characters colors by un-commenting the following line and replacing the value of the variable by the level you want, you can chose any value between 1 and 10, 1 means using light colors, and 10 means using dark colors (almost black color):
| 1 | $img->darkness_level = 5; |
| 1 | $img->shadow = true; |
When running the automated test، you might need a fixed verify code to be used in ArCaptcha, then, your automated test will be able to submit the forms, to use fixed verify code, un-comment the following line and set the variable value to the verify code you want:
| 1 | $img->fixed_verify_code = 'banana'; |
Note: Only use the fixed verify code when running the automated test, and once you done, re-comment the same line again.
In case you faced any problems, view the FAQ page، or ask your question in the discussions page.