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