在不可见的reCaptcha回调中传递变量

Question

我正在为我们的CMS应用程序中的一个网站创建一个表单，该应用程序使用了谷歌新的隐形reCaptcha。

然而，我被困在如何使用reCaptcha的回调上？

在使用验证码之前，代码非常简单：

HTML

<form>
    Form input fields here...
    <button id="a23k4l234lj2l-submit-button"></button>
</form>

jQuery

$('#a23k4l234lj2l-submit-button').click(function (e) {
    e.preventDefault();
    var that = $(this);
    if(Abayo.validate(that)) {
        Abayo.submit(that);
    }
})

Abayo库具有验证特定表单并将数据发送到处理表单数据的脚本的函数。

现在，我想将reCaptcha添加到表单中。文件说明如下：

1创建一个div与data-size='不可见'。

<div class="g-recaptcha"
      data-sitekey="your_site_key"
      data-callback="onSubmit"
      data-size="invisible">
</div>

2打电话给grecaptcha。从javascript方法执行。

grecaptcha.execute();

这是可行的，但是captcha的回调函数只给我一个响应代码来检查验证用户响应：

html" target="_blank">用户的响应g-recaptcha-response将作为回调函数的输入。

响应只告诉我是否可以将请求发送到服务器。

我需要的是submit按钮的位置、DOM元素或按钮的任何类型的标识，以便从与按钮匹配的表单中检索数据？

使用以下代码，我无法从表单中检索数据并将其发送到服务器？

$('#a23k4l234lj2l-submit-button').click(function (e) {
    e.preventDefault();
    grecaptcha.execute();
})

var onSubmit = function(response) {
    // var that cannot be defined, I don't have a DOM element anywhere?
    var that = ????
    if(Abayo.validate(that)) {
        Abayo.submit(that);
    }
}

有没有办法在reCaptcha回调中获取DOM元素？

Answer 1

你有没有尝试过像这样动态地设置onSubmit函数（保持你的div标记为data-call back="onSubmit"）：

$('#a23k4l234lj2l-submit-button').click(function (e) {
    e.preventDefault();
    var that = $(this);
    if(Abayo.validate(that)) {
      window.onSubmit = function(){ // defining onSubmit function dynamically here
        Abayo.submit(that); // you can access `that` here
      };
      grecaptcha.execute();
    }
})

注意：我手边没有sitekey来验证此代码。因此，将此视为一种方法而不是使用代码示例。

Answer 2

您可以以编程方式创建reaptcha。

首先创建您的验证码div。

<div id="myCaptcha" />

然后呈现验证码并使用令牌传递数据。

var that = $(this);
grecaptcha.render('myCaptcha', { 
  sitekey: 'xxx', 
  callback: function(token) {
    Abayo.submit(token, that) 
  }
});

更多信息请点击这里https://developers.google.com/recaptcha/docs/invisible#js_api