Как подключить recapcha v3 к форме на ajax?

Question

[karelina-nat]

У меня есть форма

<form class="form__contact  form-message">
            <input type="hidden" name="title" value="Форма заказа - страница контактов">

                <div class="form__group">
                    <label class="sr-only" for="name">Name</label>
                    <div class="form__group-fields">
                        <input class="field field--text" type="text" name="name" placeholder="Name" id="name" required  pattern="(^[А-Яа-яЁё\s]+$)|(^[a-zA-Z\s]+$)">
                    </div>
                </div>
                <div class="form__group">
                    <label class="sr-only" for="phone-email">Phone or email</label>
                    <div class="form__group-fields">
                        <input class="field field--text" type="text" name="phone-email" placeholder="Phone or email" id="phone-email" required  >
                    </div>
                </div>
                <div class="form__group">
                    <label class="sr-only" for="message">Message</label>
                    <div class="form__group-fields">
                        <textarea class="field field--textarea" name="message" id="message" cols="30" rows="6" placeholder="Message"></textarea>
                    </div>
                </div>
                <p class="form__privacy-policy">
                    By clicking the button, I agree to the <a href="<?php the_permalink(3);?>">privacy policy</a>
                </p>
                <button class="btn btn--order btn--contact form__submit" type="submit">Submit</button>
            </form>

Ajax запрос

$('.form-message').on('submit', function (e) {

  e.preventDefault();
  var this_form = $(this);
  var form = $(this).serializeArray();

  $.post(
    myajax.url, {
      form: form,
      action: 'order'
    },
    function (data) {
      for (var i = 0; i < $('form').length; i++) {
        $('form')[i].reset();
      }

      $('#modal-tnx').toggleClass('is-active', true);

      setTimeout(() => {
        this_form.closest('.modal').toggleClass('is-active', false);
      }, 1000);

      setTimeout(() => {
        $('#modal-tnx').toggleClass('is-active', false);
      }, 3000);
    }
  )
});

И php обработчик

// Отправка формы 
add_action('wp_ajax_order', 'order'); 
add_action('wp_ajax_nopriv_order', 'order'); 
function order() { 

	global $email_from; 
	global $email_to; 
	$mail = new PHPMailer; 
	$mail->setFrom($email_from, 'Заявка с сайта - формы обратной связи');
	$mail->addAddress($email_to, 'option'); 

	$mail->IsHTML(true); 
	$mail->CharSet = 'UTF-8'; 

	$form = $_POST['form']; 

	$mail->Subject = 'Письмо с сайта'; 
	$echo = "Ваше сообщение отправлено"; 

	$mail->Body = ''; 

	foreach($form as $data){ 
		switch($data['name']){ 

			case 'title': 
			$mail->Body .= 'Тема письма: '.$data['value'].'<br>'; 
			break;
	
			case 'name': 
			$mail->Body .= 'Имя: '.$data['value'].'<br>'; 
			break;

			case 'phone-email': 
			$mail->Body .= 'Номер телефона или email: '.$data['value'].'<br>'; 
			break; 

			case 'message': 
			$mail->Body .= 'Комментарий: '.$data['value'].'<br>'; 
			break; 

		}
	} 


	$mail->Send(); 

	echo $echo; 

	wp_die(); 
};

Answer 1

[IvanMogilev]

во 1 создайте ключи тут

подключите

<script src="https://www.google.com/recaptcha/api.js?render='Ваш Site Key'"></script>

добавьте в форму

<input type="hidden" name="recaptcha_response" id="recaptchaResponse">

добавьте в js

$(document).ready(function () {
    grecaptcha.ready(function () {
        grecaptcha.execute('Ваш SITE_KEY', {action: 'contact'}).then(function (token) {
            var recaptchaResponse = document.getElementById('recaptchaResponse');
            recaptchaResponse.value = token;
        });
    });
});

в php обработчик

$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
            $recaptcha_secret = 'Ваш Secret Key';
            $recaptcha_response = $_POST['recaptcha_response'];
            $recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
            $recaptcha = json_decode($recaptcha);
            if ($recaptcha->score >= 0.6) {
проверка пройдена
}

else на ваше усмотрение

P.S в php обработчике у вас будет не $_POST['recaptcha_response'], а что-то в вашей $data

Comments

[Александр]

Блин фиговина. (
Так и подключал на одной сайте.
На другом тоже самое.
Капча инитит. Токен получает.

но
uncaught Error: No reCAPTCHA clients exist.

[Александр]

а пардон. Эта ошибка идет когда в ajax передаю значение

let data = {
                action: 'captcha',
                recaptcha:grecaptcha.getResponse()
            }
 $.ajax({
                url: '/wp-admin/admin-ajax.php',
                type: 'post',
                data: data,

[Александр]

Решил вопрос так.
Но это кейс для ВП.

let data = {
                action: 'captcha',
                recaptcha_response: $('#recaptchaResponse').val()
            }

            $.ajax({
                url: '/wp-admin/admin-ajax.php',
                type: 'post',
                data: data,
                success: function (res) {
                    console.log(res)
                    if (res.status === 'success') {


                    }
                }
            });

Answer 2

[zkrvndm]

В большинстве случаев, для защиты от спама рекапча просто не нужна и избыточна.

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

Но если хотите заморочится с установкой именно рекапчи, вот вам инструкции с примерами:
https://yandex.ru/search/?text=php%20recaptcha%20v...

Comments

[Just Me]

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