Captcha component for Blazor

Today, Jinget Blazor components are becoming open source. Jinget Blazor contains numerous useful components such as Captcha, Jalali datepicker, Jalali date range picker, table etc. In this article, configuring and using Captcha component has been described.

1. Download NuGet package:

Download the package from NuGet using Package Manager: Install-Package Jinget.Blazor You can also use other methods supported by NuGet. Check Here for more information.

2. Add References:

Add reference to jinget.core.css in your _Host.razor or App.razor files.

<link href="_content/Jinget.Blazor/css/jinget.core.css" rel="stylesheet" />

3. Enjoy the component

Add the component to your page and start using it:

<JingetCaptcha Width="200"
               Height="50"
               CharCount="5"
               CharSetType="CharSetTypeOptions.EnglishCharsPlusDigit"
               ContentCaseSensitivity="CharSetCaseSensitivityOptions.IgnoreCase"
               CaseSesitiveComparison=false>
</JingetCaptcha>

Parameters:

• Width: Captcha image box width. Default is 170.
• Height: Captcha image box height. Default is 40.
• CharCount: Total number of characters to be rendered in image. Default value is 5. The value should be greater than 0 otherwise it will be replaced by 5.
• CharSetType: Set the character set used for rendering the image. Default is DigitOnly. Supported values are: DigitOnly, EnglishCharsOnly, FarsiCharsOnly, EnglishCharsPlusDigit, FarsiCharsPlusDigit, EnglishCharsPlusFarsiChars, BlendAll, Custom
• ContentCaseSensitivity: Set the character set case sensitivity used for rendering the image. This property is only applied to the English characters. Default value is IgnoreCase. Supported values are: UpperCaseOnly, LowerCaseOnly, IgnoreCase
• CaseSesitiveComparison: Check if the input captcha text validation should be done in case sensitive or case insensitive manner.
• CustomCharSet: If ContentCharsType is set to Custom then characters provided by CustomCharSet will be used to render the image.
• IsRtlCharSet: If RTL language's character set is being used(such as Farsi, Arabic, etc), this property should be set to true.
• FontFamilies: Sets the Font families used for drawing the text inside the image. Default Values are Arial, Tahoma and Times New Roman

Callbacks:

• CaptchaChanged: Fires a callback whenever the captcha image is changed.

Methods:

• IsValid: Checks if the given input text is equal to the image's text.
• GetNewCaptchaAsync: Draw a new captcha image.

Some Samples:

• Captcha with Farsi characters only:

<JingetCaptcha @ref=captcha1
            Width="200"
            Height="50"
            CharCount="5"
            CharSetType="CharSetTypeOptions.FarsiCharsOnly"
            IsRtlCharSet=true>
</JingetCaptcha>

• Captcha with custom character set:

<JingetCaptcha @ref=captcha1
               Width="200"
               Height="50"
               CharCount="5"
               CharSetType="CharSetTypeOptions.Custom"
               CustomCharSet="abcdefxyz">
</JingetCaptcha>

• Captcha with callback:

<JingetCaptcha @ref=captcha1
               CharCount="5"
               CaptchaChanged="OnCaptchaChanged">
</JingetCaptcha>
...
@code{
 void OnCaptchaChanged()
 {
   ...
 }
}

• Captcha with Custom character set and custom font families(For example in this sample Hebrew characters used)

<JingetCaptcha @ref=captcha1
               Width="200"
               Height="50"
               CharCount="5"
               CharSetType="CharSetTypeOptions.Custom"
               CustomCharSet="אבגדהחטש"
               IsRtlCharSet=true
               FontFamilies=@(new string[]{"Calibri"})>
</JingetCaptcha>

• Multiple Captcha on page:

@using Jinget.Blazor.Captcha
@using static Jinget.Blazor.Captcha.JingetCaptcha

