0

我需要澄清我和 recaptcha 库之间可能存在的误解。

我通过搜索和查找 v3 实现的 YouTube 视频看到的所有示例都在 a 的上下文中附加了 recaptcha 准备/执行功能<form>......但我试图在 a 的上下文之外使用<form>reCaptcha以下方式：

  1. 用户在搜索框中输入姓名或姓名的一部分
  2. 前端，在输入延迟或回车键后，在系统中获取与此输入匹配的名称（部分或完整）
  3. 结果被加载到自动填充的下拉列表中。
  4. 用户通过单击或向下箭头选择适当的名称，这将搜索有关该用户的特定数据。

如果我能弄清楚如何让 reCaptcha 令牌出现在名称下拉搜索中，我将能够将该解决方案扩展到第四点......但我担心这可能是不可能的。

以下所有代码都是 JavaScript：

相关位

搜索字段上的侦听器：

$(".web-search-content").on("keyup", ".searchField", function(e) {
    if (
      e.keyCode != 40 &&
      e.keyCode != 38 &&
      e.keyCode != 13 &&
      e.keyCode != 27
    ) {
      delayCall($(this), 800, nameSearch, e);
    } else if (e.keyCode == 27) {
      $(".name-search-results").remove();
    }
  });

姓名搜索功能：

function nameSearch(obj, e) {
    if (!e) {
      e = window.event;
    }
    var container = $(".name-search-results");
    if (
      e.keyCode != 40 &&
      e.keyCode != 38 &&
      e.keyCode != 13 &&
      e.keyCode != 27
    ) {
      var field = obj;
      var value = field.val();
      if (value != undefined && value.length > 0) {
        var captchaToken = "";
        grecaptcha.execute('<REDACTED>', {action: 'webSearch/nameSearch'}).then(function(token) {
          captchaToken = token;
          console.log(captchaToken);
          document.getElementById("g-recaptcha-response").value = token;
        })

        $.post("../webSearch/nameSearch", { query: value, captchaToken: captchaToken }, function(resp) {
          showNameResults(resp);
        });
      } else {
        container.remove();
      }
    }
  }

有人可以确认 reCaptcha v3 必须在表单的上下文中使用，或者它可以处理这样的事件......如果是这样，如何处理？

4

1 回答 1

0

reCAPTCHA v3 与表单提交无关。从文档：

reCAPTCHA v3 永远不会打扰您的用户，因此您可以随时运行它而不会影响转换。当 reCAPTCHA 与您的网站有最多的交互上下文时，它的效果最好，这来自于看到合法和滥用行为。出于这个原因，我们建议在表单或操作以及分析页面的背景中包含 reCAPTCHA 验证。

注意：您可以在同一页面上使用不同的操作多次执行 reCAPTCHA。

因此，您无需等待用户提交表单即可运行 reCAPTCHA。相反，您可以在后台调用整个站点的不同操作。存储返回的分数，然后在提交表单时检查该分数以确定您要采取的操作。

// Decide what score you want to allow as a pass
const threshold = 0.5;

// Set up a variable
let score = null;

// Call reCAPTCHA on page load
grecaptcha.ready(function () {
  grecaptcha.execute('[redacted]', { action: 'pages/search' }).then(function (token) {
    // Create an endpoint on your server to validate the token and return the score
    fetch('/recaptcha-verify?action=pages/search&token=' + token).then(function (response) {
      response.json().then(function (data) {
        score = data.score;
      });
    });
  });
});

// Later, e.g. in the form submission just check if the score is above the threshold
if (score >= threshold) {
  // success
  submitForm();
} else {
  // score too low
  doSomethingElse();
}

这是这里使用的方法：

于 2019-09-02T16:24:19.817 回答