▎Шаги для получения initData
1. Подключите Telegram Web App SDK:
Убедитесь, что вы подключили скрипт SDK в вашем HTML-файле:
<script src="https://telegram.org/js/telegram-web-app.js"></script>
2. Инициализация в вашем React приложении:
В вашем компоненте React вы можете инициализировать Telegram SDK и получить данные следующим образом:
import React, { useEffect, useState } from 'react';
const MyTelegramApp = () => {
const [userData, setUserData] = useState(null);
useEffect(() => {
// Проверяем, доступен ли объект Telegram Web App
if (window.Telegram && window.Telegram.WebApp) {
// Инициализируем Telegram Web App
window.Telegram.WebApp.ready();
// Получаем initData
const initData = window.Telegram.WebApp.initData;
// Парсим данные пользователя
const user = parseInitData(initData);
setUserData(user);
} else {
console.error('Telegram Web App is not available');
}
}, []);
const parseInitData = (initData) => {
const params = new URLSearchParams(initData);
return {
user: JSON.parse(params.get('user')),
hash: params.get('hash'),
auth_date: params.get('auth_date'),
start_param: params.get('start_param'),
chat_type: params.get('chat_type'),
chat_instance: params.get('chat_instance'),
};
};
return (
<div>
<h1>My Telegram Mini App</h1>
{userData ? (
<div>
<h2>User Info:</h2>
<pre>{JSON.stringify(userData, null, 2)}</pre>
</div>
) : (
<p>Loading user data...</p>
)}
</div>
);
};
export default MyTelegramApp;
3. Обработка ошибок:
Убедитесь, что ваше приложение действительно запускается внутри Telegram. Если вы тестируете его в обычном браузере, объект window.Telegram не будет доступен, и вам нужно будет проверить это условие.
▎Замечания
• Проверка окружения: Убедитесь, что вы тестируете приложение в самом Telegram, так как window.Telegram не будет доступен в обычном веб-браузере
