KITT.Web.ReCaptcha.Blazor 0.2.1

KITT.Web.ReCaptcha.Blazor

This project add Google reCaptcha to your Blazor apps.<br/> This project targets .NET 7 as supported Framework version.

Installation

This project is available on NuGet.

It can be installed using the dotnet add package command or the NuGet wizard on your favourite IDE.

  dotnet add package KITT.Web.ReCaptcha.Blazor

reCaptcha v2

Usage

The project gives you a Razor component which add the reCaptcha v2 widget.

Add the namespace KITT.Web.ReCaptcha.Blazor.v2 to your Razor Components or in the _Imports.razor file.

After that you can use the <ReCaptcha /> component in your EditForm like in this sample:

  <ReCaptcha SiteKey="<your reCaptcha v2 client key>"
             @bind-Value="yourPropertyToBind"
             Theme="Theme.Dark"
             Size="Size.Normal"
             TabIndex="1" />

  @code {
    private string yourPropertyToBind = string.Empty;
  }

Parameters

The component needs to be used inside an EditForm. It exposes the following properties:

reCaptcha v3

Usage

You can register reCaptcha using the AddReCaptchaV3 extension method:

  builder.Services.AddReCaptchaV3(options => options.SiteKey = "<YOUR CLIENT SITE KEY VALUE>");

After that you have to add the ReCaptchaScript component. If you're using Blazor WebAssembly, simply register it to the RootComponents calling the extension method:

  builder.RootComponents.RegisterReCaptchaScript();

If you're using Blazor Server, edit the _Host.cshtml page in this way:

  ....
  <script src="_framework/blazor.server.js"></script>
  <component type="typeof(ReCaptchaScript)" render-mode="ServerPrerendered" />

After that you can inject the ReCaptchaService to your component and call the VerifyAsync method:

  @inject ReCaptchaService ReCaptcha
  ...
  @code {
    private async Task SubmitAsync(){
      var result = await ReCaptcha.VerifyAsync(action: "submit");
      // ....
    }
  }

Samples

In the samples folder you can find both Blazor WebAssembly and Blazor Server samples. The site key used in this samples is only for testing purpose.