Blazorise Captcha component

Integrate simple captchas into your Blazor applications with the Blazorise Captcha component.

This extension supports multiple captcha providers, enabling the addition of captcha functionality with provider-specific settings.

To use the Captcha component, install the base package and a provider package first.

Supported captcha providers

  • Google reCAPTCHA implemented via Blazorise.Captcha.ReCaptcha.

Installation

Base package

Install the base captcha extension from NuGet. 
dotnet add package Blazorise.Captcha

Provider package

Install the reCAPTCHA provider extension from NuGet. 
dotnet add package Blazorise.Captcha.ReCaptcha

Register services

Incorporate reCAPTCHA services by adding the following code to the relevant sections of Program.cs. 
using Blazorise.Captcha.ReCaptcha;

builder.Services
    .AddBlazorise( options =>
    {
        options.Immediate = true;
    } )
    .AddBlazoriseGoogleReCaptcha( reCaptchaOptions =>
    {
        reCaptchaOptions.SiteKey = Configuration["ReCaptchaSiteKey"]
        //Set any other ReCaptcha options here...
    });

Imports

In your main _Imports.razor, ensure you include: 
@using Blazorise.Captcha

Static files (reCAPTCHA)

Modify your project's HTML template to include the Google reCAPTCHA JavaScript files. The files you add depend on whether you're working with a WebAssembly or Server project:

  • For WebAssembly, update index.html.
  • For Server, update _Layout.cshtml or _Host.cshtml.
  • For .NET 8, update App.razor.

Google reCAPTCHA docs recommend adding the script to the end of the <head> tag with async and defer attributes. 

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Examples

ReCaptcha Checkbox

The following example demonstrates how to use the ReCaptcha integration. You can use the ReCaptchaOptions to configure the widget according to your needs. 
@using Microsoft.Extensions.Options
@using System.Text.Json

<Div Flex="Flex.AlignItems.Center" Gap="Gap.Is3">
    <Captcha @ref="@captcha" Solved="@Solved" Validate="@Validate" Expired="Expired" />

    <Button Color="Color.Primary" Clicked="@Reset">
        Reset
    </Button>
</Div>

@code {
    [Inject] IOptions<AppSettings> AppSettings { get; set; }

    [Inject] IHttpClientFactory HttpClientFactory { get; set; }

    private Captcha captcha;

    private void Solved( CaptchaState state )
    {
        Console.WriteLine( $"Captcha Success: {state.Valid}" );
    }

    private void Expired()
    {
        Console.WriteLine( "Captcha Expired" );
    }

    private async Task<bool> Validate( CaptchaState state )
    {
        Console.WriteLine( "Captcha Validate" );

        //Perform server side validation
        //You should make sure to implement server side validation
        //https://developers.google.com/recaptcha/docs/verify
        //Here's a simple example:
        var content = new FormUrlEncodedContent( new[]
        {
            new KeyValuePair<string, string>("secret", AppSettings.Value.ReCaptchaServerKey),
            new KeyValuePair<string, string>("response", state.Response),
         } );

        var httpClient = HttpClientFactory.CreateClient();
        var response = await httpClient.PostAsync( "https://www.google.com/recaptcha/api/siteverify", content );

        var result = await response.Content.ReadAsStringAsync();
        var googleResponse = JsonSerializer.Deserialize<GoogleResponse>( result, new JsonSerializerOptions()
            {
                PropertyNamingPolicy = JsonNamingPolicy.CamelCase
            } );

        return googleResponse.Success;
    }

    private async Task Reset()
    {
        await captcha.Reset();
    }

    public class GoogleResponse
    {
        public bool Success { get; set; }
        public double Score { get; set; } //V3 only - The score for this request (0.0 - 1.0)
        public string Action { get; set; } //v3 only - An identifier
        public string Challenge_ts { get; set; }
        public string Hostname { get; set; }
        public string ErrorCodes { get; set; }
    }
}

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

ReCaptchaOptions

Name Description TypeDefault
SiteKey The client side api key for google reCAPTCHA. string
Size The size of the widget. ReCaptchaSizeReCaptchaSize.Normal
Theme The color theme of the widget. ReCaptchaThemeReCaptchaTheme.Light
BadgePosition Reposition the reCAPTCHA badge. 'inline' lets you position it with CSS. This option is only available for invisible reCAPTCHA. ReCaptchaBadgePositionReCaptchaBadgePosition.BottomEnd
LanguageCode Refer to: https://developers.google.com/recaptcha/docs/language Defaults to: 'en' (English (US)) stringen
On this page