Telegram Mini Apps на FlutterFlow
Telegram MiniApps это веб сайты или веб приложения, которые отображаются внутри приложения Telegram и позволяют взаимодействовать с интерфейсом и данными мессенджера.
Документация для MiniApps находится тут: https://core.telegram.org/bots/webapps
Для того, чтобы из FlutterFlow взаимодействовать с методами Telegram нужно добавить в Headers сгенерированного сайта скрипт телеграмма.
<script src="https://telegram.org/js/telegram-web-app.js"></script>
Редактирование заголовков в веб приложении находится в разделе Settings->WebDeployment->Custom Headers
Для получения данных из Telegram Client нужно использовать Custom Actions.
Пример получения данных пользователя:
// Automatic FlutterFlow imports
import '/backend/schema/structs/index.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
import 'dart:js' as js;
Future<String?> tgInitData() async {
// Add your function code here!
return js.context['Telegram']['WebApp']['initData'].toString();
}
В результате выполнения Custom Action вернет строку с данными пользователя в виде:
user=%7B%22id%22%3A38325274%2C%22first_name%22%3A%22%D0%A1%D0%B5%D1%80%D0%B3%D0%B5%D0%B9%22%2C%22last_name%22%3A%22%D0%A1%D0%BA%D1%80%D0%B8%D0%BF%D0%BE%D0%B2%22%2C%22username%22%3A%22skripov%22%2C%22language_code%22%3A%22ru%22%2C%22allows_write_to_pm%22%3Atrue%7D&chat_instance=7108251674217944838&chat_type=supergroup&auth_date=1727340618&hash=b4eaf17f4b5f2ba6cd82c743cba25eabb26a33830aca6071c6f53b318317a4a0
Эту строку дальше необходимо разобрать и валидировать на бэкенде, т.к. злоумышленник может ее подделать. Суть валидации - это сравнение значения в поле hash с подписью всех полученных в строке данных токеном бота, именно по этой причине это нужно делать на бэкенде или облачной функции, чтобы у пользователя не было доступа к токену вашего бота из которого запускается MiniApp.
Другие доступные объекты и методы MiniApps описаны в документации: https://core.telegram.org/bots/webapps#initializing-mini-apps
