KITT.Web.ReCaptcha.Blazor 1.0.2

KITT.Web.ReCaptcha.Blazor

This project add Google reCaptcha to your Blazor apps.<br/> This project targets .NET 8 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:

  using KITT.Web.ReCaptcha.Blazor.v3;
  //...
  builder.Services.AddReCaptchaV3(options => options.SiteKey = "<YOUR CLIENT SITE KEY VALUE>");

After that you have to add the ReCaptchaScript component.

Blazor Web App

With the new Blazor Web App you can add the ReCaptchaScript component to your App.razor:

  ....
  <ReCaptchaScript />
  <script src="_framework/blazor.web.js"></script>

Blazor WebAssembly

If you're using Blazor WebAssembly, simply register it to the RootComponents calling the extension method:

  builder.RootComponents.RegisterReCaptchaScript();

Blazor Server

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 samples both for reCaptcha v2 and reCaptcha v3 using the new Blazor Web App template.

The site key used in this samples is only for testing purpose.