进行AJAX发布之前如何使用Google Recaptcha

Question

我有一个使用AJAX将数据提交到Kulahub API的表单，但是我需要首先验证用户填写的表单是真实的，然后在从Google处获得确认后，进行AJAX发布，但是，我无法找到简单的解决方案。

帖子正常运行，并将数据提交到API。

它是正确的，我已经尝试了以下线程解决方案； Invisible ReCaptcha with jQuery ajax Invisible reCaptcha AJAX Call Google Invisible Recaptcha Using Jquery Ajax and PHP Ajax Form With Google Invisible Recaptcha

我正在Umbraco中构建网站，现在我印象中我可以使用Ajax或javascript验证Google Recaptcha结果吗？

这是有效的帖子；

$.ajax({
            type: "POST",
            url: "https://www.kulahub.net/Api/FormAdd",
            data: $('#kulaHubForm').serialize(),
            datatype: "html",
            success: function (data) {
                console.log("Success Posted");
                localStorage.setItem("isSubbed", "1");
            },
            error: function (jqXHR, textStatus, errorThrown) { 
                console.log("bad");
            }
        });

这是表格

<form id="kulaHubForm" data-toggle="validator" novalidate="true"  class="newsletter-signup">
    <fieldset>
    <legend>Subscribe to our Newsletter »</legend>

    <div class="row">
        <div class="col-md-4" style="">
            <div class="form-group" style="position: static;">
                <label for="fname">First Name</label>
                <input type="text" id="fname" class="form-control" name="first_name" placeholder="First Name" required>
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="col-md-4" style="">
            <div class="form-group" style="position: static;">
                <label for="lname">Last Name</label>
                <input type="text" id="lname" class="form-control" name="last_name" placeholder="Last Name" required>
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="col-md-4" style="">
            <div class="form-group" style="position: static;">
                <label for="eadd">Email Address</label>
                <input type="email" id="eadd" class="form-control" value="@email" name="email" placeholder="Email" required>
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="col-md-4" style="">  
            <div class="form-group" style="position: static;">
                <label for="cname">Company Name</label>
                <input type="text" id="cname" class="form-control" name="custom_company" placeholder="Company Name" >
                <div class="help-block with-errors"></div>
            </div>
        </div>

        @*Honeypot*@
            <input type="checkbox" id="conCheckBox" name="conCheckBox" value="value1" style="display:none !important" tabindex="-1" autocomplete="off">
            <input type="text" name="flowers" id="flowers" style="" tabindex="-1" autocomplete="off"/>
            <input type="text" name="daisys" id="daisys" value="Subscription Form SAN" style="display:none !important;color:black !important;" tabindex="-1" autocomplete="off"> 
        @*End Honey, Pot?*@

        <div class="col-md-4" style="">  
            <div class="form-group" style="position: static;">
                <label for="jtitle">Job Title</label>
                <input type="text" id="jtitle" class="form-control" name="custom_position" placeholder="Job Title" >
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="col-md-4" style="">  
            <div class="form-group" style="position: static;">
                <label for="telno">Telephone Number</label>
                <input type="text" id="telno" class="form-control" name="custom_telno" placeholder="Telephone Number" required>
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="col-md-12">
            <input type="hidden" name="ClientId" value="XXX">
            <input type="hidden" name="FormTypeId" value="XXXX">
            <input type="hidden" name="redirect" value="">
            <button class="g-recaptcha" data-sitekey="my site key" data-callback='onSubmit'>Submit</button>

        </div>
    </div>
    </fieldset>
</form>

这里有完整电话

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
    function onSubmit(token) {
        $.ajax({
            type: "POST",
            url: "https://www.kulahub.net/Api/FormAdd",
            data: $('#kulaHubForm').serialize(),
            datatype: "html",
            success: function (data) {
                console.log("Success Posted");
                localStorage.setItem("isSubbed", "1");
            },
            error: function (jqXHR, textStatus, errorThrown) { 
                console.log("bad");
            }
        });
        grecaptcha.reset();// to reset their widget for any other tries
    }
    </script>

但是我只是无法推断出Google真正想要您做什么，我认为他们的文档不足，特别是对于初学者。

我并不在乎我使用哪个版本的Recaptcha，我想使用最新版本，但最终看起来比在线2记录的要少，所以我在这里使用了2个看不见的东西，但是对任何可行的方法都持开放态度。 / p>

这可能吗？谢谢