ReCaptcha v3 in Blazor

Question

如何在blazor应用程序中实现repatcha v3？请给我一个完整的例子。

下面是v2的链接，但我想要使用repatchav3的相同功能。https://github.com/sample-by-jsakamoto/Blazor-UseGoogleReCAPTCHA

Answer 1

对于后端部分，它是相同的。

对于前端(Blazor WebAssembly(：

1. 在index.html文件中包含脚本：<script src='https://www.google.com/recaptcha/api.js?render=XXX'></script>
2. 在scripts.js中，将此函数添加到window中，以便您可以在C#中调用它：

window.getCaptcha = async function () {
await grecaptcha.ready(function() {});
const token = await grecaptcha.execute('XXX', {action: 'formSubmission'})
return token;
}

3. 在将captcha提交到后端之前，调用此JavaScript函数以获取captcha

[Inject]
private IJSRuntime JsRuntime { get; set; }

private async Task HandleValidSubmit()
{
var captcha = await JsRuntime.InvokeAsync<string>("getCaptcha");
// Form submission code
}