Laravel集成reCAPTCHA v3时g-recaptcha-response返回空值问题求助

核心问题定位 #

当前代码核心问题是定义的onClick函数没有关联到表单提交触发逻辑，提交表单时不会执行令牌获取和赋值逻辑，所以隐藏域始终为空。同时reCAPTCHA的令牌获取是异步操作，未做异步等待直接提交也会导致值还没写入就完成提交。

具体修复步骤 #

• 第一步：给表单提交按钮绑定点击事件，确保提交动作先触发令牌获取逻辑

<!-- 在原有提交按钮上增加onclick属性绑定 -->
<button type="submit" onclick="onClick(event)">提交表单</button>

• 第二步：调整JS逻辑，令牌赋值完成后再手动提交表单

function onClick(e) {
    e.preventDefault();
    // 获取当前触发提交的所属表单
    const submitForm = e.target.closest('form');
    grecaptcha.ready(function() {
        grecaptcha.execute('{!! $settings->recaptcha_site_key !!}', {action: 'submit'}).then(function(token) {
            console.log('test1');
            if (token) {
                console.log('test2');
                document.getElementById('recaptcha').value = token;
                // 令牌写入完成后再提交表单
                submitForm.submit();
            }
        });
    });
}

验证方法 #

修改完成后打开浏览器开发者工具，点击提交按钮查看控制台是否输出test1、test2日志，同时在元素面板查看id为recaptcha的隐藏域是否被填入了字符串值即可。

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