Как получить initData (startParams) в telegram mini app на React?

Question

[alch3m1st]

Прошерстив интернет, я нашёл решение:

import { initMiniApp, mockTelegramEnv, parseInitData } from '@telegram-apps/sdk';

const initializeTelegramSDK = async () => {
  try {
    // Attempt to initialize the real Telegram environment
    console.log("Initializing Telegram environment");
    const [miniApp] = initMiniApp();
    await miniApp.ready();
  } catch (error) {
    // In case of an error, initialize a mock environment
    console.error('Error initializing Telegram:', error);

    const initDataRaw = new URLSearchParams([
      ['user', JSON.stringify({
        id: 99281932,
        first_name: 'Andrew',
        last_name: 'Rogue',
        username: 'rogue',
        language_code: 'en',
        is_premium: true,
        allows_write_to_pm: true,
      })],
      ['hash', '89d6079ad6762351f38c6dbbc41bb53048019256a9443988af7a48bcad16ba31'],
      ['auth_date', '1716922846'],
      ['start_param', 'debug'],
      ['chat_type', 'sender'],
      ['chat_instance', '8428209589180549439'],
    ]).toString();

    mockTelegramEnv({
      themeParams: {
        accentTextColor: '#6ab2f2',
        bgColor: '#17212b',
        buttonColor: '#5288c1',
        buttonTextColor: '#ffffff',
        destructiveTextColor: '#ec3942',
        headerBgColor: '#fcb69f',
        hintColor: '#708499',
        linkColor: '#6ab3f3',
        secondaryBgColor: '#232e3c',
        sectionBgColor: '#17212b',
        sectionHeaderTextColor: '#6ab3f3',
        subtitleTextColor: '#708499',
        textColor: '#f5f5f5',
      },
      initData: parseInitData(initDataRaw),
      initDataRaw,
      version: '7.2',
      platform: 'tdesktop',
    });

    console.log('Mock Telegram environment initialized');
  }
};

// Initialize SDK
initializeTelegramSDK();

Но суть в том, что метод initMiniApp больше не доступен. Подключив скрипт:

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

Это тоже не помогло. Я не смог получить initData через window.telegram.WebApp.initData. Структура данных пуста, хоть я и определил mock-дату.

Как в итоге получить данные пользователя, передающиеся telegram в приложение, в React?

Answer 1

[stastop]

▎Шаги для получения 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 не будет доступен в обычном веб-браузере