Umbraco表单提交时调用JS函数实现隐形reCAPTCHA

您好Stackoverflow社区，

能否有人分享一下如何在Umbraco前端表单提交时调用JavaScript函数，并继续后续工作流？

由于我正在实现隐形reCAPTCHA，需要触发grecaptcha.execute();来生成客户端令牌。我必须在表单提交时执行此脚本，以生成reCAPTCHA令牌。

<script type="text/javascript">
    function  onSubmit(event){
      event.preventDefault();
      grecaptcha.execute();
     }
</script>

之后在ValidateField方法中通过以下代码获取客户端令牌进行验证：

var reCaptchaResponse = context.Request.Form["g-recaptcha-response"].ToString();

任何相关线索都将不胜感激！

目前我已查阅SurfaceController文档，但我的需求是在前端而非后端执行代码。

补充说明 #

我已为表单添加了提交事件监听器，但表单提交时并未等待令牌生成，导致ValidateSettings -> context.Request.Form["g-recaptcha-response"]的值为空。

自定义字段类型代码 #

@using Umbraco.Forms.Web
@using Microsoft.Extensions.Configuration
@model Umbraco.Forms.Web.Models.FieldViewModel
@inject IConfiguration Configuration
@{
    var siteKey = Configuration.GetSection("ReCaptchaEnterprise")["SiteKey"];
    if (!string.IsNullOrEmpty(siteKey))
    {
        Html.AddFormThemeScriptFile("https://www.google.com/recaptcha/enterprise.js?render=" + siteKey);
        Html.AddFormThemeScriptFile("https://www.google.com/recaptcha/api.js?render="+ siteKey);
        Html.AddFormThemeScriptFile("https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js");
        <div class="g-recaptcha"
             data-sitekey="@siteKey"
             data-size="invisible">
        </div>
        <script type="text/javascript">
            document.addEventListener('DOMContentLoaded', function(){
                var formContainer = document.querySelector(".umbraco-forms-form");
                var form = formContainer.querySelector("form");
                form.addEventListener('submit', (event) => {
                    console.log(grecaptcha.execute());
                }) 
            })       
        </script>
    }
    else
    {
        <p class="error">ERROR: reCAPTCHA is missing the Site Key. Please update the configuration to include a value.</p>
    }
}

自定义字段类型的后端类代码 #

using System;
using System.Collections.Generic;
using System.Linq;
using AngleSharp.Io;
using Microsoft.AspNetCore.Http;
using Umbraco.Forms.Core.Enums;
using Umbraco.Forms.Core.Models;
using Umbraco.Forms.Core.Services;
using Request = Org.BouncyCastle.Asn1.Ocsp.Request;

namespace Crna.ContentManagement.Web.FormsExtensions
{
    public class ReCaptchaEnterprise : Umbraco.Forms.Core.FieldType
    {
        public ReCaptchaEnterprise()
        {
            Id = new Guid(<guid>);
            Name = "ReCaptchaEnterprise";
            Description = "Render a custom reCaptcha enterprise field.";
            Icon = "icon-autofill";
            SortOrder = 10;
            FieldTypeViewName = "FieldType.ReCaptchaEnterprise.cshtml";
        }
        
        // Custom validation in here which will occur when the form is submitted.
        // Any strings returned will cause the submission to be considered invalid.
        // Returning an empty collection of strings will indicate that it's valid to proceed.
        public override IEnumerable<string> ValidateField(Form form, Field field, IEnumerable<object> postedValues, HttpContext context, IPlaceholderParsingService placeholderParsingService, IFieldTypeStorage fieldTypeStorage)
        {
            var returnStrings = new List<string>();

            var reCaptchaResponse = context.Request;
            
            Console.WriteLine("+++++++++++++++++++++ReCaptcha response+++++++++++++++++++++++++++" + context.Request.Form["g-recaptcha-response"]);
            
            // Also validate it against the default method (to handle mandatory fields and regular expressions)
            return base.ValidateField(form, field, postedValues, context, placeholderParsingService, fieldTypeStorage, returnStrings);
        }
    }    
}

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