如何在Blazor Server中实现hCaptcha？集成异常求助

问题原因 #

Blazor Server默认使用ServerPrerendered渲染模式，会先预渲染静态HTML页面，此时hCaptcha脚本会生成验证码；但当Blazor建立SignalR连接完成后，会重新渲染组件DOM，替换掉预渲染时生成的验证码容器，导致验证码短暂显示后消失。

解决方案 #

通过Blazor的JS互操作，在组件DOM渲染完成后手动初始化hCaptcha，避免被Blazor的重新渲染覆盖。

步骤1：保留_Layout.cshtml中的hCaptcha脚本 #

无需修改原有脚本引入，确保<script src="https://js.hcaptcha.com/1/api.js" async defer></script>在<head>中正常存在。

步骤2：修改index.razor组件代码 #

使用ElementReference获取验证码容器，在OnAfterRenderAsync生命周期中调用hCaptcha的render方法初始化：

@page "/"
@inject IJSRuntime JS

<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 @ref="captchaElement"></div>

@code {
    private ElementReference captchaElement;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 手动初始化hCaptcha，传入sitekey
            await JS.InvokeVoidAsync("hcaptcha.render", captchaElement, new 
            { 
                sitekey = "10000000-ffff-ffff-ffff-000000000001" 
            });
        }
    }

    async Task CheckValidity()
    {
        // 获取验证码验证结果
        var captchaResponse = await JS.InvokeAsync<string>("hcaptcha.getResponse");
        // 调用后端验证逻辑，比如GeneralMethods.CheckCaptcha(captchaResponse);
    }
}

关键说明 #

• OnAfterRenderAsync是Blazor组件DOM渲染完成后触发的生命周期方法，firstRender确保只初始化一次验证码。
• 直接通过JS调用hcaptcha.render，绕过静态data-sitekey属性，避免Blazor重新渲染时重置容器属性。
• 如果需要验证用户输入，可调用hcaptcha.getResponse()获取验证令牌，再传给后端进行校验。

内容的提问来源于stack exchange，提问作者HerzogVolpe