在不可见的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添加到表单中.该文件说以下内容:

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