问如何在页面的背景中包含reCAPTCHA v3？
EN

Stack Overflow用户

提问于 2020-04-27 16:25:56

回答 2查看 1.4K关注 0票数 7

在reCAPTCHA v3文档中，它说

当reCAPTCHA与您的站点交互的上下文最多时，它的工作效果最好，因为它既可以看到合法的，也可以看到滥用的行为。因此，我们建议在表单或操作以及用于分析的页面的背景中包括reCAPTCHA验证。

我们如何在页面背景中运行它？

假设我有一个处理多个网页的React应用程序，对于我的一个网页，它是一个注册表单，当用户注册时，我想获得一个风险评分。当文档要求在其他页面的后台运行reCAPTCHA时，这是否意味着只要<script src="https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key"></script>在页眉中，它就在其他页面上运行？还是需要在所有其他页面上调用grecaptcha.execute(...)，而不仅仅是注册页面？

recaptcha

recaptcha-v3

云联络中心6.1折起

灵活稳定的一体化云联络中心，助力快速搭建集电话、在线交流、音视频通话为一体的客户联络平台

回答 2

Stack Overflow用户

发布于 2020-08-11 14:04:45

只要您有附加的脚本，它将运行在页面的背景。如果reCAPTCHA横幅/图标显示在页面上(通常是右下角)，您可以看到它正在运行。grecaptcha.execute(...)应该在特定的操作上运行，例如当您单击按钮注册时。

票数 3

Stack Overflow用户

发布于 2020-08-11 15:22:37

@jojochuu，你的回答完全正确。谢谢你这么说。

我找到了运行grecaptcha.execute的另一个原因。伐木。加载api.js (下面代码中的第二行)足以激活recaptcha。它显示飞出的recptcha按钮。

我选择添加第二个调用grecaptcha并获取令牌的脚本。然后，我使用标记从谷歌获得分数和任何错误代码。我将这些数据与访问者的IP地址和时间戳一起记录下来，这样我就可以看到分数是如何随时间变化的。然后，我可以将我的日志与访问日志进行比较，并可能发现一些我想禁止的IP。大多数情况下，我只是想知道分数是如何变化的。我将通过删除第二个脚本块来禁用日志记录。

这是我发现的最好的教程。把它和google文档结合起来就足够学习如何正确地做recaptcha了。

<input type="hidden" id="visitor_ip" value="<?=$visitor_ip; ?>">
<script src="https://www.google.com/recaptcha/api.js?render=public-site-key" async defer></script>
<script>
    // This correctly gets the token, but doesn't verify the user response (action).
    function execGrecaptcha() {
        grecaptcha.ready(function() {
            grecaptcha.execute('<?=$settings->recap_public; ?>', {action: '<?=$actionName; ?>'}).then(function(token) {
                logRecaptchaResults(token);
            });
        });
    }

    // Run after page loaded
    window.onload=execGrecaptcha;

    // Send token/ip to server for logging via ajax
    function logRecaptchaResults(token) {
        var vip=document.getElementById('visitor_ip');
        $.ajax({
            url: "https://<?=HOST_NAME_DOT; ?>domain.com/ajax/logit.php",
            type: "get", //send it through get method
            data: {
                "token": token,
                "visitor_ip": vip.value
            },
        });
    }
</script>