I have been trying to implement a hCaptcha to my blazor-server project for the last couple days, but everything i tried failed in one way or another.
My most promising attempt was to just add the HTML-code from the hcaptcha website to the app. I added
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
inside the <!head> element of the _Layout.cshtml, and
<div class="h-captcha" data-sitekey="10000000-ffff-ffff-ffff-000000000001"></div>
in my index.razor, to show the captcha there. The odd thing is: Every time I load the site, the captcha is visible for about 0.2 seconds and then becomes invisible. I also tried the same code in the w3schools.com HTML Simulator and it worked perfectly fine, so I assume this has something to do with blazor.
Here is my code index.razor
@page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<p>Currently, the <code>ChildContext</code> is temporarily rendered by the week component, and the data-related operating components in all cells are not encapsulated and will be refined later</p>
<div class="h-captcha" data-sitekey="10000000-ffff-ffff-ffff-000000000001"></div>
@code {
protected override async Task OnInitializedAsync()
{
}
void CheckValidity()
{
//GeneralMethods.CheckCaptcha();
}
}
and _Layout.cshtml
@using Microsoft.AspNetCore.Components.Web
@namespace NixPfusch.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="NixPfusch.styles.css" rel="stylesheet" />
<!--Added Script for hCaptcha-->
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
@RenderBody()
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss"></a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Any help would be apprechiated!