DNTCaptcha.Blazor 1.2.1

DNTCaptcha.Blazor

DNTCaptcha.Blazor is a captcha generator for the interactive Blazor based applications. It uses the standard HTML5 Canvas API to draw the captcha and that's why it's compatible with both interactive (not SSR!) Blazor WASM and Server apps. It no longer uses the System.Drawing.Common package which has serious cross platform and stability issues.

Install via NuGet

To install DNTCaptcha.Blazor, run the following command in the Package Manager Console:

PM> Install-Package DNTCaptcha.Blazor

You can also view the package page on NuGet.

Usage

After installing the DNTCaptcha.Blazor package, add the following definition to the _Imports.razor file:

@using DNTCaptcha.Blazor

Then to use it, add its new tag and settings to your view. Here you will need two properties and one Compare attribute to work with it:

[Required]
[Compare(nameof(CaptchaText1), ErrorMessage = "The entered `Security Number` is not correct.")]
public string EnteredCaptchaText1 { set; get; }

public string CaptchaText1 { set; get; }

<EditForm Model="Model" OnValidSubmit="DoLoginAsync">
    <InputText name="SecurityNumber" @bind-Value="Model.EnteredCaptchaText1" />
    <DntInputCaptcha @bind-Value="Model.CaptchaText1" />

The EnteredCaptchaText1 will receive the entered text from the user and the CaptchaText1 contains the automatically generated captcha code. Now the Compare attribute will compare these two values during the OnValidSubmit event to provide an standard and clean validation.

Note: Using the Compare attribute will make the whole process nicer, but it's not mandatory. You can omit it and then do the comparison manually on the form's submit (if (userLoginViewModel.CaptchaText1.Equals(userLoginViewModel.EnteredCaptchaText1)){ }). Now if the inputs don't match, redraw the captcha with the new data. Also to protect the form against brute-forces, you can use the AbsoluteExpiration parameter to control the refresh frequency of the captcha.

Supported Languages

You can find all of the currently supported languages here. To add a new language, kindly contribute by editing the following files:

• Language.cs
• HumanReadableIntegerProvider.cs

Samples

• Blazor WASM Sample
• Blazor Server Sample

Demo

You can see a demo of this component with all of its different supported DisplayModes here