как предотвратить запуск Google recaptcha? - PullRequest
Новая
       18

как предотвратить запуск Google recaptcha?

0 голосов
/ 27 января 2020

У меня есть форма, содержащая кнопку, которая будет запускать Google невидимую recaptcha. страница html, которую я использую, выглядит следующим образом: 

<html>
<head>
  <script src="https://www.google.com/recaptcha/api.js?onload=onLoadRecaptcha&render=explicit" async defer></script>
</head>
<body>
<form method="post" id="signup_form">
  <input type="text" name="fullname" value=""/>
  <div class="g-recaptcha"
    id="formSignup-recaptcha"
    data-sitekey="<?php echo $sitekey; ?>"
    data-callback="onSubmitFormSignupUser"
    data-size="invisible">
  </div>
  <button type="button" name="submitBtn" id="submitBtn">Submit</button>
</form>
</body>
</html>

, но когда я нажимаю #submitBtn, мне нужно запустить процесс проверки, используя ajax, чтобы убедиться, что все необходимые поля заполнены правильно до вызова / выполнения Google Recaptcha. вот код javscript, который я использую: 

var widgetId = '';

var onLoadRecaptcha = function() { 
  widgetId = grecaptcha.render('submitBtn', {
    'sitekey': $('#formSignup-recaptcha').attr('data-sitekey'),
    'callback': onSubmitFormSignupUser,
  });
};
var onSubmitFormSignupUser = function() {
  validateForm('#formSignupUser')
};

var doSubmitFormSignupUser = function(target) {
  var postData = $(target);

  $.ajax({
    url: '/signup_user',
    type: 'post',
    data: postData,
    dataType: 'json',
    success: function(res) {
      if (res.status) {
        window.location.href = '/home/signup_success';
      } else {
        console.log(res.message);
      }
    },
    error: function(err) {
      console.log('error', err.responseText);
    },
    complete: function() {
      grecaptcha.reset(widgetId);
    }
  });
});

var validateForm = function(target) {
  var myData = $(target).serializeArray();

  $.ajax({
    url: '/is_validated',
    type: 'post',
    data: myData,
    dataType: 'json',
    async: false,
    success: function(res) {
      if (res.status) {
        doSubmitFormSignupUser(target);
      } else {
        console.log('message', res.message);
      }
    },
    error: function(err) {
      console.log('error', err.responseText);
    },
    complete: function() {
      grecaptcha.reset(widgetId);
    }
  });
}

$('body').on('click', '#submitBtn', function(e) {
  e.preventDefault();

  grecaptcha.execute(widgetId);
});

, а вот мой код php: 

function is_validated()
{
  $response = [
    'status' => 0,
    'message' => '',
  ];
  echo json_encode($response);
}

function signup_user()
{
  echo 'thank you for signing up';
}

почему-то этот код не работает .. всякий раз, когда я нажимаю #submitBtn, Google Reaptcha автоматически появляется, предлагая пользователю выбрать все изображения с автобусом или лайки. Я не знаю, что не так с моим кодом .. кто-нибудь может помочь?

1 Ответ

1 голос
/ 27 января 2020

Я не знаю, почему вы используете проверку формы на стороне сервера с ajax.

Поскольку в строке ниже вы выполняете reCaptcha сразу после нажатия кнопки. 

$('body').on('click', '#submitBtn', function(e) {
  e.preventDefault();

  grecaptcha.execute(widgetId);
});

Если вы хотите выполнить reCaptcha после ajax request, удалите строку grecaptcha.execute(widgetId); из указанного выше блока. И положи сюда, 

complete: function() {
      grecaptcha.execute(widgetId);
}
...