在 Umbraco 中创建自定义字段类型以支持隐形企业 reCaptcha

Question

Stackoverflow 社区您好。

目前，我发现 Umbraco 没有支持企业隐形 reCaptcha 的选项。经过一段时间的了解后，我确实遇到了这个文档，我们可以在其中创建自定义字段类型并拥有自定义验证逻辑。

到目前为止我做了什么：

添加新班级

ReCaptchaEnterprise.cs

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Http;
using Umbraco.Forms.Core.Enums;
using Umbraco.Forms.Core.Models;
using Umbraco.Forms.Core.Services;

namespace FormsExtensions
{
    public class ReCaptchaEnterprise : Umbraco.Forms.Core.FieldType
    {
        public ReCaptchaEnterprise()
        {
            Id = new Guid("e3ab6a21-bc99-4cb8-999e-ad01203d61bd"); // Replace this!
            Name = "ReCaptcha Enterprise";
            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>();

            if (!postedValues.Any(value => value.ToString().ToLower().Contains("custom")))
            {
                returnStrings.Add("You need to include 'custom' in the field!");
            }

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

局部视图

FieldType.ReCaptchaEnterprise.html

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage

@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);
        <div class="g-recaptcha"
             data-sitekey="@siteKey"
             data-callback="onSubmit" data-size="invisible">
        </div>
         <input type="hidden" name="g-recaptcha-response" />
         
        <script type="application/javascript">
            function  onSubmit(event){
                event.preventDefault();
                grecaptcha.execute();
            }
        </script>
    }
    else
    {
        <p class="error">ERROR: reCAPTCHA is missing the Site Key. Please update the configuration to include a value.</p>
    }
} 

Umbraco 后台视图

App_plugins/UmbracoFotms/backoffice/common/fieldtypes/ReCaptchaEnterprise.html

<div class="g-recaptcha" data-sitekey="<site-key>" data-size="invisible"></div>

我可以在表单中添加 reCaptcha 企业。但是，当我转到“内容”并通过“富文本编辑器”>“宏”将其添加到那里时，会引发以下异常。

从服务器收到错误 发生错误 无法将源类型 Umbraco.Forms.Web.Models.FieldViewModel 绑定到模型类型 Umbraco.Cms.Core.Models.PublishedContent.IPublishedContent。

异常详情 Umbraco.Cms.Web.Common.ModelBinders.ModelBindingException、Umbraco.Web.Common、Version=12.0.1.0、Culture=neutral、PublicKeyToken=null：无法将源类型 Umbraco.Forms.Web.Models.FieldViewModel 绑定到模型类型 Umbraco。 Cms.Core.Models.PublishedContent.IPublishedContent.

我不知道出了什么问题，我正在调试问题，因为过去 2 天找不到任何解决方案。

我将非常感谢任何解决此问题的线索，或者如果您可以分享有关如何在 Umbraco 中创建自定义字段的经验。非常感谢您花时间阅读我的问题直到这里。

我尝试过遵循其他软件包，它们做了类似的事情来实现 reCaptcha，但到目前为止没有任何帮助。

Answer 1

您的实施似乎是正确的；除此之外，我看不到您如何将新字段注册为依赖项，这可能是这里的问题。请参阅下面的示例代码来注册您的新字段。

如果这不能解决您的问题，那么我的建议是创建一个更简单的答案类型遵循此官方文档，然后逐步根据您的要求进行更新，直到它按您的预期工作。

using Umbraco.Cms.Core.Composing;
using Umbraco.Cms.Core.DependencyInjection;
using Umbraco.Forms.Core.Providers;

    namespace MyFormsExtensions
    {
        public class Startup : IComposer
        {
            public void Compose(IUmbracoBuilder builder)
            {
                builder.WithCollectionBuilder<FieldCollectionBuilder>()
                    .Add<MyCustomField>();
            }
        }
    }