Форма jQuery не будет отправлена ​​с reCAPTCHA 2 - PullRequest
0 голосов
/ 07 декабря 2018

Я использую HAML, Semantic UI и jQuery для генерации моего статического сайта, и у меня есть набор форм на странице, которые используют reCAPTCHA v2.Мой веб-разработчик исчерпал время на проекте, поэтому я взял слабину, но знаю только немного Javascript / Semantic / jQuery.

_header частичные выходы: <script src="https://www.google.com/recaptcha/api.js"></script>

myмакет возвращает данные формы:

<form action='https://liveformhq.com/form/<form uuid>' class='ui large form' id='formGeneral' method='POST'>
<snip>
<label>Message *</label>
<textarea name='message' placeholder='Say hello'></textarea>
</div>
<div class='field'>
<div class='g-recaptcha' data-callback='reCaptcha_general' data-sitekey='<my site key>'></div>
<input class='hiddenRecaptcha' id='gen_hiddenRecaptcha' name='gen_hiddenRecaptcha' type='hidden'>
<button class='ui primary large button' type='submit'>Send</button>
<a class='item' href='#top' rel='scrolltoanchor'>&#x2B06;</a>
</div>
<div class='ui error message'></div>
</form>

_footer частично возвращает jQuery, который я комментирую при прохождении:

Я не знаю, почему он использовал $('form').form({ вместо $('form').validate({ - Это более свежая версия jQuery?Однако он поднимает «пустое» поле reCAPTCHA.

  // form validation
  //
  $('form').form({
      on: 'blur',
      fields: {
<snip>
          message: {
              identifier: 'message',
              rules: [{
                  type: 'empty',
                  prompt: 'Please enter your message'
              }]
          },
        gen_hiddenRecaptcha: {
            identifier: 'gen_hiddenRecaptcha',
            rules: [{
                gen_hiddenRecaptcha: { required: true },
                type: 'empty',
                prompt: 'Please check the reCAPTCHA check box'
            }]
        },
      }
  });

Похоже, что получен ответ (я могу предупредить и увидеть ответ полученным), и это правильно влияет на семантическое предупреждение, которое исчезает, когдаполе больше не пустое.

  var reCaptcha_general = function(response) {
      $("#gen_hiddenRecaptcha").val(response);
  };

И поэтому ниже, я думаю, это проблема.Когда все поля заполнены, кнопка отправки не работает.Возможно, я ранее перепутал два разных подхода и попытался решить проблему с обоими одновременно.

Когда нажата кнопка отправки, вызывается эта функция, но ничего не происходит.

  $('#formGeneral').submit(function(event) {
      if (!grecaptcha.getResponse()) {
          event.preventDefault(); //prevent form submit
          grecaptcha.execute();
      }
  });

ОБНОВЛЕНИЕ: Я только что отредактировал это на месте, так как у меня еще не было никаких ответов.


ОБНОВЛЕНИЕ2: Чтобы не искажать комментарии ниже (и иметь в виду, в это время написания нет ответов)на вопросы, представленные ниже), я обновил код и хотел поделиться им на тот случай, если кто-то запутается таким же образом.

Пересмотр Документов Google после появления предупреждения о других вопросахчтобы убедиться, что вы проверяете токен ответа отдельно , идентификатор элемента формы переименовывается, чтобы было яснее, что он несет полезную нагрузку токена ответа:

<div class="g-recaptcha" data-callback="reCaptcha_general" data-sitekey="<site-key>">
<input class="hiddenRecaptcha" id="gen_recaptchaResponseToken" name="gen_recaptchaResponseToken" type="hidden">

и в нижнем колонтитуле, и этот javascriptвыводить предупреждения, если окно сообщения или reCAPTCHA пусто:

$('form').form({
    on: 'blur',
    fields: {
        message: {
            identifier: 'message',
            rules: [{
                type: 'empty',
                prompt: 'Please enter your message'
            }]
        },
        gen_recaptchaResponseToken: {
            identifier: 'gen_recaptchaResponseToken',
            rules: [{
                gen_recaptchaResponseToken: { required: true },
                type: 'empty',
                prompt: 'Please check the reCAPTCHA check box'
            }]
        },
    }
});

Таким образом, я обновил функцию обратного вызова с помощью новой HTML-формы element ID:

var reCaptcha_general = function(response) {
    $("#gen_recaptchaResponseToken").val(response);
};

и наконец полностью удалил вызов grecaptcha.getResponse () согласно предложению:

$('#formGeneral').submit(function(event) {
}); 

и форма правильно функционирует .Я думаю, что причина этого в том, что у моей службы проверки формы (очень хорошая liveform ) есть секрет, который я получил, когда зарегистрировался в службе reCAPTCHA через Google.Я пока не получил от них подтверждения того, что они технически делают на бэкенде, но, поскольку действие формы отправляет POST на URL liveformhq.com, по крайней мере, я ожидаю, что они будут использовать API-интерфейс siteverify от Google для подтверждения ответа reCAPTCHAтокен действителен

Вопросы:

  1. Правильно ли я думаю, что с учетом вышесказанного я использую проверку формы jQuery, чтобы предотвратить отправку формы путем анализа пустотыответа от reCAPTCHA, вместо того, чтобы полагаться на grecaptcha.getResponse()?

  2. Если да, нужен ли мне звонок grecaptcha.getResponse()?

  3. Хотя, правильно ли я думаю, что более безопасно полагаться на grecaptcha.getResponse() и просто выполнить обработку формы jQuery для этого элемента формы required: true, просто чтобы получить предупреждение для пользователя?

...