WordPress, Розробка

WebApp для Telegram

Leave a comment

В Telegram Bot API 6.0, вышедшем в 16-04-2022 была добавлена поддержка WebApps, которая позволяет открывать страницы HTML5 в окне приложения Telegram с поддержкой JavaScript, для которого доступно

Web Apps for Bots //core.telegram.org/bots/webapps

Введение

Автоматизация обработки сообщений и данных с помощью Telegram Bot API описана в публикации Бот для Telegram. Реализованный бот взаимодействует с пользователем в окне приложения Telegram и ограничен его возможностями. Приложения WebApp позволяют пользователю перейти из окна приложения Telegram в окно приложения WebApp для получения дополнительных возможностей, а затем вернутся обратно.

Дополнительные возможности приложений WebApp обеспечиваются тем, что они реализуются HTML5 с поддержкой JavaScript, SVG, MathML и других современных технологий. Технологически WebApp - это web-страница открытая в браузере приложения Telegram.

Технология Telegram WebApp реализуется бесшовно, и пользователь почти не ощущает перехода между приложениями, благодаря автоматическому обмену данными и цветовой схемой между приложением Telegram и приложения WebApp.

Общая схема технологии WebApp

В приватном чате

  1. Telegram Бот публикует в приватном чате пользователя обычное сообщение, которое включает объект reply_markup типа ReplyKeyboardMarkup, которое включает объект keyboard с массивом массивов объектов типа KeyboardButton, среди которых есть объект кнопки с объектом web_app типа WebAppInfo с свойство url  типа String, содержащим URL, необходимый для вызова WebApp.
  2. При нажатии на KeyboardButton с объектом web_app файл по указанному URL загружается приложением Telegram

 

Запусть WebApp можно с помощью кнопки, которая отмечена специальным знаком

Кнопки WebApp работают в приложении Telegram и не работают в web.telegram.org в браузере.

К

Настройка кнопки меню

WebApp будет отображаться в приложении Telegram кнопкой в левом нижнем углу, если выполнить следующие действия:

1. В @BotFather команда /setmenubutton запускает процедуру установки кнопки приложения для бота.
2. Для выбора бота @BotFather отобразит кнопки доступных ботов, но если кнопки выбора не появятся, то имя бота нужно ввести вручную, точно соблюдая регистр: @ReKSbizBot.
3. Ввести URL файла WebApp, который будет запрашивать кнопка: https://reks.biz/webapp.php
4. Ввести надпись для кнопки: ReKS.

В приложении Telegram кнопка немедленно появится в приватном чате бота.

Бот /отправитель

!!!

Запуск бота с inline-кнопки даёт суть тоже самое, что и предыдущий вариант. Однако, запуск с keyboard button дает возможность отправлять данные из веб-приложения в бота.

2.1. Делаем все стандартные штуки для запуска бота - импорт библиотеки, ввод токена, infinity_polling, обработчик команды start. Если вы не понимаете о чем я, вам сюда.

2.2. Создаем функцию, которая вернет нам клавиатуру с нужной кнопкой.

Для того, чтобы создать кнопку, нужно сначала создать WebAppInfo-объект внутри которого будет url на наш сайт.

примере для библиотеки pytelegrambotapi:

2.3. Отправляем сообщение с нашей клавиатурой при отправке команды или любом другом действии:

bot.send_message( message.chat.id, 'Привет, я бот для проверки телеграмм webapps!)', reply_markup=webAppKeyboard())

!!!!!

//

!!! Вызвать WebApp можно и с помощью InlineKeyboardButton >>> Описание веб-приложения, которое будет запущено, когда пользователь нажмет кнопку. Веб-приложение сможет отправить произвольное сообщение от имени пользователя с помощью метода answerWebAppQuery. Доступно только в приватных чатах между пользователем и ботом.

Приложение WebApp

Приложение WebApp - Чтобы взаимодействовать с Telegram необходим скрипт:

