IconCaptcha is a faster and more user-friendly captcha than most other captchas. You no longer have to read any annoying text-images, with IconCaptcha you only have to compare two images and select the image which is only present once.
Besides being user-friendly, IconCaptcha is also developer-friendly. With just a few steps you can get the captcha up and running. Even developers new to JavaScript and PHP can easily install IconCaptcha. The demo page contains all the code needed to get the captcha working.
- User Friendly: The captcha uses easily understandable images instead of hard to read texts to complete the captcha.
- Server-side validation: Any validation done by the captcha will be performed on the server-side instead of the client-side.
- Events: Events are triggered at various points in the code, allowing you to hook into them and execute custom code if necessary.
- Themes: Select the design of the captcha without having to ever touch the stylesheet.
- SASS: The project contains a SASS file, allowing you to easily style and compile the stylesheet.
- Supports IE: The captcha supports Internet Explorer 8 and up.
<form action="" method="post">
...
<!-- The captcha will be generated in this element -->
<div class="captcha-holder"></div>
...
</form>
...
<script>
$('.captcha-holder').iconCaptcha({
// The captcha options go here
});
</script>PHP form validation:
<?php
// Start a PHP session.
session_start();
// Include the IconCaptcha class.
require('resources/php/captcha.class.php');
// Set the path to the captcha icons. Set it as if you were
// currently in the PHP folder containing the captcha.class.php file.
// ALWAYS END WITH A /
// DEFAULT IS SET TO ../icons/
IconCaptcha::setIconsFolderPath("../icons/");
// Set the custom error messages (optional)
// Check the IconCaptcha class (for instructions.
// IconCaptcha::setErrorMessages(array(...));
// If the form has been submitted, validate the captcha.
if(!empty($_POST)) {
if(IconCaptcha::validateSubmission($_POST)) {
echo 'The form has been submitted!';
} else {
echo IconCaptcha::getErrorMessage();
}
}
?>The following options allow you to customize the IconCaptcha to your liking. All of the options are optional, however you might still want to take a look at the captchaAjaxFile option and make sure the path is set correctly.
| Option | Description |
|---|---|
| captchaTheme | Allows you to select the theme of the captcha. At the moment you can only choose between light and dark. |
| captchaFontFamily | Allows you to select the font family of the captcha. Leaving this option blank will add the default font (Roboto) to the end of your <body> tag. |
| captchaClickDelay | The time (in milliseconds) during which the user can't select an image. Set to 0 to disable. |
| captchaHoverDetection | Prevent clicking on any captcha icon until the cursor hovered over the captcha at least once. |
| enableLoadingAnimation | Enable or disable the fake loading animation after clicking on an image. |
| loadingAnimationDelay | The time (in milliseconds) during which the fake loading animation will play until the user input actually gets validated. |
| showCredits | Enable or disable the credits element of the captcha. Please leave it enabled so people can find and use the captcha themselved. |
| captchaAjaxFile | The path to captcha-request.php. Make sure you use the correct path else the captcha won't be able to request the hashes, images or input validation. |
| captchaMessages (new) | Change the messages used by the captcha. All the changeable strings can be found in the index.php. |
| requestIconsDelay (new) | The captcha will not request hashes or images from the server until after this delay (in milliseconds). If a page displaying one or more captchas gets constantly refreshes (during an attack?), it will not request the resources right away. |
Events will be triggered at various point in the code. You can use a custom script to hook into the events and execute your own code if necessary.
| Event | Description |
|---|---|
| init.iconCaptcha | Will fire when the captcha has been fully built and the hashes and icons have been requested from the server. |
| refreshed.iconCaptcha | Will fire when the user selected the incorrect icon and the captcha is done refreshing it's hashes and icons. |
| selected.iconCaptcha | Will fire when the user selects an icon, regarless of if the icon is correct or not. |
| success.iconCaptcha | Will fire when the user selected the correct icon. |
| error.iconCaptcha | Will fire when the user selected the incorrect icon. |
- PHP 5.2+
- jQuery 1.12.3+
Version 1 was never created with the intention of it being used on live websites. This caused the security to lack which left massive loopholes around the captcha. A big part of the captcha validation was performed on the client-side, making it possible to manipulate the captcha by loading in custom scripts. It's design was also horrible and too big to fit with todays websites.
You can still download version 1 here, but remember that it's a bug- and exploit-filled version AND SHOULD NOT BE USED ON A LIVE WEBSITE.
The icons used in this project are made by Webalys.
This project is licensed under the MIT license.