Google невидимый recaptcha продолжает работать без выполнения - PullRequest
Новая
       21

Google невидимый recaptcha продолжает работать без выполнения

0 голосов
/ 12 февраля 2020

Я пытаюсь использовать Google невидимую recaptcha в моей веб-форме (php и codeigniter 3). но почему-то всякий раз, когда я нажимаю кнопку Submit, Google Reaptcha продолжает генерировать вопросы, как будто игнорируя все другие коды перед командой execute. поэтому ни один из console.log и alert никогда не появляется. что не так с моим кодом?

мой код выглядит так:

HTML

<form id="form_signup" method="post" action="/signup">
  <input type="text" name="username"/>
  <div class="g-recaptcha"
    id="form_signup-recaptcha"
    data-size="invisible"
    data-sitekey="<?php echo $mysitekey; ?>"
    data-callback="onSubmitFormSignupUser">
  </div>
  <button type="button" id="formSignup-btnSubmit">
    Submit
  </button>
</form>

JS

var widgetId = '';

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

var onSubmitFormSignupUser = function(response) {
    console.log('response', response);

    if ($('[name="username"]').val()) {
        alert('yes');
        grecaptcha.execute(widgetId);

        doSubmitFormToServer('#form_signup');
    }
    else {
        alert('no');
        grecaptcha.reset(widgetId);
    }
}

var doSubmitFormToServer = function(selector) {
    var myData = $(selector).serializeArray();

    console.log('send form data', myData);
}

Ответы [ 2 ]

1 голос
/ 12 февраля 2020

Ну, у вас была опечатка в идентификаторе, по крайней мере, здесь id="form_signup-recaptcha" и здесь: 'sitekey' : $('#formSignup-recaptcha').attr('data-sitekey'),, кроме этого, неясно, был ли он вызван вообще или нет, так как вы этого не сделали предусмотрена часть включения скрипта, который должен содержать параметр ?onload=onLoadRecaptcha.

Код приведен ниже, но здесь он не будет работать из-за происхождения null. Вместо этого проверьте Codepen: https://codepen.io/extempl/pen/abOvBZv

sitekey используется один только для целей тестирования, как описано здесь: https://developers.google.com/recaptcha/docs/faq#id похоже на запуск автоматизирован- тесты с recaptcha-v2-что следует делать 

var widgetId = "";

var onLoadRecaptcha = function() {
  widgetId = grecaptcha.render("formSignup-btnSubmit", {
    sitekey: $("#form_signup-recaptcha").attr("data-sitekey"),
    callback: $("#form_signup-recaptcha").attr("data-callback")
  });
};

var onSubmitFormSignupUser = function(response) {
  console.log("response", response);

  if ($('[name="username"]').val()) {
    grecaptcha.execute(widgetId);
    doSubmitFormToServer("#form_signup");
  } else {
    $(".status").text("failed");
    grecaptcha.reset(widgetId);
  }
};

var doSubmitFormToServer = function(selector) {
  var myData = $(selector).serializeArray();
  $(".status").text("submitted");

  console.log("send form data", myData);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=onLoadRecaptcha"></script>

<body>
  <form id="form_signup" method="post" action="/signup">
    <input type="text" name="username" />
    <div 
      class="g-recaptcha" 
      id="form_signup-recaptcha" 
      data-size="invisible" 
      data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" 
      data-callback="onSubmitFormSignupUser">
    </div>
    <button type="button" id="formSignup-btnSubmit">
    Submit
  </button>
    <span class="status"></span>
  </form>
</body>
0 голосов
/ 13 февраля 2020

получается, что решение очень простое.

этот код 

var onLoadRecaptcha = function() {
  widgetId = grecaptcha.render("formSignup-btnSubmit", { // wrong element ID
    sitekey: $("#form_signup-recaptcha").attr("data-sitekey"),
    callback: $("#form_signup-recaptcha").attr("data-callback")
  });
};

должен быть таким 

var onLoadRecaptcha = function() {
  widgetId = grecaptcha.render("form_signup-recaptcha", { // corrent element ID
    sitekey: $("#form_signup-recaptcha").attr("data-sitekey"),
    callback: $("#form_signup-recaptcha").attr("data-callback")
  });
};

, потому что элемент recaptcha такой 

<div 
  class="g-recaptcha" 
  id="form_signup-recaptcha" 
  data-size="invisible" 
  data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" 
  data-callback="onSubmitFormSignupUser">
</div>

, поэтому в основном параметры для grecaptcha.render должны соответствовать свойствам элемента, который имеет класс g-recaptcha. моя ошибка заключалась в том, что я использовал идентификатор кнопки, хотя элемент с классом g-recaptcha был div.

Я не помню, чтобы я читал об этой конкретной вещи в документации. Думаю, я слишком глуп, чтобы осознавать это до этого ... Надеюсь, это прояснит ситуацию для других людей с такой же проблемой.

...