Magento 2.4.4 - Can not resolve reCAPTCHA parameter

Question

I just installed a new Magento 2.4.4 and configured the captcha inside Configuration > Security > Google reCAPTCHA Admin Panel.

I tried configuring:

• reCAPTCHA v2 ("I am not a robot")
• reCAPTCHA v2 Invisible
• reCAPTCHA v3 Invisible

Sometimes the Captcha works, and sometimes it doesn't.

These are the errors I got in my var/log/system.log.

[2022-08-14 10:21:40] main.ERROR: Magento\Framework\Exception\InputException: Can not resolve reCAPTCHA parameter. in /srv/public_html/releases/20220914094927/vendor/magento/module-re-captcha-ui/Model/CaptchaResponseResolver.php:25

[2022-08-14 10:23:44] main.ERROR: Magento\Framework\Exception\InputException: Can not resolve reCAPTCHA parameter. in /srv/public_html/releases/20220914094928/vendor/magento/module-re-captcha-ui/Model/CaptchaResponseResolver.php:25

How could I fix it?

Answer 1

You can apply this Composer patch with some changes, it will fix during deployment with cweagans/composer-patches:

diff --git a/view/adminhtml/templates/recaptcha.phtml b/view/adminhtml/templates/recaptcha.phtml
index 1f423e801087..0e4d79aac933 100644
--- a/view/adminhtml/templates/recaptcha.phtml
+++ b/view/adminhtml/templates/recaptcha.phtml
@@ -27,36 +27,56 @@
         element.src = 'https://www.google.com/recaptcha/api.js'
             + '?onload=globalOnRecaptchaOnLoadCallback&render=explicit';

-        window.globalOnRecaptchaOnLoadCallback = function () {
-            let token = '';
+        let isRecaptchaLoaded = false;
+        let token = '';
+        let maxRetryAttempts = 5;
+        let attempts = 0;
+        let widgetId = 0;
+        <?php if ($isInvisible): ?>
+        $('#login-form').submit(function (event) {
+            if (!token) {
+                event.preventDefault(event);
+                event.stopImmediatePropagation();
+                event.stopPropagation();

-            this.widgetId = grecaptcha.render('admin-recaptcha', {
-                <?php foreach ($renderingOptions as $key => $value): ?>
-                '<?= $block->escapeJs($key) ?>': '<?= $block->escapeJs($value) ?>',
-                <?php endforeach; ?>
-                'callback': function (token) { // jscs:ignore jsDoc
-                    <?php if ($isInvisible): ?>
-                    this.token = token;
-                    $('#login-form').submit();
-                    <?php endif; ?>
-                }.bind(this)
-            });
+                let attemptRecaptcha = () => {
+                    attempts++;
+                    if (attempts > maxRetryAttempts){
+                        console.error("Could not fetch invisible ReCaptcha token. Please refresh the page and try again.");
+                        return;
+                    }
+                    if (!isRecaptchaLoaded) {

-            <?php if ($isInvisible): ?>
-            $('#login-form').submit(function (event) {
-                if (!this.token) {
-                    grecaptcha.execute(this.widgetId).then(
-                        function() {
+                        setTimeout(() => {
+                            attemptRecaptcha()
+                        }, 1000);
+                        return;
+                    }
+                    grecaptcha.execute(widgetId)
+                        .then( () => {
                             event.preventDefault(event);
                             event.stopImmediatePropagation();
-                        }, function(reason) {
-                        });
+                            event.stopPropagation();
+                        }, (reason) => { })
+                        .catch(err => { console.error(err); });
                 }
-            }.bind(this));
-            <?php endif; ?>
-
-        }.bind(this);
+                attemptRecaptcha();
+            }
+        });
+        <?php endif; ?>
+        window.globalOnRecaptchaOnLoadCallback = function () {

+            widgetId = grecaptcha.render('admin-recaptcha', {
+                <?php foreach ($renderingOptions as $key => $value): ?> '<?= $block->escapeJs($key) ?>': '<?= $block->escapeJs($value) ?>',
+                <?php endforeach; ?> 'callback': function (_token) {
+                    <?php if ($isInvisible): ?>
+                    token = _token;
+                    $('#login-form').unbind('submit');
+                    $('#login-form').submit();
+                    <?php endif; ?> }
+            });
+            isRecaptchaLoaded = true;
+        }
         scriptTag.parentNode.insertBefore(element, scriptTag);
     });
 </script>

Reference: https://github.com/magento/magento2/issues/34975#issuecomment-1138745493