相关位

Question

我需要清理一下我和Recaptcha库之间潜在的误会。

我从搜索和查找v3实现的YouTube视频中看到的所有示例都在<form>的上下文中附加了Recaptcha ready / execute函数...但是我试图使用通过以下方式在<form>的上下文之外进行reCaptcha：

用户在搜索框中输入名称或名称的一部分
在输入或Enter键延迟之后，前端会在系统中获取与该输入匹配的名称（部分或全部）
结果被加载到自动填充的下拉列表中。
用户通过单击或向下箭头选择合适的名称，这将搜索有关该用户的特定数据。

如果我能弄清楚如何使reCaptcha令牌在名称下拉搜索中发生，我将能够将该解决方案扩展到第四点……但是，恐怕这是不可能的。 / p>

下面的所有代码都是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();
    }
  });

nameSearch函数：

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，还是可以处理此类事件……如果是这样，怎么办？

Answer 1

reCAPTCHA v3与表单提交无关。来自the docs：

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();
}

这是这里使用的方法：

使用reCaptcha3没有表格？

相关位

搜索字段上的监听器：

nameSearch函数：

1 个答案: