CMS365.BlazoredGoogleCaptcha 9.0.5

BlazoredGoogleCaptcha: Google reCAPTCHA V1 and V2 for Blazor

BlazoredGoogleCaptcha is a lightweight .NET library that simplifies Google reCAPTCHA integration in Blazor WebAssembly (WASM) and Blazor Server applications. It provides an easy-to-use component for both reCAPTCHA v2 ("I'm not a robot" checkbox) and reCAPTCHA v3 (invisible background verification).

Installation

BlazoredGoogleCaptcha is available on NuGet. Use the package manager console in Visual Studio to install it:

Install-Package CMS365.BlazoredGoogleCaptcha

Getting started

Navigate to https://www.google.com/recaptcha/admin/create and register 2 sites.

Select "Score based (v3)" for the first site and "Checkbox (v2)" for the second site. Add demain, for example localhost for testing purposes.

Also select Google Cloud Platform project, if you have one, or create a new one.

Once the projct has been created, click on the settings icon in the top right corner of the page and copy the site key and secret key for both reCAPTCHA v2 and v3.

Install the package and create 2 seperate pages for V2 and V3 reCAPTCHA.

In the demo project, I have created 2 pages : 'CounterV2.razor' and 'CounterV3.razor'.

V2 ReCaptcha

Add the following code to your Program.cs file to register the CaptchaService and configure the BlazoredGoogleCaptcha component:

builder.Services.AddSingleton<CaptchaService>();

Open the 'CounterV2.razor' page and add the following code:

@page "/counterv2"

@rendermode InteractiveServer

@using BlazoredGoogleCaptcha.Responses
@using BlazoredGoogleCaptcha.Services

@inject IConfiguration configuration
@inject CaptchaService captchaService

<PageTitle>Counter</PageTitle>
<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<Captcha SiteKey="@configuration["v2SiteKey"]" OnSuccess="@OnCaptchaSuccess" OnExpired="@OnCaptchaExpired"></Captcha>
<button class="btn btn-primary" @onclick="IncrementCount" disabled="@IsButtonDisabled">Click me</button>

@code {
    private int currentCount = 0;
    private bool captchaVerified = false;
    private bool IsButtonDisabled => !captchaVerified;

    private void IncrementCount()
    {
        currentCount++;
    }
    private async void OnCaptchaSuccess(string response)
    {
        string? captchaSecret = configuration["v2SecretKey"];
        CaptchaV2Response? captchaResponse = await captchaService.VerifyV2(captchaSecret, response);
        if (captchaResponse.Success)
        {
            captchaVerified = true;
            StateHasChanged();
        }
        else
        {
            //show error message or handle failure
        }
    }
    private void OnCaptchaExpired()
    {
        captchaVerified = false;
    }
}

By default, V2 will be rendered.

In the example aboue, I have the counter button disbaled on the page load.

Once the user clicks on the reCAPTCHA checkbox and passes the verification, the button will be enabled.