ReCAPTCHA – отличный способ проверить, настоящий ли пользователь решил добавить комментарий к вашей статье или бот. Многие боты в настоящее время ищут контактные формы, формы комментариев к статьям, которые не защищены капчей или другими механизмами, и отправляют тысячи сообщений в секунду через эти формы. Это может иметь очень негативные последствия для вашего сайта, включая ваш домен. С reCAPTCHA вы добавляете дополнительный уровень защиты, позволяя проверенным людям отправлять комментарии через формы обратной связи.
Как реализовать reCAPTCHA используя AJAX?
В этом простом примере попробуем создать простой веб-сайт с базовой формой. Он будет содержать 3 файла: index.html, contact.js и mail.php
index.html
<!DOCTYPE HTML>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<script src="contact.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<form id="contactForm">
<input type="text" id="name" placeholder="Your name..."/>
<br>
<input type="text" id="email" placeholder="Your email..."/>
<br>
<textarea id="message" placeholder="Your message..."></textarea>
<br>
<div class="g-recaptcha" data-sitekey="YOUR_KEY"></div>
<br>
<input type="submit" />
</form>
</body>contact.js
$(document).ready(function() {
var contactForm = $("#contactForm");
//We set our own custom submit function
contactForm.on("submit", function(e) {
//Prevent the default behavior of a form
e.preventDefault();
//Get the values from the form
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
//Our AJAX POST
$.ajax({
type: "POST",
url: "mail.php",
data: {
name: name,
email: email,
message: message,
//THIS WILL TELL THE FORM IF THE USER IS CAPTCHA VERIFIED.
captcha: grecaptcha.getResponse()
},
success: function() {
console.log("OUR FORM SUBMITTED CORRECTLY");
}
})
});
});
mail.php
<?php
$name = stripslashes($_POST["name"]);
$email = stripslashes($_POST["email"]);
$message = stripslashes($_POST["message"]);
$secret = "YOUR_SECRET";
$response = $_POST["captcha"];
$verify = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secret}&response={$response}");
$captcha_success = json_decode($verify);
if ($captcha_success->success == false) {
//Пользователь не прошел вирфикацию
}
else if ($captcha_success->success == true) {
//Пользователь прошел вирфикацию
}
?>У нас получилась форма с отправкой reCAPTCHA через AJAX. Помните, что это очень простая форма без проверки пользовательских данных. При создании формы убедитесь, что вы проверяете данные которые пользователи отправляют. Это очень важно.
