Отправка формы с помощью jQuery для Google reCaptcha v3 - PullRequest
Новая
       7

Отправка формы с помощью jQuery для Google reCaptcha v3

0 голосов
/ 09 июля 2019

У меня есть следующий код.

Когда форма отправлена, я не хочу выполнять reCaptcha и форму для отправки, если счет больше 0,8.Я не получаю никаких ошибок в консоли, и форма не отправляется независимо от того, что я пытаюсь.Но доходит до 

console.log("Success ! Submitting data");

, поэтому я знаю, что код работает до этого момента.

<script src="https://www.google.com/recaptcha/api.js?render=KEYXXX"></script>
<script>
  $(function(){
    grecaptcha.ready(function () {
        $( "#EnquiryForm" ).submit(function( e ) {
          e.preventDefault();
          var $this = $(this);
          grecaptcha.execute('KEYXXX', { action: 'contact' }).then(function (token) {

             fetch('https://SOMEDOMAIN.com/process.php?&recaptcha_response='+token).then(function(response) {
                 response.json().then(function(data) {
                    if (data.success && (data.score > 0.8)) {
                        console.log("Success ! Submitting data");

                        // HOW DO I SUBMIT THE FORM HERE ?
                        // I HAVE TRIED THE FOLLOWING 

                        // $this.submit();
                        // $this.unbind('submit').submit();
                        // $( "#EnquiryForm" ).submit();
                        // $(e.target).submit();
                    }
                  }).catch(function(){
                     console.log("Captcha error, no response");
                  });
              });

          });
    });
    });
  });
</script>

Пожалуйста, предположите, что серверный скрипт работает должным образом, я уверен, что это так.

Я только что попробовал e.target.submit() и теперь получаю сообщение об ошибке: Uncaught (in promise) TypeError: e.target.submit is not a function

Если это кому-нибудь поможет

Ответы [ 2 ]

0 голосов
/ 09 июля 2019

Вместо двух разных вызовов ajax вы должны делать все сразу. Отправляя токен отдельно, вы по-прежнему оставляете конечную точку, которая отправляет форму, незащищенной. 

$(function() {
  grecaptcha.ready(function() {
    $("#EnquiryForm").submit(function(e) {
      e.preventDefault();
      var $this = $(this);
      grecaptcha.execute('KEYXXX', {
        action: 'contact'
      }).then(function(token) {

        var url = new URL('https://SOMEDOMAIN.com/process.php');

        var params = {
            recaptcha_response: token,

            // sample parameters
            name: $("#name").val(),
            date: $("#date").val()
        };

        Object.keys(params).forEach(key => url.searchParams.append(key, params[key]))

        fetch(url).then(function(response) {
          response.json().then(function(data) {
            if (data.success && (data.score > 0.8)) {
              console.log("Success ! Submitting data");
              // $this.submit();
              // $this.unbind('submit').submit();
              // $( "#EnquiryForm" ).submit();
              // $(e.target).submit();
            }
          }).catch(function() {
            console.log("Captcha error, no response");
          });
        });

      });
    });
  });
});

Или, если вы не отправляете через ajax, вы должны поместить этот токен в скрытую форму ввода и обработать его вместе с формой. Проверяя капчу отдельно, вы позволяете злоумышленникам полностью пропустить капчу, которая полностью нарушает цель капчи.

0 голосов
/ 09 июля 2019

Вы все равно сможете отправить форму, используя form.submit() - собственный метод DOM, а не метод jQuery.

Так что вместо $(e.target).submit(); попробуйте e.target.submit();.

...