AJAX форма и reCAPTCHA v2

Задача:

Как подключить капчу от Google reCAPTCHA v2 для AJAX формы


AJAX форма и reCAPTCHA v2

Решение:
  1. Получить API ключи по ссылке
  2. Подключить плагин jQuery:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  3. Подключить API recaptcha:
    <script src='https://www.google.com/recaptcha/api.js?hl=ru'></script>
  4. Скрипт отправки формы:
    $("#wdh_form").submit(function(e){ e.preventDefault(); $.ajax({ type: "POST", url: "wdh_send_form.php", data: $("#wdh_form").serialize(), success: function(data){ $('#wdh_result_form').html(data); } }); });
  5. Форме присвоить ID:
    <form id="wdh_form">
  6. В форме, перед кнопкой отправки добавить строку и заполнить ключ сайта:
    <div class="g-recaptcha" data-sitekey="_____КЛЮЧ_____"></div>
  7. Блок для вывода результата формы:
    <div id="wdh_result_form"></div>
  8. Создать PHP файл для отправки почты wdh_send_form.php:
    require_once($_SERVER["DOCUMENT_ROOT"].'/recaptchalib-v2.php'); $secret = "_____СЕКРЕТНЫЙ_КЛЮЧ_____"; $resp = null; $error = null; $reCaptcha = new ReCaptcha($secret); // Was there a reCAPTCHA response? if ($_POST["g-recaptcha-response"]) { $resp = $reCaptcha->verifyResponse( $_SERVER["REMOTE_ADDR"], $_POST["g-recaptcha-response"] ); } if($resp != null && $resp->success) { echo "reCAPTCHA пройдена!<br>Отправляем форму!"; echo $_POST['text']; } else { echo "Ошибка reCAPTCHA"; }
  9. Не забыть скачать и подключить библиотеку recaptchalib-v2.php в wdh_send_form.php
  10. Заполнить секретный ключ в  wdh_send_form.php
Похожие решения:
Изменено: 06 08 2019
Просмотров: 2510

Комментарии 2

Заметил, если скрипт отправки формы разместить выше подключения jQuery, то не работает.
Ответить
Спасибо, а то пол дня мучаюсь, не пойму, почему не работает.
Ответить
Написать