Как привязать один ключ reCAPTCHA от Гугл к нескольким формам?

Question

[Сергей Мурин]

Добрый день, у заказчика на сайте 4 формы и все разные по стилю и полями, можно как то привязать один ключ reCAPTCHA ко всем этим формам. У одной формы я сделал она работает а с другими весь инет уже обшарил не могу найти нужное решение.

Comments

[archelon]

ключи рекапчи обычно привязан к домену, т.е. проблема в чем-то другом.

Answer 1

[Сергей Мурин]

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

Прописываем 1 вот этот скрип для подключения капчи:

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

Прописываем 2:

var onloadCallback = function () {
  let mysitekey = ' ваш ключ';

  grecaptcha.render('recaptcha1', {
    'sitekey': 'mysitekey ',  // Ваш ключ
    'callback': onRecaptchaSuccess, // Функция что будет передавать response в консоль при отмеченной капчи
    'expired-callback': onRecaptchaExpired, // Функция что будет передавать срок действия капчи в консоль
    'timeout': 120000 // Время срока действия капчи
  });

  grecaptcha.render('recaptcha2', {
    'sitekey': 'mysitekey ',
    'callback': onRecaptchaSuccess2,
    'expired-callback': onRecaptchaExpired,
    'timeout': 120000
  });
};

var isRecaptchaChecked = false; // Флаг для отслеживания отмеченности reCAPTCHA

function onRecaptchaSuccess(response) {
  // Действия при успешной проверке reCAPTCHA
  console.log('reCAPTCHA успешно пройдена1.');
  console.log('Ответ:', response);
  isRecaptchaChecked = true; // Устанавливаем флаг в true
}

function onRecaptchaSuccess2(response) {
  // Действия при успешной проверке reCAPTCHA
  console.log('reCAPTCHA успешно пройдена2.');
  console.log('Ответ:', response);
  isRecaptchaChecked = true; // Устанавливаем флаг в true
}

function onRecaptchaExpired() {
  // Действия при истечении срока действия отклика на reCAPTCHA
  console.log('Срок действия reCAPTCHA истек.');
  isRecaptchaChecked = false; // Устанавливаем флаг в false
}

В итоге у вас должно получиться 2 капчи, которые не зависят друг от друга даже при одинаковом ключе. recaptcha1 и recaptcha2 это id

Answer 2

[Алексей]

Добрый день. Вставьте скрипт reCAPTCHA на каждую страницу, где находятся формы. Это можно сделать путем добавления следующего кода в раздел вашего HTML-документа:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

В каждую форму добавьте элемент для отображения виджета reCAPTCHA. Это можно сделать путем добавления следующего кода внутрь каждой формы:

<div class="g-recaptcha" data-sitekey="ВАШ_КЛЮЧ_RECAPTCHA"></div>

Убедитесь, что вы замените "ВАШ_КЛЮЧ_RECAPTCHA" на фактический ключ reCAPTCHA, который вы получили от Google.

Наконец, вы должны включить проверку reCAPTCHA перед отправкой формы на сервере. Это требует некоторой серверной логики. При получении запроса от формы, ваш сервер должен валидировать токен reCAPTCHA, отправленный вместе с формой, используя ваш секретный ключ reCAPTCHA.

Comments

[Сергей Мурин]

Это для одной формы)) Для двух и более форм такое решение не сработает