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

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

Нещодавно до нас звернувся власник інтернет-магазину на Бітрікс з каталогом 30 000 товарів. Після запуску Mini App конверсія в замовлення зросла на 25% за місяць. Клієнти купують прямо в Telegram, не встановлюючи додатки. Мобільна версія сайту часто програє в зручності — Telegram Mini App вирішує цю проблему. Типова ситуація: користувач клікає на товар у Telegram-каналі, але повільне завантаження мобільної версії збиває настрій. Mini App усуває перешкоди: все відбувається всередині месенджера, без перемикання контексту. Розробляємо міні-додатки для магазинів на 1С-Бітрікс під ключ: каталог, кошик, оплата. Наші інженери — сертифіковані спеціалісти з досвідом понад 5 років і десятками впроваджень. Один з наших клієнтів відзначив зростання продажів на 25% за місяць після запуску.

Як працює інтеграція Telegram Mini App з 1С-Бітрікс?

Архітектура: Mini App (React SPA) → HTTPS запити → Бітрікс API (REST або кастомні ендпоінти). Mini App не має доступу до бази — все через API. Бітрікс виступає бекендом, повертаючи JSON. Аутентифікація — через initData з Telegram WebApp (підпис HMAC-SHA256 за секретним токеном бота).

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

Як аутентифікувати користувача без пароля?

При відкритті 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); } } 

При першому вході через Mini App ми зіставляємо Telegram user_id з покупцем у Бітрікс через користувацьке поле UF_TELEGRAM_ID. Якщо користувача не знайдено — створюється новий з групою «Покупці».

API-ендпоінти для Mini App

Каталог товарів, кошик і замовлення реалізовані через кастомні REST-обробники Бітрікс. Типовий набір: каталог з пагінацією, додавання/видалення з кошика, створення замовлення. Приклад контролера каталогу:

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]); } } 

Покроковий процес розробки

1. Аналіз каталогу та вимог — вивчаємо інфоблоки, торгові пропозиції та ціни. Визначаємо набір функцій для MVP.
2. Проектування архітектури — розробляємо REST API на стороні Бітрікс, схеми даних для кошика та замовлень. Використовуємо ORM і теговане кешування для продуктивності.
3. Розробка Mini App — створюємо React-додаток з компонентами каталогу, кошика та оформлення замовлення.
4. Інтеграція з Бітрікс — підключаємо API, налаштовуємо аутентифікацію через initData та прив'язку користувачів.
5. Налаштування Telegram Payments — реєструємо провайдера, створюємо інвойси, обробляємо callback.
6. Тестування — перевіряємо на реальних користувачах, виправляємо баги.
7. Деплой та запуск — публікуємо Mini App через @BotFather, налаштовуємо моніторинг.
8. Підтримка — 30 днів безкоштовної підтримки після запуску.

Чому Telegram Mini App кращий за мобільний додаток?

Mini App поєднує низький поріг входу, швидке впровадження та високу конверсію завдяки вбудованому месенджеру. Це ідеальний варіант для інтернет-магазинів, які хочуть швидко запустити мобільні продажі без витрат на нативні додатки.

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

Telegram підтримує вбудовану оплату через провайдерів (ЮKassa та ін.). На стороні Бітрікс створюється 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, 'currency' => 'RUB', 'prices' => [['label' => 'Разом', 'amount' => (int)($order->getPrice() * 100)]], ]); return $response['result']; // invoice_link } 

Після оплати Mini App отримує callback і оновлює статус замовлення в Бітрікс. Покупець отримує сповіщення через бота.

Що входить в роботу

• Реєстрація бота та налаштування Mini App через @BotFather
• Розробка React-додатку: каталог, картка товару, кошик, оформлення замовлення
• Валідація initData на стороні Бітрікс з захистом від підробки
• Прив'язка Telegram-користувача до покупця в Бітрікс (через UF_TELEGRAM_ID)
• REST API: каталог, кошик, замовлення, статуси, сповіщення
• (Опціонально) Інтеграція Telegram Payments для оплати одним дотиком
• Сповіщення покупцю через бота: зміна статусу замовлення, промокоди
• Документація по API та інструкція з експлуатації
• Навчання адміністраторів роботі з панеллю управління
• Підтримка протягом 30 днів після запуску

Терміни розробки

Вартість розраховується індивідуально після аналізу вашого каталогу та вимог. Замовте інтеграцію — ми підготуємо комерційну пропозицію протягом 1-2 днів. Отримайте консультацію досвідченого інженера безкоштовно.

Наші гарантії: фіксована вартість на кожному етапі, прозорі терміни, здача кожного етапу з підписанням акту. Працюємо з 1С-Бітрікс, починаючи з актуальних версій, підтримуємо обмін CommerceML, REST API та високонавантажені каталоги до 500 000 товарів. Зв'яжіться з нами для оцінки вашого проекту.