Установка reCaptcha (капча) на свой сайт | Блог веб-разработчика MaxGraph

Установка reCaptcha (капча) на свой сайт

 

Введение

Собственно, что такое рекапча, и для чего она нужна? Это специальная система, разработанная для защиты веб-сайтов от ботов. Суть системы в следующем — при отправке каких-либо данных с формы Вы должны поставить галочку (чего бот сделать не в состоянии), иначе и отправить не сможете. Именно это поведение кнопки мы сегодня опишем.

Процесс

Для начала нужно зарегистрировать рекапчу к Вашему домену и выбрать тип (V2).

Вы получите специальный sitekey и инструкцию по его внедрению на страницу (свой я закрасил).

Теперь нужно внедрить это все на вашу страницу html. Создаем форму, в которой обязательно нужна кнопка (button type=»submit») и класс form-captcha с кодом с сайта рекапчи (data-sitekey заполняете своим ключом):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form action="" method="POST" class="form">
<legend>Заголовок формы</legend>
<div class="form-group">
<input type="text" class="input-name" id="" name="name" placeholder="Введите имя">
</div>
<div class="form-group">
<input type="text" class="input-phone" id="" name="phone" placeholder="Введите телефон">
</div>
<div class="form-captcha">
<div class="g-recaptcha" data-sitekey=" ">   
</div>
</div>
<button type="submit" class="btn">Отправить форму</button>
</form>
<form action="" method="POST" class="form">
<legend>Заголовок формы</legend>
<div class="form-group">
<input type="text" class="input-name" id="" name="name" placeholder="Введите имя">
</div>
<div class="form-group">
<input type="text" class="input-phone" id="" name="phone" placeholder="Введите телефон">
</div>
<div class="form-captcha">
<div class="g-recaptcha" data-sitekey=" ">   
</div>
</div>
<button type="submit" class="btn">Отправить форму</button>
</form>

Ниже подключаем необходимый скрипт (если ваш сайт защищен (имеет https), то и в ссылке на скрипт указывайте https):

1
2
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=reCaptchaOnLoadCallback&render=explicit"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=reCaptchaOnLoadCallback&render=explicit"></script>

После этого нам нужно описать поведение кнопки и вообще работу капчи. Сделаем это прямо на этой же странице в теге script.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function reCaptcha(selector) {
 var $wg = $(selector); // Обращаемся к селектору (описан ниже в "вызове", в нашем случае это form-captcha)
 $wg.each(function() { // Делаем проход по этому селектору
 var id = randomString(10), // Задаем переменную для id (рандомная строка, ее функция ниже)
 $form = $(this).closest('form'); // Проходим по всей форме
 $form.find('button[type="submit"]').prop('disabled', true); // Изначально даем кнопке disabled (нельзя нажать)
  $(this).append($('<div class="g-recaptcha" id="' + id + '"></div>')); // Добавляем в form-captcha еще блок с рандомным id
   grecaptcha.render(id, { // Используем функции самой рекапчи
   sitekey: $(this).find('.g-recaptcha').data('sitekey') || '', // Находим элемент с нашим дата-атрибутом
   callback: function(response) {
    if (!!response) { 
     $form.find('button[type="submit"]').prop('disabled', false); // Если условие (нажатие галочки) выполнено, убираем disabled у кнопки
    }
   }
  });
 });
};
 
// Функция рандомной строки как id
function randomString(length) {
 var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split(''),
 result = '';
 length = !length ? Math.floor(Math.random() * chars.length) : length;
 for (var i = 0; i < length; i++) {
  result += chars[Math.floor(Math.random() * chars.length)];
 }
  return result;
 }
//Вызов  
var reCaptchaOnLoadCallback = function() {
 reCaptcha('.form-captcha');
};
function reCaptcha(selector) {
 var $wg = $(selector); // Обращаемся к селектору (описан ниже в "вызове", в нашем случае это form-captcha)
 $wg.each(function() { // Делаем проход по этому селектору
 var id = randomString(10), // Задаем переменную для id (рандомная строка, ее функция ниже)
 $form = $(this).closest('form'); // Проходим по всей форме
 $form.find('button[type="submit"]').prop('disabled', true); // Изначально даем кнопке disabled (нельзя нажать)
  $(this).append($('<div class="g-recaptcha" id="' + id + '"></div>')); // Добавляем в form-captcha еще блок с рандомным id
   grecaptcha.render(id, { // Используем функции самой рекапчи
   sitekey: $(this).find('.g-recaptcha').data('sitekey') || '', // Находим элемент с нашим дата-атрибутом
   callback: function(response) {
    if (!!response) { 
     $form.find('button[type="submit"]').prop('disabled', false); // Если условие (нажатие галочки) выполнено, убираем disabled у кнопки
    }
   }
  });
 });
};

// Функция рандомной строки как id
function randomString(length) {
 var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split(''),
 result = '';
 length = !length ? Math.floor(Math.random() * chars.length) : length;
 for (var i = 0; i < length; i++) {
  result += chars[Math.floor(Math.random() * chars.length)];
 }
  return result;
 }
//Вызов  
var reCaptchaOnLoadCallback = function() {
 reCaptcha('.form-captcha');
};

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

Видео

Референсы

index

12345 (1 оценок, среднее: 5,00 из 5)
Загрузка...

Метки: , ,

Понравилось? Расскажи другим!

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

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

Максим Васянович

Я являюсь автором этого блога, а также занимаюсь разработкой сайтов. Любой feedback по каналу на YouTube или этому блогу принимаю по форме (либо пишите Вконтакте). Надеюсь на Вас.

Напишите мне Смотрите меня