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 =＆＃39;隐藏＆＃39;创建一个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 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标记与[{1}}保持一致）：

data-callback="onSubmit"

注意：我没有方便地验证此代码的sitekey。因此，请将此视为一种方法而不是工作代码示例。

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

问题

2 个答案: