Google reCaptcha is a process that helps to protect websites form spam and abuse. To implement Google reCaptcha in Blazor, refer to the Google reCaptcha script link the WebAssembly app and render the reCaptcha by calling the JavaScript function.
Follow these steps to implement Google reCaptcha in Blazor WebAssembly.
Add the Google reCaptcha renderer function in a separate JavaScript file under the wwwroot folder.
[googlereCaptcha.js]function googleRecaptcha(dotNetObject, selector, sitekeyValue) {
return grecaptcha.render(selector, {
'sitekey': sitekeyValue,
'callback': (response) => { dotNetObject.invokeMethodAsync('CallbackOnSuccess', response); },
'expired-callback': () => { dotNetObject.invokeMethodAsync('CallbackOnExpired', response); }
});
};
function getResponse(response) {
return grecaptcha.getResponse(response);
}Add the reCaptcha script link and reference the reCaptcha.js file source in index.html.
[index.html]<body>
. . .
. . .
<script src="googlereCaptcha.js"></script>
<!-- reCaptcha rendering script -->
<script src="https://www.google.com/recaptcha/api.js"></script>
</body >Now call the rendering reCaptcha function in JavaScript from the Razor page using JavaScript Interop and show the reCaptcha response on button click.
Note: To start using reCaptcha, you need to generate the API site key for your site. Refer to this link to generate the site key.
[Index.razor]@page "/"
@inject IJSRuntime JSRuntime
@using System.ComponentModel
<h3>Google reCAPTCHA</h3>
<div id="google_recaptcha "></div>
<button class="btn btn-primary" @onclick="ShowResponse">Show Response</button>
<br />
<p>@captchaResponse</p>
@code {
private string captchaResponse;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeAsync<int>("googleRecaptcha", DotNetObjectReference.Create(this), "google_recaptcha ", "your-sitekey");
}
await base.OnAfterRenderAsync(firstRender);
}
[JSInvokable, EditorBrowsable(EditorBrowsableState.Never)]
public void CallbackOnSuccess(string response)
{
captchaResponse = response;
}
[JSInvokable, EditorBrowsable(EditorBrowsableState.Never)]
public void CallbackOnExpired(string response)
{
//...
}
private void ShowResponse()
{
captchaResponse = $"The response for the Google reCAPTCHA widget: {captchaResponse}";
}
}
Share with