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

Question

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

Post 工作正常，并将数据提交给 API。

它的recaptcha，我尝试了以下线程解决方案；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>

但我无法推断出谷歌实际上想要你做什么，我认为他们的文档缺乏，特别是对于初学者。

我真的不在乎我使用哪个版本的 Recaptcha，我想使用最新的但最终看起来比在线 2 记录的还要少，所以我在这里选择了 2 invisible，但对任何可行的方法都持开放态度。

这可能吗？谢谢

标签： jqueryhtmlajaxrecaptcha