I'm using a static Blazor SSR project with Google ReCAPTCHA Enterprise. The ReCAPTCHA uses a checkbox. The implementation would be to add the following script to a page like the following example:
@page "/"
<PageTitle>Home</PageTitle>
<div class="container-fluid">
<section class="container-lg py-3">
<h3 class="text-center">Contacta con nosotros</h3>
<p class="text-center">Envienos un correo y nos pondremos en contacto con usted.</p>
<EmailForm/>
</section>
</div>
<HeadContent>
<script src="https://www.google.com/recaptcha/enterprise.js" async defer></script> </HeadContent>
The <EmailForm/> component is a form like the following:
<EditForm Enhance Model="ContactEmail" OnValidSubmit="HandleSubmitAsync" FormName="contactForm">
<DataAnnotationsValidator/>
<CustomValidation @ref="_customValidator"/>
<div class="mb-3">
<label class="form-label">Nombre:</label>
<InputText class="form-control" @bind-Value="@ContactEmail.Name"/>
<ValidationMessage For="@(() => ContactEmail.Name)"/>
</div>
... more code ...
<div class="g-recaptcha" data-sitekey="@SiteKey"]" data-action="@DataAction"></div>
<button type="submit" class="btn btn-primary">Enviar</button>
</EditForm>
Getting a result as can be seen in the following image:
When you change pages and return to the form page, the ReCAPTCHA disappears and does not reappear unless the page is reloaded again.
What is the reason for the ReCAPTCHA to disappear and not reappear? or how can I make it reappear?
What is desired is that the ReCAPTCHA always appears.
For me this solution worked.
On my github here : https://github.com/raphadesa/BlazorSSR
@page "/"
@inject IHttpContextAccessor HttpContextAccessor
@inject NavigationManager navigationManager
@using Newtonsoft.Json.Linq
<HeadContent>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</HeadContent>
<EditForm @ref=Form Enhance Model="ContactModel" OnSubmit="HandleSubmitAsync" FormName="contactForm">
<DataAnnotationsValidator/>
<div class="mb-3">
<label class="form-label">Nombre:</label>
<InputText class="form-control" @bind-Value="@ContactModel.Name" />
<ValidationMessage For="@(() => ContactModel.Name)" />
</div>
<div class="g-recaptcha" data-sitekey="you-sitekey" data-permanent></div>
<input type="hidden" name="g-recaptcha-response" />
<ValidationMessage For="@(() => ContactModel.IsRecaptchaValid)" />
<button type="submit" class="btn btn-primary">Enviar</button>
</EditForm>
@code{
[SupplyParameterFromForm]
Contact ContactModel { get; set; } = new();
private EditForm Form { get; set; }
HttpRequest httpRequest => HttpContextAccessor.HttpContext?.Request;
async Task<bool> validateCapcha(string response)
{
var secretKey = "you-secret-key";
var apiUrl = "https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}";
var requestUri = string.Format(apiUrl, secretKey, response);
var http = new HttpClient();
var request = await http.GetStringAsync(requestUri);
JObject jResponse = JObject.Parse(request);
var isSuccess = jResponse.Value<bool>("success");
return isSuccess;
}
async Task HandleSubmitAsync()
{
var response = httpRequest.Form["g-recaptcha-response"];
ContactModel.IsRecaptchaValid = await validateCapcha(response);
if(Form.EditContext.Validate())
{
navigationManager.NavigateTo("Weather");
}
}
}
//And then in the APP.razor file
...
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
...
<script src="_framework/blazor.web.js"></script>
<script>
Blazor.addEventListener('enhancedload', () =>
{
const recaptcha = document.querySelector('.g-recaptcha');
if (recaptcha) {
const sitekey = recaptcha.getAttribute('data-sitekey');
grecaptcha.render(recaptcha, {
'sitekey': sitekey,
'size': 'normal'
});
}
});
</script>