Implement Captcha in ASP.NET CORE

In this article, we will learn how to apply DNTCaptcha.Core Captcha in asp.net core in simple steps.

We use Captcha on websites to check which websites are accessed using humans and not robots. Without a Captcha on a website, various attacks can occur, such as DOS (denial of service) attacks, where a login page or registration page can be scripted and sent by bots.

Captcha is used on the Login, Forgot Password, and Registration page right after logging into the web application, which we usually don't use.

Content:

• Start with Captcha implementation in ASP.NET CORE

• Project structure

• Install the DNTCaptcha.Core package from the NuGet package

• Added DNTCaptcha.Core TagHelper to _ViewImports.cshtml file

• Adding a model

• Added controller and action method

• Register the DNTCaptcha.Core Captcha service in the ConfigureServices method of the startup class

• Adding a Captcha to the login view

• An important thing is required

• Login display code snippet

• Confirm Captcha on Post Request

• Try different modes

• References

Let's start with Captcha implementation in ASP.NET CORE

We are going to create a new application called WebCaptcha for the demo as shown below.

Next, we set the name of the WebCaptcha project and the location. In the last part, we will choose the .Net Core framework and ASP.NET Core version 3.1 as the framework for the application, and for some advanced settings such as HTTPS configuration and docker enable, we will not enable docker settings for this project.

Now finally click the create button to create the project

Project structure

Project structure generated by configuration.

After creating the next project, we will install the DNTCaptcha.Core package from the NuGet package.

Install the DNTCaptcha.Core package from the NuGet package

After installing another, we add TagHelper to the _ViewImports.cshtml file.

Adding DNTCaptcha.Core TagHelper to _ViewImports.cshtml file

Add the @addTagHelper *, DNTCaptcha.Core directive to the _ViewImports.cshtml file to make the DNTCaptcha.Core helpers are available for viewing.

@using WebCaptcha

@using WebCaptcha.Models

@addTagHelper *, Microsoft.AspNetCore.MVC.TagHelpers

@addTagHelper *, DNTCaptcha.Core

After adding the DNTCaptcha.Core tag helpers, next we add a Login Model to the Models folder to display the captcha sample.

Adding a model

We are going to add a model to the Model folder called LoginViewModel.

After adding LoginViewModel Next let's add the controller and action method.

Adding a controller and action method

We'll add a controller named Portal Controller along with a Login Action method to handle the POST and GET methods.

After adding the Controller and Action Method, we next register the DNTCaptcha.Core Captcha service in the Startup class.

Register the DNTCaptcha.Core Captcha service in the ConfigureServices method of the startup class

Here we have added the AddDNTCaptcha service, we have different configuration options, and we can use different storage providers like

1. SessionStorageProvider

2. MemoryCacheStorageProvider

3. CookieStorageProvider

4. DistributedCacheStorageProvider

Along with this, we can configure other options like End and Separators.

After registering the service, we will add a View and use the DNTCaptcha.Core Tag helper on this View.

Adding a Captcha to the login view

When displaying the login, we add 3 fields Username, Password, and Captcha.

Before adding the Captcha to the login view, let's see what different options we can configure in it.

We can configure various options

Generator-language

We can configure the Max and Min number if the captcha generator supports 5 different languages along with it.

1. English

2. Persian

3. Norwegian

4. Italian

5. Turkish

Display mode

There are 4 different display modes.

1. NumberToWord

2. ShowDigits

3. SUMOFTWONUMBERS

4. SumOfTwoNumbersToWords

Placeholder and Error Message

We can configure custom placeholders and error messages.

We can also customize various other options like font, color, textbox class, and error message class.

An important thing needed

• For the Refresh button you can configure different classes such as awesome font, and glyph icon, then you can see the refresh button rendering

Eg: – asp-refresh-button-class=”fas fa-redo btn-sm”

• Added validation library for Captcha validation

jquery-validation

jquery-validation-unobtrusive

• Added jquery.unobtrusive-ajax library

For the Captcha refresh button to work we need to add jquery. unobtrusive-ajax library because of DNTCaptcha.Core use jquery.unobtrusive-ajax refresh button which you can download from the below link and add to your project and refer to it.

Output

Verify the Captcha on the post request

To verify Captcha on Post DNTCaptcha has 2 ways

1. ValidateDNTCaptcha attribute

2. IDNTCaptchaValidatorService

• ValidateDNTCaptcha

add the ValidateDNTCaptcha attribute to the Post Action method and along with that, we have various configuration options like ErrorMessage, CaptchaGeneratorLanguage, and CaptchaGeneratorDisplayMode.

• IDNTCaptchaValidatorService

Using the IDNTCaptchaValidatorService we can confirm the Captcha using the HasRequestValidCaptchaEntry method. Here we have to add the error to ModelState.