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

Question

我正在我们的CMS应用程序中创建一个网站表单，该表单使用了Google新的隐形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添加到表单中。 documentation说如下：

1创建一个data-size ='invisible'的div。

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

2从javascript方法调用grecaptcha.execute。

grecaptcha.execute();

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

用户的响应g-recaptcha-response将是回调函数的输入。

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

我需要的是提交按钮，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

您可以通过编程方式创建recaptcha。

首先创建验证码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

Answer 2

你有没有像这样动态设置onSubmit函数（保持你的div标签与data-callback="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。因此，请将此视为一种方法而不是工作代码示例。