<div class="container">
    English Captcha
    <div class="row">
        <div class="form-group input-group">
            <JingetCaptcha @ref=captcha1
                           Width="200"
                           Height="50"
                           CharCount="5"
                           CharSetType="CharSetTypeOptions.EnglishCharsPlusDigit"
                           ContentCaseSensitivity="CharSetCaseSensitivityOptions.IgnoreCase"
                           CaseSesitiveComparison=false>
            </JingetCaptcha>
            <input type="text" class="form-control" id="captcha" @bind-value="@captcha1Value" />
            <button @onclick="IsValid_Captcha1" class="btn btn-primary">Validate</button>
        </div>
    </div>
    <div class="row">
        <div class="form-group input-group">
            <label>@captcha1ValidationResult</label>
        </div>
    </div>
    <hr />
    Farsi Captcha
    <div class="row">
        <div class="form-group input-group">
            <JingetCaptcha @ref=captcha2
                           Width="200"
                           Height="50"
                           CharCount="5"
                           CharSetType="CharSetTypeOptions.FarsiCharsOnly"
                           IsRtlCharSet=true>
            </JingetCaptcha>
            <input type="text" class="form-control" id="captcha" @bind-value="@captcha2Value" />
            <button @onclick="IsValid_Captcha2" class="btn btn-primary">Validate</button>
        </div>
    </div>
    <div class="row">
        <div class="form-group input-group">
            <label>@captcha2ValidationResult</label>
        </div>
    </div>
    <hr />
    Custom charset Captcha
    <div class="row">
        <div class="form-group input-group">
            <JingetCaptcha @ref=captcha3
                           Width="200"
                           Height="50"
                           CharCount="5"
                           CharSetType="CharSetTypeOptions.Custom"
                           CustomCharSet="אבגדהחטש"
                           IsRtlCharSet=true
                           FontFamilies=@(new string[]{"Calibri"})>
            </JingetCaptcha>
            <input type="text" class="form-control" id="captcha" @bind-value="@captcha3Value" />
            <button @onclick="IsValid_Captcha3" class="btn btn-primary">Validate</button>
        </div>
    </div>
    <div class="row">
        <div class="form-group input-group">
            <label>@captcha3ValidationResult</label>
        </div>
    </div>
    <hr />
    English Captcha with callback
    <div class="row">
        <div class="form-group input-group">
            <JingetCaptcha @ref=captcha4
                           CharCount="5"
                           CaptchaChanged="OnCaptchaChanged">
            </JingetCaptcha>
            <input type="text" class="form-control" id="captcha" @bind-value="@captcha4Value" />
            <button @onclick="IsValid_Captcha4" class="btn btn-primary">Validate</button>
        </div>
    </div>
    <div class="row">
        <div class="form-group input-group">
            <label>@captcha4Message</label>
            <label>@captcha4ValidationResult</label>
        </div>
    </div>
</div>
@code {
    string captcha1Value;
    string captcha2Value;
    string captcha3Value;
    string captcha4Value;

    JingetCaptcha captcha1;
    JingetCaptcha captcha2;
    JingetCaptcha captcha3;
    JingetCaptcha captcha4;

    string captcha1ValidationResult;
    string captcha2ValidationResult;
    string captcha3ValidationResult;
    string captcha4ValidationResult;
    string captcha4Message;


    async Task IsValid_Captcha1()
    {
        if (captcha1.IsValid(captcha1Value))
        {
            captcha1ValidationResult = "You entered the valid value:-)";
        }
        else
        {
            captcha1ValidationResult = "You entered the invalid value:-(";
            await captcha1.GetNewCaptchaAsync();
        }
    }

    void IsValid_Captcha2()
    {
        if (captcha2.IsValid(captcha2Value))
        {
            captcha2ValidationResult = "You entered the valid value:-)";
        }
        else
        {
            captcha2ValidationResult = "You entered the invalid value:-(";
        }
    }
    void IsValid_Captcha3()
    {
        if (captcha3.IsValid(captcha3Value))
        {
            captcha3ValidationResult = "You entered the valid value:-)";
        }
        else
        {
            captcha3ValidationResult = "You entered the invalid value:-(";
        }
    }
    void IsValid_Captcha4()
    {
        if (captcha4.IsValid(captcha4Value))
        {
            captcha4ValidationResult = "You entered the valid value:-)";
        }
        else
        {
            captcha4ValidationResult = "You entered the invalid value:-(";
        }
    }
    void OnCaptchaChanged()
    {
        if (captcha4 != null)
        {
            captcha4Message = $"this is callback called from captcha4 when captcha image is changed";
        }
    }
}

Further details:

• Download via NuGet: https://www.nuget.org/packages/Jinget.Blazor
• View Source code in GitHub: https://github.com/VahidFarahmandian/Jinget