Telegram Mini Apps

Подключение бота

Мы используем один сценарий, чтобы запустить бот и отвечать на входящие запросы. Вот его основа:

https://cremax.ru/scenario-playground?saved=64l8spnosvu77i9px9ji63vg

Открытие Mini App

Чтобы открыть приложение из телеграм-бота, нужно в сообщение (sendMessage) добавить поле reply_markup следующего содержания:

{
  inline_keyboard: [
    [
      {
        text: "Открыть приложение",
        web_app: {
          url: "https://my-project.cremax.su/auth"
        }
      }
    ]
  ]
}

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

Бесшовная авторизация

Авторизация происходит в 2 этапа.

1. Сначала открывается страница авторизации, Telegram автоматически передает туда все нужные для авторизации данные.

2. Мы эти данные проверяем, и если все верно, то перенаправляем пользователя на итоговую страницу.

То есть мы всегда используем промежуточную страницу для того, чтобы принять данные авторизации, проверить, и далее перенаправить уже авторизованного пользователя на само приложение.

Страница авторизации

Нужно создать страницу auth, и в ссылке на приложение (внутри sendMessage) передавать именно эту страницу.

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

Нужно создать вставку кода в разделе “Страницы”, в поле "Код перед head" указать:

<script src="https://telegram.org/js/telegram-web-app.js"></script>

И сделать так, чтобы этот код показывался только на страницу auth. Не забудьте включить этот код.

Компонент авторизации

На эту же страницу нужно добавить компонент из библиотеки по номеру 42925.

У него 2 всего настройки - адрес для перенаправления (итоговая ссылка на приложение) и сценарий авторизации, который нам теперь нужно создать.

Сценарий авторизации

В качестве основы мы предлагаем использовать следующую заготовку:

https://cremax.ru/scenario-playground?saved=64l9rkvbmth1k34a3i981go3

Для ее правильной работы нужно чтобы в таблице “Пользователи” были следующие поля:

• tg_id: Число

• first_name: Текст

• last_name: Текст

• username: Текст

Сценарий создает пользователя, если он впервые открывает приложение, а при последующих открытиях просто авторизует его.

Страница приложения

На странице самого приложения (/app) вы уже можете быть точно уверены, что пользователь авторизован, и дальше работать с данными пользователя.

Бонус: авторизация через виджет

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

Делается практически так же, как мы делали страницу auth. Номер компонента для авторизации: 42927.

Сценарий авторизации через виджет:

https://cremax.ru/scenario-playground?saved=64labjtl03c1s8l59waf9p59