Установка recaptcha v3
Внедряю reCaptcha v3 в форму отправки запроса на перезвонить. Форма реализована на ajax. Конструкция такова
<script src="https://www.google.com/recaptcha/api.js?render=мой_сайт_кей"></script>
...
<form class="t-form" id="feedback" action="">
<input type="text" class="t-input" name="phone" id="phone" type="tel" autocomplete="tel">
<button type="submit" class="t-submit">Жду звонка</button>
</form>
Javascript
function resetForm() {
$('#feedback')[0].reset();
}
$( document ).ready(function() {
$('button[type="submit"]').click(function(){
$('#feedback').validate({
rules: {
phone: {
required: true,
},
},
messages: {
phone: {
required: 'Укажите номер телефона',
},
},
submitHandler: function(){
sendAjaxForm('feedback', 'mail.php');
return false;
}
});
});
function sendAjaxForm(feedback, url) {
$.ajax({
url: "./mail.php",
type: "POST",
dataType: "html",
data: $("#"+feedback).serialize(),
success: function(response) {
всё ОК
});
resetForm();
},
error: function(response) { // Данные не отправлены
всё плохо
});
resetForm();
}
});
}
});
mail.php
if (isset($_POST["phone"])) {
$phone = $_POST['phone'];
$to = '[email protected]'; // Куда отправляем
$from = '[email protected]'; // От кого отправляем
$subject = "Запрос обратного звонка";
$message = "Телефон: $phone\n";
$headers = "Content-Type: text/plain; charset=utf-8\r\n";
$headers .= "From: $from\r\n";
$headers .= "Reply-To: $from\r\n";
$send = mail ($to,$subject,$message,$headers);
}
Как правильно установить капчу, что-бы она запускалась после проверки введен ли номер (required: 'Укажите номер телефона',)
если в js добавляю
function resetForm() {
$('#feedback')[0].reset();
}
$( document ).ready(function() {
$('button[type="submit"]').click(function(){
$('#feedback').validate({
rules: {
phone: {
required: true,
},
},
messages: {
phone: {
required: '<br><span style="display: block;margin-top: -10px;">Укажите номер телефона</span>',
},
},
submitHandler: function(){
sendAjaxForm('feedback', 'mail.php'); //Вызываем функцию отправки формы
return false;
}
});
});
function onClick(e) {
e.preventDefault();
grecaptcha.ready(function() {
grecaptcha.execute('мой_сайт_кей', {action: 'submit'}).then(function(token) {
function sendAjaxForm(feedback, url) {
$.ajax({
url: "./mail.php", //url страницы
type: "POST", //метод отправки
dataType: "html", //формат данных
data: $("#"+feedback).serialize(), // Сеарилизуем объекты формы
success: function(response) { //Данные отправлены успешно
swal.fire({
title: "Успешно отправлено!",
icon: "success",
showConfirmButton: false,
timer: 3000
});
resetForm();
},
error: function(response) { // Данные не отправлены
swal.fire({
title: "Ошибка отправления!",
icon: "error",
showConfirmButton: false,
timer: 3000
});
resetForm();
}
});
}
});
});
}
});
а в php
if (isset($_POST["phone"])) {
$secret_key = 'мой_секрет_кей';
function getCaptcha($s){
$response = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret_key."&response={$s}");
return json_decode($response);
}
$phone = $_POST['phone'];
$to = '[email protected]'; // Куда отправляем
$from = '[email protected]'; // От кого отправляем
$subject = "Запрос обратного звонка";
$message = "Телефон: $phone\n";
$headers = "Content-Type: text/plain; charset=utf-8\r\n";
$headers .= "From: $from\r\n";
$headers .= "Reply-To: $from\r\n";
$send = mail ($to,$subject,$message,$headers);
}
не работает =(
при этом если в index добавляю
<input type="hidden" name="recaptcha_response" id="recaptchaResponse">
то вижу, что токен получает