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

Комментарии (0)

Похожие решения:
Изменено: 22 04 2021
Просмотров: 8908