IconCaptcha Plugin - ASP.NET

!~ IconCaptcha for ASP.NET is no longer being maintained. ~!
!~ The captcha can still be used, but will not receive any security updates in the future. ~!

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 ASP.NET can easily install IconCaptcha. The demo web application contains all the code needed to get the captcha working.

Download IconCaptcha for ASP.NET now

View live demo

Visit IconCaptcha for PHP here.

Features

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.

Requirements

.NET framework >= 4.0
ASP.NET MVC >= 5.0
jQuery >= 1.12.3

Note: Other .NET framework and ASP.NET versions may work, however the code was tested against the versions stated above.

Installation

Install via NuGet:

Install IconCaptcha with NuGet by executing one of the following commands:

Package Manager: Install-Package IconCaptcha
.NET CLI: dotnet add package IconCaptcha

Change the namespace of the Controllers/CaptchaController.cs to your liking.
Change the icon-captcha-main.js file settings to your liking, make sure the captchaAjaxFile setting is set correctly.
Include ~/Scripts/icon-captcha.min.js, ~/Scripts/icon-captcha-main.js and ~/Content/icon-captcha.css into your layout by either adding them to the App_Start/BundleConfig.cs or by adding them directly into the HTML.

Install manually:

Download IconCaptcha for ASP.NET.
Download the IconCaptcha Front-End package (v2.5.0 is the last supported version).
Unpack both repositories to somewhere on your computer.
Drag the content of the dist/css/ and dist/icons/ folders of the IconCaptcha Front-End package into the Content/ folder of your ASP.NET Web Application.
Drag the content of the dist/js/ folder of the IconCaptcha Front-End package into the Scipts/ folder of your ASP.NET Web Application.
Create a new icon-captcha-main.js script containing the IconCaptcha script initializer (see demo webapp): $('.captcha-holder').iconCaptcha();
Include ~/Scripts/icon-captcha.min.js, ~/Scripts/icon-captcha-main.js and ~/Content/icon-captcha.css into your layout by either adding them to the App_Start/BundleConfig.cs or by adding them directly into the HTML.
Build the code inside of the IconCaptcha/ folder and add the generated .DLL to your ASP.NET Web Application's references (Solution -> Add -> Reference -> Browse -> Select IconCaptcha.dll).
Copy the code from the Controllers/CaptchaController.cs or write your own validation implementation.

Before running the demo Web Application, make sure to restore the missing NuGet packages first.

Note: To make it easier to test the example captchas, the Front-End package is already included in this repository. However, these files might not always be up-to-date. To ensure you always have the latest version, please follow the instructions above.

Usage

HTML form:

<form action="SubmitForm/" method="post">
    ...
    
    <!-- The captcha will be generated in this element -->
    <div class="captcha-holder"></div>

    ...
</form>

...

<!-- Either add the initializer into the HTML, or follow the installation instructions.  -->
<script>
    $('.captcha-holder').iconCaptcha({
        // The captcha options go here
    });
</script>

ASP.NET implementation and validation:

 // See implementation at /Controllers/CaptchaController.cs

Options

The following options allow you to customize 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. You can always add your own custom themes by changing the SCSS file.
captchaFontFamily	Allows you to select the font family of the captcha. Leaving this option blank will result in the use of the default font `Arial`.
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	Show, hide or disable the credits element of the captcha. Hiding the credits will still add the credits to the HTML, but it will not be visible (only to crawlers). Disabling the credits will neither show or add the HTML. Use 'show', 'hide' or 'disabled'. Please leave it enabled so people can find and use the captcha themselves.
captchaAjaxFile	The path to the Controller. Make sure you use the correct path else the captcha won't be able to request the hashes, images or validate the input.
captchaMessages	Change the messages used by the captcha. All the changeable strings can be found down below.
requestIconsDelay	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 refreshed (during an attack?), it will not request the resources right away.

Messages

The following strings will be used by the captcha and can be changed / translated to your liking.

Error/event	Default	C#/JS
Captcha Header	Select the icon that does not belong in the row.	JS
Captcha Correct Title	Great!	JS
Captcha Correct Subtitle	You do not appear to be a robot.	JS
Captcha Incorrect Title	Oops!	JS
Captcha Incorrect Subtitle	You've selected the wrong image.	JS
Wrong Image	You've selected the wrong image.	C#
No Image Selected	No image has been selected.	C#
Empty Form	You've not submitted any form.	C#
Invalid Captcha ID	The captcha ID was invalid.	C#

Events

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.

Credits

The icons used in this project are made by Streamline.

License

This project is licensed under the MIT license.

mahmodifard / iconcaptcha-plugin-asp.net Goto Github PK