如何在同一页上加载reCAPTCHA分数和复选框？

Question

如何在同一页上加载reCAPTCHA分数和复选框？

javascriptajaxspringjsprecaptcha

3

目前在登录页面，我需要在同一页上进行得分和复选框reCaptcha评估，如果得分失败，我需要动态加载复选框得分。

目前已经实现了这个功能，但是我不确定我是否正确地实现了它。

在我的HTML头部中，我有：

<script src="https://www.google.com/recaptcha/enterprise.js?render=${Login.reCaptchaScoreKey}"></script>

而在HTML主体中，我有：

<script src="https://www.google.com/recaptcha/enterprise.js?render=explicit"></script>

使用AJAX加载复选框的代码如下：

 var captchaContainer = grecaptcha.render('captcha_container', {
              'sitekey' : siteKey,
              'callback' : function() {
                $("#LOGIN").prop('disabled', false);
              }
});

为了提交分数，我需要执行以下操作（我将 reCaptcha 生成的令牌附加到一个 HTML 元素上，因为这是我能想到的唯一发送到后端的方法）：

grecaptcha.enterprise.ready(function() {
                grecaptcha.enterprise.execute(scoreKey, {action: action}).then(function(token) {
                    $('#g-recaptcha-response').val(token);
                    submitForm();
                });
              });

似乎很奇怪，我需要两次包含reCaptcha JS文件才能使它正常工作，这有点像是一种代码异味。如果我删除第一个JS文件，我的分数reCaptcha将会出现问题，如果我删除第二个JS文件，复选框将会出问题。

有没有一种方式可以只包含一次reCaptcha JS来实现我想要的功能？或者我的做法还可以吗？

- Nicolasome

请参考：https://developers.google.com/recaptcha/docs/faq#can-i-run-recaptcha-v2-and-v3-on-the-same-page - ssbarbee

2

感谢@ssBarBee，我在发布之前确实看到了那份文档，但是将V2和V3合并到同一页中的步骤似乎无法适用于reCaptcha Enterprise分数和复选框。如果我只包含文档中指示的第一个JS文件，则在尝试呈现复选框时会出现“grecaptcha.render不是函数”的错误。此外，添加“grecaptcha.ready”也似乎无法解决我的问题 :/ - Nicolasome

@Nicolasome 这个答案能帮到你吗？https://dev59.com/o6vka4cB1Zd3GeqPnxnB#50224757 - Sam Joshua

@SamJoshua 不会影响，但我收到了来自Google支持团队的答复。我在下面发布了答案。 - Nicolasome

2个回答

0

除了您自己的回答之外，如果您仍然想要这样做，请查看https://developers.google.com/recaptcha/docs/faq#can-i-run-recaptcha-v2-and-v3-on-the-same-page以获取更多详细信息。

- AskPete

在发布之前，我确实看过那份文件。不幸的是，将V2和V3合并到同一页上的步骤似乎无法适用于reCaptcha Enterprise分数和复选框。您发送的步骤只要求包含1个JS文件，但如果我按照文档中指示仅包含第一个JS文件，则在尝试使用企业版呈现复选框时会出现“grecaptcha.render不是函数”的错误。 - Nicolasome

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nicolasome · Accepted Answer

我收到了reCAPTCHA企业支持团队的官方回复：

感谢您在此处联系我们。我们建议不要在得分后面放置一个复选框。关于此问题有更多细节可在以下链接中了解：https://cloud.google.com/recaptcha-enterprise/docs/faq#id_like_to_use_the_score_from_to_show_a_challenge_checkbox_widget_how_can_i_do_this 那个FAQ点列出了对于复选框小部件放在得分后面的担忧，但它也过度简化了复选框小部件的工作方式。我们在我们的复选框小部件上执行“对抗性挑战”（基本上，我们向已知攻击者显示更难的挑战），但是当reCAPTCHA得分放在复选框后面时，我们无法这样做。

话虽如此，如果您确实希望这样做，您将不得不两次包含JS文件。

此外，这是他们邮件中发布的链接内容：

我想使用reCAPTCHA Enterprise的分数来展示一个挑战/复选框小部件。我该怎么做？

我们建议您不要这样做。reCAPTCHA Enterprise希望在实现中看到好的和坏的用户行为。如果您基于reCAPTCHA Enterprise的分数触发reCAPTCHA Enterprise复选框小部件，则该复选框小部件仅暴露给不良流量。由于这个原因，该小部件可能更难确定是否显示挑战。这可能会导致向欺诈用户或机器人发出无验证码（根本没有显示挑战）的情况，因为难以区分。

在这些情况下，我们建议您只使用基于挑战的站点密钥（如具有CHECKBOX站点密钥的reCAPTCHA Enterprise），但在每个页面上安装SCORE站点密钥，并发出grecaptcha.enterprise.execute来训练模型，但放弃对SCORE令牌的评估。本质上，通过训练reCAPTCHA Enterprise CHECKBOX站点密钥的用户行为，可以实现目标，从而向合法用户显示更少的挑战，并向欺诈者显示更多的挑战。