yandex-captcha

Функция-обёртка над обработчиком отправки формы

Используется для работы Yandex SmartCaptcha. Принимает в себя два параметра:

  1. form - DOMElement формы.
  2. sendHandler - Callback, который будет вызван после проверки токена на стороне сервера

Нужно вызывать для каждой формы на сайте, которая использует Яндекс SmartCaptcha. В переданном form функция при вызове сама создает

<input type="hidden" name="captcha-widget-id" value="<ID_ВИДЖЕТА_КАПЧИ>">

Этот скрытый инпут нужен для идентификации того, на каком контейнере вызывать метод window.smartcaptcha.execute(<ID_ВИДЖЕТА_КАПЧИ>)

Документация к функции

Использование

  1. В файле mediamint_yandexCaptchaWrapper.js указать свои параметры:
    • <КЛЮЧ_КЛИЕНТА> в функции initYandexCaptcha()
    • <ПУТЬ_К_ВАЛИДАТОРУ_КЛЮЧА_СЕРВЕРА> в функции validateYandexCaptchaToken()
  2. Подключить API капчи и файл
    • 1С-Битрикс ```php <?php // … use Bitrix\Main\Page\Asset; $asset = Asset::getInstance();

// Yandex Captcha $asset->addJs(“https://smartcaptcha.yandexcloud.net/captcha.js?render=onload&onload=initYandexCaptcha”);

$asset->addJs(SITE_TEMPLATE_PATH.”/mediamint_yandexCaptchaWrapper.js”);


* HTML
```html
<head>
   ...
   <script src="https://smartcaptcha.yandexcloud.net/captcha.js?render=onload&onload=initYandexCaptcha" defer></script>
   <script src="<path_to_folder>/mediamint_yandexCaptchaWrapper.js"></script>
</head>
  1. На странице сайта форма должна иметь следующий вид: ```html 

4. В JavaScript файле страницы
```javascript
// Отправка формы через fetch и сохранение данных
async function sendForm(form) {
    // ...
}

document.addEventListener("DOMContentLoaded", () => {
    // получение DOMElement формы с id=callback-form
    // Пример - <form action="" method="POST" id="callback-form">
    const formElement = document.getElementById("callback-form");

    // Вызываем функцию-обёртку
   sendFormWrapper(form, sendForm);
})