CMSKIT Pro Contact Form Recaptcha not working? #3480 | Support

dboutwell created 2 years ago

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)

0

berkansasmaz created 2 years ago
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.
0

dboutwell created 2 years ago

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?

berkansasmaz created 2 years ago

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);

0

dboutwell created 2 years ago

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.

1 1

Have an answer to this question? Log in and write your answer.