AJAX. Настройка reCAPTCHA 2.0 — Демо / Мануал




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>

[bs_notification type=»danger» dismissible=»false»]Убедитесь, что заменили YOUR_KEY на ваш ключ, который вы получили при регистрации reCAPTCHA.[/bs_notification]

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) {
	  //Пользователь прошел вирфикацию
	}
?>

[bs_notification type=»danger» dismissible=»false»]Убедитесь, что вы заменили переменную $secret на на ваш секретный reCAPTCHA ключ.[/bs_notification]

У нас получилась форма с отправкой reCAPTCHA через AJAX. Помните, что это очень простая форма без проверки пользовательских данных. При создании формы убедитесь, что вы проверяете данные которые пользователи отправляют. Это очень важно.


Рубрика КодингМетки , ,

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *