Отправка токена reCaptcha в PHP с помощью Ajax - PullRequest
Новая
       341

Отправка токена reCaptcha в PHP с помощью Ajax

1 голос
/ 20 июня 2019

Я хочу добавить reCaptcha V3 в форму.

Вот форма: 

<form action="mail.php" method="POST">
    <!-- This hidden input will contain the token -->
    <input type="hidden" name="token" id="token" />
    <input type="text" name="name" />
    <input type="text" name="email" />
    <textarea name="message"></textarea>
    <input type="submit" name="submit" value="Send" />
</form>

Теперь я пытаюсь отправить значение token на mail.php, поэтому есть плагин под названием jquery.form Я использую его для отправки запроса Ajax.

Вот код Javascript / Jquery: 

$('form').ajaxForm({

    beforeSubmit: function() {

        //Captcha part
        grecaptcha.ready(function() {

                grecaptcha.execute('My_website_key', {action: 'form'}).then(function(token) {

                    //Set token value to the hidden element
                    $('#token').val(token);

                });

        });//reCaptcha ready    

    },//Before submit function
    success: function(msg) {

        if(msg == 'Message has been sent.'){
            console.log('success!');
        }else{
            console.log(msg);
        }

    },//success function
    complete: function(xhr) {

        console.log(xhr.responseText);  

    }//complete function

});//End Ajax

Когда я отправляю форму, я смотрю на консоль и вижу, что token пуст, и кажется, что функция success выполняется, пока скрытый элемент token не получил токен.

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

1 Ответ

1 голос
/ 20 июня 2019

Вам необходимо переместить ваш запрос ajax в обработчик recaptcha, потому что beforeAjax не будет ждать разрешения его содержимого, измените код следующим образом: 

// Fake grecaptcha method !!! you should delete this
// Form URL was changed as well to satisfy the example
let grecaptcha = {
  ready: function(cb) {
    cb();
  },
  execute: function(key, options) {
    return Promise.resolve('recaptchatoken');
  }
};

let formElem = $('form');

formElem.submit(function(e) {
  e.preventDefault();

  let thisForm = $(this);

  grecaptcha.ready(function() {
    grecaptcha.execute('My_website_key', {
      action: 'form'
    }).then(function(token) {

      $('#token').val(token);

      thisForm.ajaxSubmit({
        success: function(msg) {

          if (msg == 'Message has been sent.') {
            console.log('success!');
          } else {
            console.log(msg);
          }

        },
        complete: function(xhr) {

          console.log(xhr.responseText);

        }

      });


    });

  });

  return false; // false = prevent submit 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://malsup.github.io/min/jquery.form.min.js"></script>
<form action="//reqres.in/api/users" method="POST">
  <!-- This hidden input will contain the token -->
  <input type="hidden" name="token" id="token" />
  <input type="text" name="name" />
  <input type="text" name="email" />
  <textarea name="message"></textarea>
  <input type="submit" name="submit" value="Send" />
</form>
...