PHP-фичи №2. Установка Recaptcha v3 на сайт
Привет! По просьбам записываю видео по свежей версии google recaptcha. Это третья версия рекапчи, так называемая невидимая версия, которая работает без вашего участия. Показываю в видео, как с ней работать с помощью ajax-запроса.
Содержание:
00:00 - Вступление
01:49 - Создаем рекапчу
02:42 - Пишем разметку
05:57 - Пишем php-обработчик
12:23 - Пишем js-обработчик
19:13 - Еще раз по всем шагам
24:15 - Заключение
clck.ru/QBVoz - исходники видео на GitHub
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxgraph
Чат для верстальщиков: teleg.run/maxgraph_chat
#обучение #recaptcha #v3
Пікірлер: 52
Максим, огромное спасибо ! сколько лет прошло, а видосы помогают...
Максим, большое спасибо! Очень помогло видео!
благодарю Вас за рассказ! здоровья Вам желаю
@maxgraph
3 жыл бұрын
Спасибо)
Глобальный супер-массив, ну все теперь я тоже хочу быть массивом :D Спасибо за видос !
@maxgraph
2 жыл бұрын
😀
Очень интересно, но как быть, если на странице используется несколько форм? (В примере только одна форма и используется id token).
@tr4gger
11 ай бұрын
битый день ищу ответ на этот вопрос, но пока все в пустую. С одной формой работает отлично, но на другие формы выдает БОТ)
Дайте пожалуйста ссылку на то как вы настраиваете рекпчу версии 2. СПасибо.
а в index.html - она работает?
Супер! Очень просто объяснено, легко установил)) Но вот вопрос - как вот соединить скрипт капчи со скриптом отправки в котором форма еще проходит валидацию, если он в отдельном файле и на jQuery?
@maxgraph
3 жыл бұрын
да просто сверху сюда накинуть вашу отправку и валидацию.
@delosait
2 жыл бұрын
@@maxgraph Максим, спасибо за видео, но оказалось не так просто накинуть её на валидацию (( Не мог бы ты показать как это делается?
Ещё не пробовал, но вижу что всё гуд!) Правда качество хромает и размер кода очень мал. Есть такой вопрос? Вот в файле send.php 23:52 где проверка люди не люди), получается если люди, то с этого блока сразу можно отправлять данные в базу данных?! Ну это если на php реализовывать.
А если это форма лендинга, и после отправки данные формы нужно отправить еще и на другой файл (страница с благодарностью), и там связь с црм. Как реализовать отправку потом данных пользователя туда?
@maxgraph
3 жыл бұрын
Не в курсе
Благодарю
@maxgraph
Жыл бұрын
Пожалуйста)
Сделал сегодня всё как в уроке, и всё работает! Макс, а как сделать чтобы после отправки формы, перекидывало на send.php и там уже была передача данных на сервер?
@maxgraph
3 жыл бұрын
ну в таком случае надо менять логику, убирать fetch-запрос видимо
Лого каптчи в позишн fixed в правом нижнем углу сильно обламывает, особенно на мобильных устройствах.
логика обработки внутри send.php в корне неверная, но для ознакомления сойдёт) 23:50 эта проверка как раз и нужна, но обработка формы должна быть внутри условия там где >=0.5 сразу-же, а не потом отдельно как-то через JS. и внутри JS тоже не должно быть никаких проверок типа score >= 0.5 -- PHP-скрипт же уже всё проверил и отдал обратно или success = true или false. поэтому в ветке JS нужно просто проверять что вернулось и выводить результат из JSON и всё.
и кстати, у меня все вышло
Круто, осталось только отправлять данные. Скинь плиз ссылку на видос где ты отправляешь письмо:))
@maxgraph
3 жыл бұрын
Если ты про видео, где я отправляю с использованием капчи - такого нет :)
А как повесить эту капчу на несколько форм?
@tr4gger
11 ай бұрын
У меня сейчас именно такой же вопрос((( если у кого-то получилось, напишите плиз
хорошо, что у кого то работает. у меня ошибка Uncaught ReferenceError: grecaptcha is not defined
Пытаюсь понять схему. 🤔 Скорость воспроизведения уменьшила - 0.75, размер экрана уменьшила до 30%, чтобы как-то видеть код. ))) В остальном - все подробно и понятно. Thank you!
@user-kh7fv5rn1g
3 жыл бұрын
помогите !!! переделать из jQuery в JS $.ajax({ type: "POST", url: "mail.php", data: $("#form1").serialize(), success: function(response) { alert("Спасибо за заявку!"); setTimeout(function() { $("#form1").trigger("reset"); $.fancybox.close(); }, 1000); } })
@maxgraph
3 жыл бұрын
let formData = new FormData(передать элемент формы); let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { console.log('Отправлено'); // здесь фэнсибокс) } } } xhr.open('POST', 'mail.php', true); xhr.send(formData); как-то так
а можете проверить ту, что на гитхабе лежит с ботом и человеком, ошибка идет, говорит что я бот, ключи верные с кодом все нормально, ошибка была на уровне хттпс, почему-то цеплял его с соседнего сайта большое спасибо за урок и за исходники)
@maxgraph
2 жыл бұрын
отлично)
Все круто, только шрифт бы побольше, с телефона вообще не видно ничего
@maxgraph
4 жыл бұрын
Спасибо, забываю (
У меня не работает. выдает ошибку Uncaught (in promise) SyntaxError: Unexpected end of JSON input. и указывает на строку в которой написано ".then(response => response.json())". Все скобки перепроверил раз 10.
@maxgraph
2 жыл бұрын
Видимо надо ещё проверить)
Пробовал всё делать в одном файле mail.php. Но у меня ничего не приходит в массив responseKeys, да и вообще почта не отправляется через mail(). Это наверное связано с header(Content-type)
@maxgraph
3 жыл бұрын
Ну делайте не в одном, как вариант
@listentomusic621
3 жыл бұрын
@@maxgraph А зачем вообще в этом файле нужен header('Content-type: application/json')? Я его убрал. У меня ошибка оказалась в том, что не поддерживалась функция file_get_contents. Заменил на другой код и заработало.
@maxgraph
3 жыл бұрын
m15.ru/server_response_code - почитайте :)
Не подскажите как убрать справа ее на странице?
@maxgraph
3 жыл бұрын
Просто скройте в стилях
А как не для формы реализовать капчу? Например для любой ссылки... что блин кроме форм не где капча не нужна что-ли?
@maxgraph
3 жыл бұрын
Ну по факту да, не нужна :)
а на локальный сервер можна установить?
@maxgraph
2 жыл бұрын
Не пробовал
Боты ещё не умеют её обходить? Меня замучали боты версия рекапчи 2. Попробую 3 версию, сегодня спам приходил , типо хрумер может её обходить, хз правда или нет
@maxgraph
3 жыл бұрын
Не умеют, насколько знаю
Погодите-ка, описанная автором проверка по сути направлена на что-то, что нажимает на кнопку Submit. Чаще всего это человек, ну или какой-то совсем уж древний бот. Выходит, что сам контроллер формы капчей не защищен, а значит можно безнаказанно напрямую отправлять POST в контроллер и этот контроллер радостно будет сабмитить эти данные будучи полностью уверенным в том, что JS уже все проверил, а значит все безопасно.
зачем столько воды... элементарную штуку не можешь разложить пошагово)
@maxgraph
3 жыл бұрын
Бывает