Разработка Telegram Mini App с интеграцией 1С-Битрикс

Разработка Telegram Mini App с интеграцией 1С-Битрикс

Telegram Mini App — это веб-приложение, открывающееся внутри Telegram через WebApp API. С точки зрения архитектуры это обычный SPA (React/Vue/Vanilla JS), но запущенный в контексте Telegram: доступен объект window.Telegram.WebApp, через который приложение получает данные пользователя, цветовую схему, данные о сессии. Для интернет-магазина на 1С-Битрикс такое приложение позволяет вынести каталог, корзину и оформление заказа прямо в мессенджер без установки отдельного мобильного приложения.

Архитектура: что где живёт

Telegram Client
  └─ Mini App (React SPA)
       └─ HTTPS запросы → Битрикс API (REST или кастомные эндпоинты)
            └─ Валидация initData Telegram
                 └─ Бизнес-логика: каталог, корзина, заказы

Mini App не имеет прямого доступа к базе данных — всё через API. Битрикс выступает как бэкенд, предоставляющий JSON-ответы. Аутентификация пользователя — через initData из Telegram WebApp (подпись HMAC-SHA256 по секретному токену бота).

Инициализация и валидация initData

При открытии Mini App объект window.Telegram.WebApp содержит initData — строку с данными пользователя и хешем. Эту строку нужно передавать на сервер при каждом запросе и валидировать.

На стороне Mini App (React):

import { useEffect, useState } from 'react';

const tg = window.Telegram.WebApp;

export function useTelegramAuth() {
    const [token, setToken] = useState<string | null>(null);

    useEffect(() => {
        tg.ready();
        tg.expand();

        const initData = tg.initData;
        if (!initData) return;

        // Отправляем initData на сервер для обмена на JWT-токен
        fetch('/api/telegram/auth', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ init_data: initData }),
        })
            .then(r => r.json())
            .then(data => setToken(data.token));
    }, []);

    return { token, user: tg.initDataUnsafe?.user };
}

На стороне Битрикс — валидация подписи:

// /local/api/telegram/auth.php
namespace Local\TelegramMiniApp;

class InitDataValidator
{
    private string $botToken;

    public function __construct(string $botToken)
    {
        $this->botToken = $botToken;
    }

    public function validate(string $initData): bool
    {
        parse_str($initData, $params);
        $hash = $params['hash'] ?? '';
        unset($params['hash']);

        // Сортируем ключи, строим data-check-string
        ksort($params);
        $dataCheckString = implode("\n", array_map(
            fn($k, $v) => "$k=$v",
            array_keys($params),
            array_values($params)
        ));

        // Секрет: HMAC-SHA256 от токена бота с ключом "WebAppData"
        $secretKey = hash_hmac('sha256', $this->botToken, 'WebAppData', true);
        $expected  = hash_hmac('sha256', $dataCheckString, $secretKey);

        // Проверяем timestamp (не старше 24 часов)
        $authDate = (int)($params['auth_date'] ?? 0);
        if (time() - $authDate > 86400) {
            return false;
        }

        return hash_equals($expected, $hash);
    }

    public function extractUser(string $initData): ?array
    {
        parse_str($initData, $params);
        return json_decode($params['user'] ?? '{}', true);
    }
}

Привязка Telegram-пользователя к Битрикс

При первом входе через Mini App нужно сопоставить Telegram user_id с покупателем в Битрикс. Логика:

class TelegramUserResolver
{
    public function resolveOrCreate(array $tgUser): int
    {
        $tgId = (int)$tgUser['id'];

        // Ищем пользователя по пользовательскому полю
        $result = \CUser::GetList(
            ($by = 'ID'),
            ($order = 'ASC'),
            ['UF_TELEGRAM_ID' => $tgId],
            ['FIELDS' => ['ID']]
        );

        if ($row = $result->Fetch()) {
            return (int)$row['ID'];
        }

        // Создаём нового пользователя
        $user   = new \CUser();
        $userId = $user->Add([
            'LOGIN'          => 'tg_' . $tgId,
            'NAME'           => $tgUser['first_name'] ?? '',
            'LAST_NAME'      => $tgUser['last_name'] ?? '',
            'PASSWORD'       => md5(uniqid('', true) . $tgId),
            'CONFIRM_PASSWORD' => md5(uniqid('', true) . $tgId),
            'ACTIVE'         => 'Y',
            'GROUP_ID'       => [2], // группа "Покупатели"
            'UF_TELEGRAM_ID' => $tgId,
        ]);

        return (int)$userId;
    }
}

