Persilsoft.Recaptcha.Blazor 1.0.21

Persilsoft.Recaptcha.Blazor

It exposes a service that allows you to obtain a reCAPTCHA token and validate that token through a verification endpoint that you need to add to your backend.

Example

First, you need to register the following service group in the dependency container.

using Persilsoft.Recaptcha.Blazor.Options;
using ServiceCollectionExtensions;

Action<RecaptchaOptions> recaptchaOptionsConfigurator = options =>
builder.Configuration.GetSection(RecaptchaOptions.SectionKey).Bind(options);
builder.Services.AddRecaptchaServices(recaptchaOptionsConfigurator);

In the appsetting.json configuration file, you need to configure the following key:

"RecaptchaOptions": {
        "WebApiBaseAddress": "https://persilsoft.api",
        "VerifyRecaptcha": "/recaptcha/verify",
        "SiteKey": "xxxxxxxxxxx"
    }

Where:
WebApiBaseAddress: It is the Base URL of your backend server that will expose the token verification endpoint.
VerifyRecaptcha: It is the token verification endpoint on your backend server.
SiteKey: It is your website key, also known as the reCAPTCHA key.

Now, you can use the service in your Razor page.

@page "/recaptcha"
@using Persilsoft.Recaptcha.Shared.Interfaces
@inject IRecaptchaService RecaptchaService

<h3>Demo</h3>

<EditForm Model="@model" OnValidSubmit="Send">
    <DataAnnotationsValidator />
    <div class="mb-3">
        <label for="name" class="form-label">Nombre</label>
        <input type="text" @bind="model.Name" class="form-control" id="name" name="name" />
        <ValidationMessage For="@(() => model.Name)" />
    </div>
    <div class="d-grid gap-2 col-6 mx-auto">
        <button class="btn btn-danger" type="submit">Enviar</button>
    </div>
    <hr />
    <div class="mt-3">
        <textarea disabled class="form-control">
            @result
        </textarea>
    </div>
</EditForm>

@code {
    private readonly PersonModel model = new();
    private string result;

    private async Task Send()
    {
        try
        {
            await RecaptchaService.TryVerifyInteractionAsync();
            result = "Successful validation!!!";
        }
        catch (Exception ex)
        {
            result = ex.Message;
        }
    }

    public class PersonModel
    {
        [Required(ErrorMessage = "{0} is required.")]
        public string Name { get; set; }
    }
}

Note: The invocation of the TryVerifyInteractionAsync method will throw an exception if the reCAPTCHA validation process fails.