Яндекс.Практикум

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. Помните, что это очень простая форма без проверки пользовательских данных. При создании формы убедитесь, что вы проверяете данные которые пользователи отправляют. Это очень важно.

Понравилась статья? Поделиться с друзьями:
IPCalc Blog
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: