Как подключить Google ReCaptcha v3 к форме обратной связи на сайте

В этом видео рассмотрим подключение Google ReCaptcha v3 к форме обратной связи, которую создавали в прошлом видео • Как создать форму обра... поскольку один из подписчиков задавал вопрос, а как же подключить ReCaptcha третьей версии к форме обратной связи.
Способ универсальный, можете использовать на любом движке, не обязательно на OctoberCMS.
⚡ Содержание этого видео:
00:00 - Приветствие. Коротко о видео.
00:27 - Документация Google reCaptcha V3
01:45 - Получаем sitekey
03:29 - Подключаем reCaptcha V3
05:49 - Функция "Onclick"
09:27 - Функции TRACE_LOG, JS, onRun, API
15:28 - Проверка работы reCaptcha V3
16:56 - Post-запрос
23:27 - Итоги
26:40 - Заключение
ПЕРВАЯ ЧАСТЬ ВИДЕО: Как создать форму обратной связи на сайте • Как создать форму обра...
ДОПОЛНИТЕЛЬНО: Как отправить результаты формы на email и вывести во всплывающем окне успешное сообщение об отправке: • Как отправить форму об...
Подробнее о РеКаптче: www.google.com/recaptcha/about/
Документация по ReCaptcha v3: developers.google.com/recaptc...
Знакомство с ReCaptcha v3 • Introducing reCAPTCHA v3
Внимание! Храните свой private-key указанный в видео в секрете.
Огромная благодарность за подписку на канал Techwee. Если понравилось видео, не скупитесь на комментарий с сердечком, слышал, что это поможет продвинуть видео в алгоритмах Ютубчика. Но это не точно!
Приветствуются ваши комментарии с вопросами. Попробуем всё разобрать по возможности.
Ваш тыркающий по клавишам, - Фрускейт.

Супер, радует, что кто то занялся продвижением октября, благодарность автору!!! А так же хотел бы добавить, что правильнее было бы сделать просмотр сообщений из бэкенда не в формате редактирования, а в формате просмотра без возможности редактировать сообщение и его данные. Успехов, Михаил!!!

[@fruskate]

Согласен! В следующих видосах учту и сделаю просмотр и отдельно кнопку на форму правки. 🤝

[@delosait]

Любая информация по October будет очень ценная. Продолжайте в том же духе👍

[@fruskate]

Благодарю. Двигаемся дальше ))

[@delosait]

Вот это скорость 👍 Спасибо огромное!

[@fruskate]

Сегодня-завтра закрою второй и третий ваши вопросы. Видео отснял, надо смонтировать теперь.

[@neur0nkz]

Было бы классно посмотреть расширение правил валидатора своим кастомным, под каптчу, со своими сообщениями!

[@fruskate]

Актуально? ))

[@MaxDubovsky]

Было бы круто рассмотреть пример с turbo-router и как в таком случае правильно грузить скрипты, ну и вообще... спасибо !

[@fruskate]

Когда нибудь точно рассмотрим )))

[@MaxDubovsky]

Вообщем-то разобрался: 1. {% put scripts %}{% endput %} 2. connect вешаем listener: this.listen('click', '#submit-form-apply', this.onSubmit); 3. onSubmit(e) { // до делаем валидацию полей что бы не слать лишний запрос grecaptcha.ready(() => { grecaptcha.execute(reCaptcha_sitekey, {action: 'submit_services'}).then((token) => { document.querySelector('#grecaptcha').value = token; // отсылаем oc.request('#service-apply-form', 'onSaveContact', { success: (data) => { this.onSuccess(data); console.log('1.data', data); } }); }); }); }

[@MaxDubovsky]

@@fruskate вроде разобрался. не на 100% уверен что правильно. Делаю так в connect() -> createElement('script'). На событие OnSubmit() -> grecaptcha.ready() -> grecaptcha.execute(). Проблема может быть в том что когда пользователь заходит на 20 таких страниц, recaptcha 20 раз подзагрузится (но это работает). Если делать init скрипта 1 раз, то проблема что Октябрь и его turboRouter перерисовывает весь dom и нету справа в углу баджика protected by reCaptcha. Что думаете ?

[@fruskate]

А дока то что говорит по этой теме? Вроде просто this->addJs() выполнить и всё

[@MaxDubovsky]

@@fruskate идея, нужно попробовать !

[@tak1zawa207]

Столько воды... но ладно

[@fruskate]

))