Установка Google reCaptcha на сайт. Как установить невидимую капчу и капчу «я не робот» на PHP

03.05.2022
Содержание:

Инструкция по добавлению Google reCaptcha на сайт, с помощью PHP и jQuery. В новой записи мы с вами рассмотрим как добавлять капчу с заданиями (reCaptcha v2) и невидимую капчу (reCaptcha v3).

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

https://www.google.com/recaptcha/admin/

В качестве основных настроек вам нужно сделать следующее:

  1. Прописать название (название не влияет на работу капчи)
  2. Выбрать тип капчи
  3. Указать домен, для которого капча используется
  4. Принять условия использования капчи

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

Все запросы из формы мы будем отправлять через Ajax, и для работы скриптов я создал 2 файла

index.php — в нём храниться форма, и jQuery обработчик

form.php — файл, куда мы будем отправлять Ajax запросы. Здесь я просто буду возвращать полученные данные

Добавление капчи «Я не робот» на сайт

Код для формы с капчей

Форма будет иметь одно поле (телефон) и 2 div элемента

<form id="feedBackForm" action="">
    <input required name="phone" placeholder="Ваш телефон" type="tel">
    <div class="g-recaptcha" data-sitekey="КЛЮЧ_КАПЧИ"></div>
    <div class="text-danger" id="recaptchaError"></div>

    <button>Отправить</button>
</form> 

JavaScript код для капчи


$(document).ready(function() {

    $("#feedBackForm").on("submit", function(event) {
	event.preventDefault()
	var captcha = grecaptcha.getResponse();

	if (!captcha.length) {
	    $('#recaptchaError').text('* Вы не прошли проверку капчей');
	} else {
	    $('#recaptchaError').text('');

	    let dataForm = $(this).serialize()

	    $.ajax({
		url: '/form.php',
		method: 'post',
		dataType: 'html',
		data: dataForm,
		success: function(data){
			console.log(data);
			grecaptcha.reset();
		}
	    });

	}
		
   })

})

Добавление невидимой капчи

Форма для невидимой капчи от Google

<form id="feedBackForm" action="">
    <input required name="phone" placeholder="Ваш телефон" type="tel">
    <button class="g-recaptcha" 
        data-sitekey="6Ldfi74fAAAAAHTp7rVIjXiixZhOe6Zzi_X3Pkc7" 
        data-callback='onSubmit' 
        data-action='submit'>Submit</button>

    <div class="text-danger" id="recaptchaError"></div>
</form>

JavaScript для невидимой капчи

function onSubmit(token) {
    console.log(token)
    document.getElementById("demo-form").submit();
}
На этом всё!
Больше интересных статей в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime
Наши планы
  • Написание материала для курса по разработке ботов на Telegram
  • Разработка универсального парсера на PHP

Поддержите мой сайт!

Каждый переведённый донат, мотивирует на создание новых записей и уроков на YouTube