Как установить recapcha v3 на 1C-Битрикс?

Question

[Вадим Тимошенко]

В общем задался задачей самостоятельно подключить к форме обратной связи капчу. И не простую "я не робот", а версии #3.

Нашел руководство: https://fstrange.ru/coder/php/bitrix-recaptcha-v3.html
И начал по нему выполнять задачу.

Первое что сделал - нашел файл шаблона, который выводит мою форму:
/local/templates/site_name/components/bitrix/form.result.new/.default/template.php

В него добавил скрытое поле:

<input type="hidden" name="recaptcha_response" id="recaptchaResponse">

Далее в папке /local/templates/site_name/components/bitrix/form.result.new/.default/ создал файл component_epilog.php и наполнил его этим кодом:

<?php
  $APPLICATION->AddHeadScript("/www.google.com/recaptcha/api.js?render=6Ld4DtEUAAAAAGWUfXOC07l8ca0NKwkeYaEbYciS");
  $APPLICATION->AddHeadScript("
  <script>
  var onloadCallbackRecap = function() {
  grecaptcha.ready(function () {
  grecaptcha.execute('6Ld4DtEUAAAAAGWUfXOC07l8ca0NKwkeYaEbYciS', { action: 'contact_callback' }).then(function (token) {
  var recaptchaResponse = document.getElementById('recaptchaResponse');
  recaptchaResponse.value = token;
  });
  });
  };
  </script>
  ");
?>

Где - 6Ld4DtEUAAAAAGWUfXOC07l8ca0NKwkeYaEbYciS ключ сайт.

Если я правильно понимаю в коде сайта должен появится код скрипта что я вставил выше. Но его нет. Кеш чистил. Что я сделал не так на этом этапе?

Comments

[Антон]

<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="https://www.google.com/recaptcha/api.js?render=6Ld4DtEUAAAAAGWUfXOC07l8ca0NKwkeYaEbYciS"></script>

А это зачем?

spoiler

$APPLICATION->AddHeadScript("
  <script>
  var onloadCallbackRecap = function() {
  grecaptcha.ready(function () {
  grecaptcha.execute('6Ld4DtEUAAAAAGWUfXOC07l8ca0NKwkeYaEbYciS', { action: 'contact_callback' }).then(function (token) {
  var recaptchaResponse = document.getElementById('recaptchaResponse');
  recaptchaResponse.value = token;
  });
  });
  };
  </script>
  ");

[Вадим Тимошенко]

Антон, если я правильно понял значение скрытого поля с id=recaptchaResponse должно заполнится ключом сайта 6Ld4DtEUAAAAAGWUfXOC07l8ca0NKwkeYaEbYciS.

[fStrange]

Вы наверно не тот файл нашли.

Можно проще. Подключить на самой странице. Сразу после IncludeComponent( которым вы саму форму подключаете.

И в самом коде ошибка. Забыл callback функцию добавить.

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallbackRecap&render=<?php echo RECAP_CLIENT ?>"></script>
<script>
  var onloadCallbackRecap = function () {
    grecaptcha.ready(function () {
      grecaptcha.execute('<?php echo RECAP_CLIENT ?>', {action: 'contact_callback'}).then(function (token) {
        let recapResponse = document.createElement("input");
        recapResponse.type = "hidden";
        recapResponse.className = "recap_response";
        recapResponse.name = "recap_response";
        recapResponse.id = "recap_response";
        recapResponse.value = token;


        //!!! элемент формы
        let form = document.querySelector('form[name=SIMPLE_FORM_1]');
        form.appendChild(recapResponse);

      });
    });
  };
</script>

[Mikhail Prokhorov]

Антон, вы же используете AddHeadScript, который ожыдает на вход путь до скрипта, Вы же передаёте ему строку с самим скриптом. По этому AddHeadString.

[Вадим Тимошенко]

fStrange, спасибо! Скажите, а что есть {action: 'contact_callback'} ?

[fStrange]

Вадим Тимошенко, action он возвращает в ответе после проверки. Вероятно чтобы можно было проверить что ответ сделан для данной формы, а не какой нибудь другой.

[malayamarisha]

fStrange, доброго времени суток.
Прописываю после подключения формы и после клика "Отправить" в консоли появляется ошибка "No reCAPTCHA clients exist"
Подскажите, пожалуйста, по какой причине может быть?
Ключ сайта прописан верный.
Были попытки и v2 и v3 использовать, то ошибка всё та же

[fStrange]

malayamarisha, а скиньте ссылку на страницу, глянуть. Вообще похоже на какую то ошибку инициализации. То ли сама капча не успела прогрузиться, до использования, то ли что то подобное. Т.е. вызывается какая то из функций, например grecaptcha.reset(); а сам объект grecaptcha еще не существует.

Answer 1

[Mikhail Prokhorov]

$APPLICATION->AddHeadScript("
  <script>
  var onloadCallbackRecap
// ..e

Замените AddHeadScript на AddHeadString. А вообще, что вам мешает использовать script.js компонента, он для этого и предназначен. Результат будет тот же, а работать в разы удобнее. Или просто в теге script напишите.
И описанные вами методы давно depricated, вместо них есть Bitrix\Main\Page\Asset

Comments

[Вадим Тимошенко]

А где найти script.js компонента? В папке /public_html/local/templates/site_name/components/bitrix/form.result.new/.default/ нет никаких js скриптов.

В каком месте находятся js файлы у компонентов, подскажите пожалуйста.

[Андрей Белый]

Вадим Тимошенко, вы можете в шаблоне компонента создать его сами https://dev.1c-bitrix.ru/support/forum/forum6/topi...