隐形 Google ReCaptcha 与 Knockout 和 AJAX Post 的集成答案

【问题标题】：inivisible Google ReCaptcha Integration with Knockout and AJAX Post隐形 Google ReCaptcha 与 Knockout 和 AJAX Post 的集成
【发布时间】：2018-02-02 16:17:59
【问题描述】：

我正在尝试将 Google Invisible Captcha 集成到我的联系表单中。集成在一定程度上发挥了作用，我可以提交表单并出现挑战。

但是，我假设添加到 div 的数据回调会在挑战完成后再次调用我的提交函数？所以目前我必须在挑战完成后再次点击表单提交按钮？

我已将以下内容添加到我的联系表中（为简洁起见已减少）；

<div class="col-md-12">
     <div class="g-recaptcha"
             data-sitekey="mykey"
             data-callback="submitForm"
             data-size="invisible"
             data-bind="formSubmitButton">
     </div>
</div>

<div class="col-sm-12 text-center">
     <input id="formSubmitButton" data-bind="click: submitForm" type="button" class="btn btn-primary btn-block btn-lg" value="Send Enquiry" />
</div>

在我的 submitForm 方法中，我有以下代码；

this.submitForm = function () { 
...
    //if no field error validate captcha
    if (!error) {
        //validate captcha
        var response = grecaptcha.getResponse();

        if (response.length == 0) {
            grecaptcha.execute();
            return;
        }
    }
...
}

我认为我不需要再次提交表单是正确的吗？如果是这样，请问我在这里做错了什么。

【问题讨论】：

标签： ajax knockout.js recaptcha

【解决方案1】：

您不需要提交表单两次。

我发布了an answer to a similar question 关于使用淘汰 ajax 请求设置 recaptcha 的信息。

您可能需要重新调整设置表单和功能的方式。我发现您可以设置一个 jquery 函数用作所需的回调函数，该函数调用您的淘汰赛 ajax 请求。设置您的按钮或隐藏 div 以将其作为回调函数发送。我通过使用按钮找到了成功。

你只需要点击按钮，它会做它的recaptcha事情（向谷歌发送一个请求，然后保存它的响应，以后可以访问），然后调用你给它的回调函数，它调用你原来的淘汰 ajax 请求。该请求将像添加recaptcha 之前一样正常工作，但您将发送recaptcha 响应，就像您收到的一样： var response = grecaptcha.getResponse();这样您的服务器就可以对其进行验证。

我证明的link有更详细的答案，希望对你有帮助。

【讨论】：