Как использовать Google Recaptcha перед публикацией AJAX - PullRequest
Новая
       7

Как использовать Google Recaptcha перед публикацией AJAX

0 голосов
/ 15 апреля 2019

У меня есть форма, которая отправляет данные в API Kulahub с использованием AJAX, но мне нужно сначала проверить, что пользователь, заполняющий форму, является подлинным, а затем, получив подтверждение от Google, сделать сообщение AJAX, однако яне могу найти простое решение.

Почта работает нормально и отправляет данные в API.

Это повторение, я пробовал следующие решения потоков; Невидимая ReCaptcha с jQuery ajax Невидимая reCaptcha AJAX Call Google Invisible Recaptcha с использованием Jquery Ajax и PHP Форма Ajax с Google Invisible Recaptcha

Я создаю сайт в Умбрако, теперь у меня сложилось впечатление, что я могу проверить результат Google Reaptcha, используя ajax или javascript?

Вот пост, который работает; 

$.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 невидимых здесь, но я открыт для любойработа.

Возможно ли это?Спасибо

...