Telegram — отправка данных в чат с сайта с помощью jQuery и Ajax + защита через Cookies

jquery ajax telegram post 1 - Telegram — отправка данных в чат с сайта с помощью jQuery и Ajax + защита через Cookies

HTML форма, которую обрабатывает jQuery, записывает данные в Cookies и если все ОК — пересылает данные в Telegram с помощью AJAX.

В скрипте реализованы три стадии защиты от «дураков». Возможно отправить только два сообщения с одного браузера. Сделано это специально, чтобы «приколисты» не могли бесконечно присылать сообщения в чат.

Посмотреть как работает: https://tg.devarts.pro/jqajax

Куда прилетают сообщения: https://t.me/iartsorders

Создание и подключение бота: https://devarts.pro/691-telegram-registraciya-i-nastroyka-bota.html

Аналоги на PHP

Ранее я уже писал статью, как отправлять данные в Telegram с сайта с помощью PHP. Сложного ничего. Все строится на базе открытого API.

Подробнее про PHP тут: https://devarts.pro/676-telegram-nastraivaem-peredachu-dannyh-iz-form-na-sayte-v-chat.html

HTML форма для jQuery

Форма писалась для модального окна под лендинг на WordPress. Отсюда и логика обработки. С минимальным количеством полей — номер телефона и необязательное текстовое поле для хотелок клиента.

jquery ajax telegram post form 1 - Telegram — отправка данных в чат с сайта с помощью jQuery и Ajax + защита через Cookies

HTML код формы

<form id="datas">
 <p>
  
<label for="phone">Номер телефона *</label><br>
  <input id="phone" autocomplete="off" placeholder="+70001234567" maxlength="12" name="phone" class="phone" pattern="^\+7\d{3}\d{7}$">
 </p>
 
 <p>
  <label for="descr">Описание (не обязательно)</label><br>
  <textarea id="descr" placeholder="Введите текст" name="descr" class="descr"></textarea>
 </p>

 <a href="#" id="datas-btn">ОТПРАВИТЬ</a>

 
 <p class="ressult"></p>

</form>
  • autocomplete — запрещаем автозаполнение формы
  • placeholder — подсказка в каком виде нужно вписать номер телефона
  • pattern — регулярное выражение, которым мы запрещаем все, кроме цифр
  • maxlength — максимально 12 цифр

Технологии и способы защиты от спама

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

  • Блокировка копирования, вставки и автозаполнения номера телефона.
  • Валидация номера телефона (реализованы РФ номера).
  • Блокировка повторной отправки формы.
  • Фиксация отправок в cookies и ограничение попыток.

Обрабатываем клик по кнопке, получаем данные из форм и отправляем в Telegram с помощью jQuery Ajax

Для начала подключаем jQuery и плагин JS Cookies

<!-- jQuery Libs CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<!-- jQuery Cookies CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/latest/js.cookie.min.js"></script>

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

При клике по кнопке, введенные в поля данные будут записаны в переменные, вызовется функция send_tg и будут отправлены данные в чат:

