Как определить, что фронтенд-приложение открыто внутри Telegram Mini App?

Question

[Александр Синицын]

Я разрабатываю фронтенд-приложение с платежной формой, которое открывается из Telegram-бота как Telegram Mini App. Бот просто по кнопке открывает ссылку на наш фронт.

Задача — понять на стороне фронтенда, что приложение запущено именно внутри Telegram Mini App, чтобы активировать определённую часть кода (это нужно для корректной работы платежной формы, особенно на iOS).

Я изучил документацию и множество обсуждений, и почти везде советуют проверять initData. Однако в моём случае это значение всегда пустая строка, поэтому я не могу использовать его для определения среды.

Я использую библиотеки:
1) https://telegram.org/js/telegram-web-app.js
2) vue-tg

Проблема в том, что все свойства возвращают одинаковые значения, независимо от того открыт ли фронтенд в обычном браузере или внутри Telegram Mini App.

Пример:
window.Telegram.WebApp.initData
window.Telegram.WebApp.initDataUnsafe
window.Telegram.WebApp.platform

Во всех случаях значения одинаковые или пустые.

Как корректно определить на фронтенде, что приложение запущено именно внутри Telegram Mini App, а не в обычном браузере?

Answer 1

[Пума Тайланд]

initData пустой потому, что бот открывает ссылку через обычную кнопку с типом url, а не web_app. Переключи на web_app (или MenuButtonWebApp, или deep link с startapp) — тогда и initData, и platform начнут приходить корректно. Для детекта среды без initData проверяй launch-параметры в location.hash — при запуске как Mini App туда попадают tgWebAppVersion и tgWebAppPlatform.

Comments

[Александр Синицын]

Спасибо за подробный ответ!

Может будет хорошим дополнением, то что сама платежная форма открывается еще через iFrame. Попробовал с hash - везде отдает пустую строку. С initDate попробовал на продовом боте, если открыть консоль разработчика в телеге, то initDate тоже будет пустой строкой...