Скрипт реализует переменные цветовой схемы для применения в CSS:

--tg-theme-bg-color
--tg-theme-text-color
--tg-theme-hint-color
--tg-theme-link-color
--tg-theme-button-color
--tg-theme-button-text-color

//

window.Telegram.WebApp

Скрипт реализует объект window.Telegram.WebApp, через который доступны свойства, методы и события приложения.

Свойство цветовой схемы ThemeParams

параметры цветовой схемы:

  • bg_color
  • text_color
  • hint_color
  • link_color
  • button_color
  • button_text_colorString

Объект реализует обработчик события изменения цветовой схемы:

Свойства объекта и методы объект WebApp

!!!:

  • initData //получаем данные от пользователя в виде строки (работает только при запуске из меню команд бота).
  • initDataUnsafe // получаем данные от пользователя в виде объекта (работает только при запуске из меню команд бота).
  • isExpanded // возвращает true, если приложение открыто на всю высоту, false - если нет.
  • viewportHeight // вернёт ширину окна.
  • sendData(data) // отправляет данные боту в строковом виде, после чего закрывает приложение (работает только если приложение запущено с keyboard button).
  • ready() // метод позволяет отследить, когда приложение готово к отображению.
  • expand() // метод позволяет растянуть окно на всю высоту.
  • close() // метод закрывает приложение.

Внизу окна приложения расположена главная кнопка, реализованная свойством MainButton объекта WebApp:

  • text // текст кнопки, по умолчанию: "Continue"
  • color // цвет текста
  • textColor // цвет подложки
  • isVisible // видна ли кнопка (по умолчанию false)
  • isActive // активна ли кнопка (по умолчанию true)
  • setText(text) // метод для задания текста
  • onClick(callback) // метод при нажатии на кнопку
  • show() // показать кнопку
  • hide() // скрыть кнопку
  • enable() // сделать активной
  • disable() // сделать неактивной
  • setParams(params) // задает параметры в виде объекта

//

Данные !!! реализованны свойством initData объекта WebApp:

initData, который можно достать с помощью JavaScript. Объект имеет следующую структуру:

{
"query_id": "str",
"user": {
"id": 1,
"is_bot": false,
"first_name": "Pavel",
"last_name": "Durov",
"username": "durov",
"language_code": "ru",
"photo_url": "https://telegram.org/durov.jpg"
},
"auth_date": 1655210062,
"hash": "7f83b1657ff1fc53b92dc18148a1d65dfc2d4b1fa3d677284addd200126d9069"
}

!!!

Данные о пользователе реализованны свойством initDataUnsafe объекта WebApp:

user.id // уникальный идентификатор пользователя
isBot // бот ли пользователь (true/false)
first_name // имя пользователя
last_name // "фамилия" пользователя
username // username пользователя
language_code // код языка пользователя

//

Бот /получатель

Теперь вешаем обработчик событий на сообщение, которое посылает веб-приложение в методе send (работать будет только с keyboard button):

И все - теперь мы можем получать информацию с сайта и отвечать на нее.
Есть и другие способы - но это уже немного другая история.

Приложение WebApp, открытое кнопкой web_app в составе reply_keyboard при выполнении метода .sendData() формирует специальное обновление, которое передается боту. Свойство объекта message такого обновления включает объект web_app_data типа WebAppData с двумя строковыми свойствами:

  • data (String) данные переданные из WebApp в качестве параметра метода .sendData()
    • WebApps API предупреждает о потенциальной опасности этих данных: "плохой клиент может отправлять произвольные данные в этом поле", поэтому их следует подвергать проверке
  • button_text (String) повторяет текст кнопки клавиатуры web_app, с помощью которой приложение WebApp было открыто (эти данные тоже потенциально опасны и требуют проверки)

Источники

  • Создание telegram web apps и взаимодействие с ними в телеграм ботах //habr.com (17.05.2022)
  •  Telegram Web App bot: разбор и аспекты безопасности //krasovs.ky

Leave a Reply