API-эндпоинты для Mini App

Каталог товаров, корзина и заказы — через кастомные REST-обработчики Битрикс. Регистрируем маршруты:

// /local/routes/telegram.php — подключается из init.php
\Bitrix\Main\Routing\Router::getInstance()
    ->get('/api/telegram/catalog',   [\Local\TelegramMiniApp\CatalogController::class, 'index'])
    ->get('/api/telegram/catalog/{id}', [\Local\TelegramMiniApp\CatalogController::class, 'show'])
    ->post('/api/telegram/cart/add', [\Local\TelegramMiniApp\CartController::class, 'add'])
    ->get('/api/telegram/cart',      [\Local\TelegramMiniApp\CartController::class, 'index'])
    ->post('/api/telegram/order',    [\Local\TelegramMiniApp\OrderController::class, 'create']);

Каталог через Highload API или \CIBlockElement:

class CatalogController
{
    public function index(Request $request): JsonResponse
    {
        $elements = \CIBlockElement::GetList(
            ['SORT' => 'ASC'],
            ['IBLOCK_ID' => CATALOG_IBLOCK_ID, 'ACTIVE' => 'Y'],
            false,
            ['nPageSize' => 20, 'iNumPage' => (int)$request->get('page', 1)],
            ['ID', 'NAME', 'PREVIEW_TEXT', 'PREVIEW_PICTURE', 'PROPERTY_PRICE', 'PROPERTY_ARTICLE']
        );

        $items = [];
        while ($row = $elements->GetNextElement()) {
            $fields = $row->GetFields();
            $props  = $row->GetProperties();
            $items[] = [
                'id'    => (int)$fields['ID'],
                'name'  => $fields['NAME'],
                'text'  => $fields['PREVIEW_TEXT'],
                'image' => \CFile::GetPath($fields['PREVIEW_PICTURE']),
                'price' => (float)($props['PRICE']['VALUE'] ?? 0),
            ];
        }

        return new JsonResponse(['items' => $items]);
    }
}

Оплата через Telegram Payments

Telegram поддерживает встроенную оплату через провайдеров (ЮKassa, Stripe и др.). Для запуска платежа из Mini App:

// В Mini App после формирования заказа
async function initiatePayment(orderId: number) {
    // Запрашиваем invoice_link у сервера
    const res = await fetch('/api/telegram/payment/invoice', {
        method: 'POST',
        headers: { Authorization: `Bearer ${token}` },
        body: JSON.stringify({ order_id: orderId }),
    });
    const { invoice_url } = await res.json();

    // Открываем страницу оплаты Telegram
    tg.openInvoice(invoice_url, (status) => {
        if (status === 'paid') {
            // Уведомляем сервер, обновляем статус заказа
            confirmPayment(orderId);
        }
    });
}

На стороне Битрикс — создание invoice через Bot API:

public function createInvoice(int $orderId, int $bitrixUserId): string
{
    $order = \Bitrix\Sale\Order::load($orderId);

    $response = $this->botApiPost('createInvoiceLink', [
        'title'          => 'Заказ #' . $orderId,
        'description'    => 'Оплата заказа ' . $order->getField('ACCOUNT_NUMBER'),
        'payload'        => json_encode(['order_id' => $orderId, 'user_id' => $bitrixUserId]),
        'provider_token' => PAYMENT_PROVIDER_TOKEN, // токен ЮKassa в Telegram
        'currency'       => 'RUB',
        'prices'         => [['label' => 'Итого', 'amount' => (int)($order->getPrice() * 100)]],
    ]);

    return $response['result']; // invoice_link
}

Состав работ

• Регистрация бота, настройка Mini App через @BotFather
• React-приложение: каталог, карточка товара, корзина, оформление заказа
• Валидация initData на стороне Битрикс
• Привязка Telegram-пользователя к покупателю в Битрикс
• REST API: каталог, корзина, заказы, статусы
• (Опционально) Интеграция Telegram Payments для оплаты в одно касание
• Уведомления покупателю через бота: смена статуса заказа

Сроки: MVP (каталог + корзина + заказ) — 4–6 недель. Полная версия с оплатой и уведомлениями — 8–12 недель.