Open Closed

CMSKIT Pro Contact Form Recaptcha not working? #3480


User avatar
0
dboutwell created
  • ABP Framework version: v5.3.2

  • UI type: MVC

  • DB provider: MongoDB

  • Tiered (MVC) or Identity Server Separated (Angular): no

  • Steps to reproduce the issue:"

I'm not finding any real information to assist me on this one, but I can't use the ContactViewComponent for the ContactFeature in the CMSKit pro module because it doesn't appear to be instantiating the reCaptcha code and that is a required field, so every time I try to submit the contact form I get the following error:

Your request is not valid! The following errors were detected during validation. - The RecaptchaToken field is required.

In the public website module, there was a section for adding the SiteKey and SiteSecret, and I have done that:

context.Services.AddreCAPTCHAV3(o =>
        {
            o.SiteKey = "{redacted}";
            o.SiteSecret = "{redacted}";
        });

But beyond that I am not seeing any settings or documentation that suggests I do anything else. What am I missing?


4 Answer(s)
  • User Avatar
    0
    berkansasmaz created
    Support Team .NET Developer

    We are aware of this issue, it will be fixed with the patch version soon. As a workaround, you need to override ContactPublicController's SendMessageAsync method and delete the reCAPTCHA related code, also you need to override the Contact component's default.js and assign a value to its RecaptchaToken because RecaptchaToken Required attribute is added in ContactCreateInput.

    With this workaround solution, we disable reCAPTCHA, but as you said, it doesn't work even if we make the necessary configurations, but it will be solved with the patch version, so my advice is to wait for the patch version.

  • User Avatar
    0
    dboutwell created

    We are aware of this issue, it will be fixed with the patch version soon. As a workaround, you need to override ContactPublicController's SendMessageAsync method and delete the reCAPTCHA related code, also you need to override the Contact component's default.js and assign a value to its RecaptchaToken because RecaptchaToken Required attribute is added in ContactCreateInput.

    I don't have the source code for that module and my license doesn't support me downloading it, can you send me the SendMessageAsync code as it sits now so I can override?

  • User Avatar
    0
    berkansasmaz created
    Support Team .NET Developer

    Sure I can, you can find all the information you need below.

    Volo.CmsKit.Pro.Public.HttpApi/Volo/CmsKit/Public/Contact/ContactPublicController.cs

    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Mvc;
    using Owl.reCAPTCHA;
    using Owl.reCAPTCHA.v3;
    using Volo.Abp;
    using Volo.Abp.GlobalFeatures;
    using Volo.CmsKit.GlobalFeatures;
    
    namespace Volo.CmsKit.Public.Contact;
    
    [RequiresGlobalFeature(typeof(ContactFeature))]
    [RemoteService(Name = CmsKitProPublicRemoteServiceConsts.RemoteServiceName)]
    [Area(CmsKitProPublicRemoteServiceConsts.ModuleName)]
    [Route("api/cms-kit-public/contacts")]
    public class ContactPublicController : CmsKitProPublicController, IContactPublicAppService
    {
        protected IContactPublicAppService ContactPublicAppService { get; }
    
        protected IreCAPTCHASiteVerifyV3 SiteVerify { get; }
    
        public ContactPublicController(IContactPublicAppService contactPublicAppService, IreCAPTCHASiteVerifyV3 siteVerify)
        {
            ContactPublicAppService = contactPublicAppService;
            SiteVerify = siteVerify;
        }
    
        [HttpPost]
        public virtual async Task SendMessageAsync(ContactCreateInput input)
        {
            var response = await SiteVerify.Verify(new reCAPTCHASiteVerifyRequest
            {
                Response = input.RecaptchaToken,
                RemoteIp = HttpContext.Connection.RemoteIpAddress.ToString()
            });
    
            if (response.Success && response.Score > 0.5)
            {
                await ContactPublicAppService.SendMessageAsync(input);
            }
            else
            {
                throw new UserFriendlyException(L["RecaptchaError"]);
            }
        }
    }
    

    Volo.CmsKit.Pro.Public.Web/Pages/Public/Shared/Components/Contact/Default.js

    (function ($) {
        var l = abp.localization.getResource("CmsKit");
    
        abp.widgets.CmsContact = function ($widget) {
            var widgetManager = $widget.data("abp-widget-manager");
    
            function init() {
                $widget.find(".contact-form").on('submit', '', function (e) {
                    e.preventDefault();
    
                    var formAsObject = $(this).serializeFormToObject();
    
                    volo.cmsKit.public.contact.contactPublic.sendMessage(
                        {
                            name: formAsObject.name,
                            subject: formAsObject.subject,
                            email: formAsObject.emailAddress,
                            message: formAsObject.message,
                            recaptchaToken: formAsObject.recaptchaToken
                        }
                    ).then(function () {
                        abp.message.success(l("ContactSuccess"))
                            .then(function () {
                                widgetManager.refresh($widget);
                            });
                    })
                });
            }
    
            return {
                init: init
            }
        };
    })(jQuery);
    
  • User Avatar
    0
    dboutwell created

    Just wanted to confirm that I was able to implement the workaround for the time being and everything is running smoothly. Thank you for your help.

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11