$('#datas-btn').click(function(){

   var f_phone = $('input.phone').val(),
       f_descr = $('textarea.descr').val(),
       text = 'Новая заявка:\n ' + f_descr +',\n ' + f_phone;

   //вызываем функцию отправки в Telegram
   send_tg(text);
		
});
// Предварительно заполняем данные вашего чата и бота в переменных chatid и token
function send_tg(text){

    var chatid = '@iartsorders',
        token = '273805635:AAGQOuPVadtQyEx0COPrDnq2r-YmUo90xaU',
  	z = $.ajax({
	   type: "POST",  
	   url: "https://api.telegram.org/bot"+token+"/sendMessage?chat_id="+chatid,
  	   data: "parse_mode=HTML&text="+encodeURIComponent(text), 
  }); 

Но это плохое решение. Скрипт никак не защищен от спама. Я могу бесконечно нажимать на отправку и в чат каждый раз будет прилетать сообщение.

Закрываем возможность спам рассылок

Ниже подробно распишу все, что можно сделать и на каждом этапе буду расширять наш мини скрипт до полноценного jQuery плагина

1. Делаем валидацию номера телефона и запрещаем копирование и вставку в это поле

Текстовое поле мы не будем проверять. Главная задача — получить лид в виде номера телефона, на который мы перезвоним. А текстовое содержимое не имеет особого значения.

Дополнительно запретим два раза подряд отправлять сообщение одним маленьким хаком (Защита от «Дурака» 2). Также начинаем подписывать наш код:

// ONCLICK BUTTON
$('#datas-btn').click(function(){

	// Очищаем поле с результатом на этапе сразу после клика иначе будут бесконечные дубли текстов с результатом клика по кнопке
	$('p.ressult').empty();

	// получаем данные из полей формы
	var f_phone = $('input.phone').val(),
	    f_descr = $('textarea.descr').val();

	// Проверяем корректность номера телефона (только РФ)
	if(f_phone == '' || !validatePhone(f_phone)){

	   $('p.ressult').css('color', 'red').append('Некорректно заполнен номер телефона');

	}else{
	   // Если Телефон корректный — выводим результат
	   $('p.ressult').css('color', 'red').append('Заявка отправлена!<br>Мы свяжемся с вами в ближайшее время');

	   // Защита от «Дурака» 2. Вешаем метку в виде CSS класса и блокируем повторную отправку заявки
	   $('#datas-btn').addClass('sent');
	}

});

// STATIC FUNCTIONS
// Защита от «Дурака» 3. Блокируем возможность вставки в поле с номером телефона, дабы отбить желание спамить нам заявки
$('input.phone').bind('cut copy paste', function (e) {
    e.preventDefault();
});

// Валидация телефона через регулярные выражения
function validatePhone(phone){
	let regex = /^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$/;
 return regex.test(phone);
}

2. Проверим нашу форму на то, что отправка уже совершена, а страница еще не обновлялась. Также запишем факт отправка в Cookies

jquery ajax telegram post form error1 - Telegram — отправка данных в чат с сайта с помощью jQuery и Ajax + защита через Cookies

На первом этапе мы к кнопке добавили CSS класс «sent» и сразу после клика по кнопке начинаем проверять его наличие. Первый клик пропускает, но начиная со второго скрипт отсекает любые попытки выводя соответствующий текст

$('#datas-btn').click(function(){

	// Очищаем поле с результатом 
	$('p.ressult').empty();

	if($('#datas-btn').hasClass('sent')){
	 
          $('p.ressult').css('color', 'red').append('Вы уже отправили заявку. Если была допущена ошибка — обновите страницу и отправьте заново.');
	
        }else{

	// получаем данные из полей формы
	var f_phone = $('input.phone').val(),
	    f_descr = $('textarea.descr').val();

	// Проверяем корректность номера телефона (только РФ)
	if(f_phone == '' || !validatePhone(f_phone)){

 	  $('p.ressult').css('color', 'red').append('Некорректно заполнен номер телефона');

	}else{
	  // Если Телефон корректный — выводим результат
	  $('p.ressult').css('color', 'red').append('Заявка отправлена!<br>Мы свяжемся с вами в ближайшее время');

	// Защита от «Дурака» 2. Вешаем метку в виде CSS класса и блокируем повторную отправку заявки
	$('#datas-btn').addClass('sent');

	// Заносим номер телефона и текст в куки
	Cookies.set('phone', f_phone);
	Cookies.set('text', f_descr);

	// Защита от «Дурака» 1. Даем две попытки на отправку заяявок. Фиксируем их в куках
	if(!Cookies.get('sent')){
  	 Cookies.set('sent', '1');
	}else if(Cookies.get('sent') == '1'){
	 Cookies.set('sent', '2');
	}		
 }
}

});

// STATIC FUNCTIONS
// Защита от «Дурака» 3. Блокируем возможность вставки в поле с номером телефона, дабы отбить желание спамить нам заявки
$('input.phone').bind('cut copy paste', function (e) {
    e.preventDefault();
});

// Валидация телефона через регулярные выражения
function validatePhone(phone){
	let regex = /^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$/;
 return regex.test(phone);
}

3. Получаем Cookies и отсекаем спам рассылки

Также мы записали факт клика в cookies и присвоили ему значение «1». Бывает всякое и отправитель мог ошибиться. Поэтому дадим ему возможность отправить сообщение еще раз.

Третьей попытки уже не будет. Добавляем это условие и подключаем функцию отправки в Telegram:

// Защита от «Дурака» 1. Проверяем куки на количество отправленных заявок и обрубаем очередную отправку после 2 попыток
if(Cookies.get('sent') == '2'){

   // Удаляем форму и на ее место вставляем текст
   $('#datas').empty().append('Вы отправили слишком много заявок. Попробуйте повторить позже. <br><br>От вас получены следующие данные: <br><br> <strong>Номер телефона:</strong> ' + Cookies.get('phone') + '<br><strong>Краткое описание:</strong> '  + Cookies.get('text'));

}

$('#datas-btn').click(function(){

	// Очищаем поле с результатом 
	$('p.ressult').empty();

	if($('#datas-btn').hasClass('sent')){
	 
          $('p.ressult').css('color', 'red').append('Вы уже отправили заявку. Если была допущена ошибка — обновите страницу и отправьте заново.');
	
        }else{

	// получаем данные из полей формы
	var f_phone = $('input.phone').val(),
	    f_descr = $('textarea.descr').val();

	// Проверяем корректность номера телефона (только РФ)
	if(f_phone == '' || !validatePhone(f_phone)){

 	  $('p.ressult').css('color', 'red').append('Некорректно заполнен номер телефона');

	}else{
	  // Если Телефон корректный — выводим результат
	  $('p.ressult').css('color', 'red').append('Заявка отправлена!<br>Мы свяжемся с вами в ближайшее время');

	// Защита от «Дурака» 2. Вешаем метку в виде CSS класса и блокируем повторную отправку заявки
	$('#datas-btn').addClass('sent');

	// Заносим номер телефона и текст в куки
	Cookies.set('phone', f_phone);
	Cookies.set('text', f_descr);

	// Защита от «Дурака» 1. Даем две попытки на отправку заяявок. Фиксируем их в куках
	if(!Cookies.get('sent')){
  	 Cookies.set('sent', '1');
	}else if(Cookies.get('sent') == '1'){
	 Cookies.set('sent', '2');
	}

        //если все проверки пройдены формируем текстовое собщение				
	var text = 'Новая заявка:\n ' + f_descr +',\n ' + f_phone;
			
	//и вызываем функцию отправки в телегу
	send_tg(text);		
 }
}

});

// STATIC FUNCTIONS
// Защита от «Дурака» 3. Блокируем возможность вставки в поле с номером телефона, дабы отбить желание спамить нам заявки
$('input.phone').bind('cut copy paste', function (e) {
    e.preventDefault();
});

// Валидация телефона через регулярные выражения
function validatePhone(phone){
	let regex = /^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$/;
 return regex.test(phone);
}
// AJAX отправка данных в ТГ
function send_tg(text){

   var chatid = '@iartsorders',
       token = '273805635:AAGQOuPVadtQyEx0COPrDnq2r-YmUo90xaU',
       z = $.ajax({
	 type: "POST",  
	 url: "https://api.telegram.org/bot"+token+"/sendMessage?chat_id="+chatid,
  	 data: "parse_mode=HTML&text="+encodeURIComponent(text), 
  }); 
};

Добавленное решение сразу после загрузки страницы получает данные из cookies и удаляет форму

jquery ajax telegram post form error - Telegram — отправка данных в чат с сайта с помощью jQuery и Ajax + защита через Cookies

Похожие записи

JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...
jQuery — таймер обратного отсчета с изменяемой скоростью
Рассмотрим наглядный пример управления таймером на jQuery. Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость...
jQuery — очищаем поле с результатом после каждого выполненного события
Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн...
jQuery — простое модальное окно
В данной статье расскажу про очень простое решение с модальным окном на jQuery. Прикручивал его поверх платного конструктора шаблонов сайта...
JQ — запретить копирование и вставку
На скриншоте пункт меню «вставить» активен, а в буфере обмена находится текст из поля ниже. Но силами JavaScript команды: «копировать»,...

Комментарии

Бесполезно писать спамные сообщения. Все комментарии проверяются;
Можно оставлять ссылки (через <a href), если они несут полезную информацию или дополняют статью;

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