Проверка конкретной Google ReCaptcha на бэкенде с несколькими ReCaptcha на одной и той же странице

У меня есть страница формы с валидацией Google ReCaptcha на моем Django backend. У меня также есть небольшая форма электронной почты в нижнем колонтитуле, куда я хотел бы добавить отдельную ReCaptcha. Обе они, похоже, отображаются нормально. Хотя я не знаю, как точно определить, что невидимая ReCapatcha действительно отображается правильно.

На моем бэкенде я попытался получить ответ Captcha с помощью

request.POST.get('g-recaptcha-response')

Нужно ли мне как-то указать, какой элемент recaptcha он должен проверить, или он автоматически отправит правильный элемент, поскольку он находится в форме, которая отправляется?

Ниже я приведу свой код на случай, если ошибка кроется в моей реализации.

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
<script type="text/javascript">
  const RenderCaptchas = function() {
    const siteKey = "{{ GOOGLE_RECAPTCHA_SITE_KEY }}";
    const hiddenSiteKey = "{{ GOOGLE_HIDDEN_RECAPTCHA_SITE_KEY }}"
    const captcha_elements = document.getElementsByClassName('captcha');
    const hidden_captcha_elements = document.getElementsByClassName('hidden-captcha');
    for (let i = 0; i < captcha_elements.length; i++) {
      grecaptcha.render(captcha_elements[i].id, {'sitekey': siteKey})
    }
    for (let i = 0; i < hidden_captcha_elements.length; i++) {
      grecaptcha.render(hidden_captcha_elements[i].id, {'sitekey': hiddenSiteKey})
     }
  }
window.CaptchaCallback = RenderCaptchas;
</script>


<form id="email_subscription_form" class="form-inline float-right" method="post" action="/ajax/email-subscription/">
  <div class="form-group">
    <label for="id_email_address" class="d-none">Email Address</label>
    <input type="email" id="id_email_address" class="g-recaptcha hidden-captcha form-control border-0 rounded-0" name="email_address" value="" placeholder="Email Address">
    <input type="hidden" name="mailpiece_slug" value="{{ page.settings.email_newsletter_slug }}" />
    <input type="hidden" name="event_slug" value="subscribe" />
  </div>
</form>

if form.is_valid():
  captcha_response = request.POST.get('g-recaptcha-response')

Ответ captcha_response возвращает "None" независимо от того, была ли другая капча "решена" или нет, поэтому я не верю, что она просто пытается получить доступ к неправильной капче. Здесь также нет кнопки отправки, поэтому я добавил капчу к фактическому вводу, поскольку клиенты просто нажимают "ввод", чтобы отправить свой email для рассылки.

Я могу добавить больше кода к этому, если кому-то нужно увидеть что-то еще. Мне кажется, что я просто неправильно реализовал это на этой форме.

Вернуться на верх