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

  • @rvitalia1
    @rvitalia12 ай бұрын

    Максим, огромное спасибо ! сколько лет прошло, а видосы помогают...

  • @dblnya7936
    @dblnya7936 Жыл бұрын

    Максим, большое спасибо! Очень помогло видео!

  • @nikbraun5013
    @nikbraun50133 жыл бұрын

    благодарю Вас за рассказ! здоровья Вам желаю

  • @maxgraph

    @maxgraph

    3 жыл бұрын

    Спасибо)

  • @user-zk3yr4zt7z
    @user-zk3yr4zt7z2 жыл бұрын

    Глобальный супер-массив, ну все теперь я тоже хочу быть массивом :D Спасибо за видос !

  • @maxgraph

    @maxgraph

    2 жыл бұрын

    😀

  • @vwusr2533
    @vwusr25333 жыл бұрын

    Очень интересно, но как быть, если на странице используется несколько форм? (В примере только одна форма и используется id token).

  • @tr4gger

    @tr4gger

    11 ай бұрын

    битый день ищу ответ на этот вопрос, но пока все в пустую. С одной формой работает отлично, но на другие формы выдает БОТ)

  • @_DGS_
    @_DGS_ Жыл бұрын

    Дайте пожалуйста ссылку на то как вы настраиваете рекпчу версии 2. СПасибо.

  • @nikbraun5013
    @nikbraun50133 жыл бұрын

    а в index.html - она работает?

  • @summersbyy
    @summersbyy3 жыл бұрын

    Супер! Очень просто объяснено, легко установил)) Но вот вопрос - как вот соединить скрипт капчи со скриптом отправки в котором форма еще проходит валидацию, если он в отдельном файле и на jQuery?

  • @maxgraph

    @maxgraph

    3 жыл бұрын

    да просто сверху сюда накинуть вашу отправку и валидацию.

  • @delosait

    @delosait

    2 жыл бұрын

    @@maxgraph Максим, спасибо за видео, но оказалось не так просто накинуть её на валидацию (( Не мог бы ты показать как это делается?

  • @user-gk5mq8wb4b
    @user-gk5mq8wb4b3 жыл бұрын

    Ещё не пробовал, но вижу что всё гуд!) Правда качество хромает и размер кода очень мал. Есть такой вопрос? Вот в файле send.php 23:52 где проверка люди не люди), получается если люди, то с этого блока сразу можно отправлять данные в базу данных?! Ну это если на php реализовывать.

  • @serhiizakharenko7744
    @serhiizakharenko77443 жыл бұрын

    А если это форма лендинга, и после отправки данные формы нужно отправить еще и на другой файл (страница с благодарностью), и там связь с црм. Как реализовать отправку потом данных пользователя туда?

  • @maxgraph

    @maxgraph

    3 жыл бұрын

    Не в курсе

  • @виртуоз_ру
    @виртуоз_ру Жыл бұрын

    Благодарю

  • @maxgraph

    @maxgraph

    Жыл бұрын

    Пожалуйста)

  • @user-gk5mq8wb4b
    @user-gk5mq8wb4b3 жыл бұрын

    Сделал сегодня всё как в уроке, и всё работает! Макс, а как сделать чтобы после отправки формы, перекидывало на send.php и там уже была передача данных на сервер?

  • @maxgraph

    @maxgraph

    3 жыл бұрын

    ну в таком случае надо менять логику, убирать fetch-запрос видимо

  • @Vladikslavik
    @Vladikslavik2 жыл бұрын

    Лого каптчи в позишн fixed в правом нижнем углу сильно обламывает, особенно на мобильных устройствах.

  • @ForeverDarkDeath
    @ForeverDarkDeath2 жыл бұрын

    логика обработки внутри send.php в корне неверная, но для ознакомления сойдёт) 23:50 эта проверка как раз и нужна, но обработка формы должна быть внутри условия там где >=0.5 сразу-же, а не потом отдельно как-то через JS. и внутри JS тоже не должно быть никаких проверок типа score >= 0.5 -- PHP-скрипт же уже всё проверил и отдал обратно или success = true или false. поэтому в ветке JS нужно просто проверять что вернулось и выводить результат из JSON и всё.

  • @nikbraun5013
    @nikbraun50133 жыл бұрын

    и кстати, у меня все вышло

  • @theanatolich2260
    @theanatolich22603 жыл бұрын

    Круто, осталось только отправлять данные. Скинь плиз ссылку на видос где ты отправляешь письмо:))

  • @maxgraph

    @maxgraph

    3 жыл бұрын

    Если ты про видео, где я отправляю с использованием капчи - такого нет :)

  • @JesseJames-mh5kb
    @JesseJames-mh5kb3 жыл бұрын

    А как повесить эту капчу на несколько форм?

  • @tr4gger

    @tr4gger

    11 ай бұрын

    У меня сейчас именно такой же вопрос((( если у кого-то получилось, напишите плиз

  • @woltmetr
    @woltmetr23 күн бұрын

    хорошо, что у кого то работает. у меня ошибка Uncaught ReferenceError: grecaptcha is not defined

  • @user-kh7fv5rn1g
    @user-kh7fv5rn1g3 жыл бұрын

    Пытаюсь понять схему. 🤔 Скорость воспроизведения уменьшила - 0.75, размер экрана уменьшила до 30%, чтобы как-то видеть код. ))) В остальном - все подробно и понятно. Thank you!

  • @user-kh7fv5rn1g

    @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

    @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); как-то так

  • @medopchel7186
    @medopchel71862 жыл бұрын

    а можете проверить ту, что на гитхабе лежит с ботом и человеком, ошибка идет, говорит что я бот, ключи верные с кодом все нормально, ошибка была на уровне хттпс, почему-то цеплял его с соседнего сайта большое спасибо за урок и за исходники)

  • @maxgraph

    @maxgraph

    2 жыл бұрын

    отлично)

  • @mushnikov35
    @mushnikov354 жыл бұрын

    Все круто, только шрифт бы побольше, с телефона вообще не видно ничего

  • @maxgraph

    @maxgraph

    4 жыл бұрын

    Спасибо, забываю (

  • @user-dv5di6mh6f
    @user-dv5di6mh6f2 жыл бұрын

    У меня не работает. выдает ошибку Uncaught (in promise) SyntaxError: Unexpected end of JSON input. и указывает на строку в которой написано ".then(response => response.json())". Все скобки перепроверил раз 10.

  • @maxgraph

    @maxgraph

    2 жыл бұрын

    Видимо надо ещё проверить)

  • @listentomusic621
    @listentomusic6213 жыл бұрын

    Пробовал всё делать в одном файле mail.php. Но у меня ничего не приходит в массив responseKeys, да и вообще почта не отправляется через mail(). Это наверное связано с header(Content-type)

  • @maxgraph

    @maxgraph

    3 жыл бұрын

    Ну делайте не в одном, как вариант

  • @listentomusic621

    @listentomusic621

    3 жыл бұрын

    @@maxgraph А зачем вообще в этом файле нужен header('Content-type: application/json')? Я его убрал. У меня ошибка оказалась в том, что не поддерживалась функция file_get_contents. Заменил на другой код и заработало.

  • @maxgraph

    @maxgraph

    3 жыл бұрын

    m15.ru/server_response_code - почитайте :)

  • @salendoil
    @salendoil3 жыл бұрын

    Не подскажите как убрать справа ее на странице?

  • @maxgraph

    @maxgraph

    3 жыл бұрын

    Просто скройте в стилях

  • @user-zo7nc9on7j
    @user-zo7nc9on7j3 жыл бұрын

    А как не для формы реализовать капчу? Например для любой ссылки... что блин кроме форм не где капча не нужна что-ли?

  • @maxgraph

    @maxgraph

    3 жыл бұрын

    Ну по факту да, не нужна :)

  • @vasyaklishch4184
    @vasyaklishch41842 жыл бұрын

    а на локальный сервер можна установить?

  • @maxgraph

    @maxgraph

    2 жыл бұрын

    Не пробовал

  • @adminxxx8013
    @adminxxx80133 жыл бұрын

    Боты ещё не умеют её обходить? Меня замучали боты версия рекапчи 2. Попробую 3 версию, сегодня спам приходил , типо хрумер может её обходить, хз правда или нет

  • @maxgraph

    @maxgraph

    3 жыл бұрын

    Не умеют, насколько знаю

  • @antoxapetrov
    @antoxapetrov Жыл бұрын

    Погодите-ка, описанная автором проверка по сути направлена на что-то, что нажимает на кнопку Submit. Чаще всего это человек, ну или какой-то совсем уж древний бот. Выходит, что сам контроллер формы капчей не защищен, а значит можно безнаказанно напрямую отправлять POST в контроллер и этот контроллер радостно будет сабмитить эти данные будучи полностью уверенным в том, что JS уже все проверил, а значит все безопасно.

  • @user-yj8qw4sk3h
    @user-yj8qw4sk3h3 жыл бұрын

    зачем столько воды... элементарную штуку не можешь разложить пошагово)

  • @maxgraph

    @maxgraph

    3 жыл бұрын

    Бывает

Келесі