Розробка авторизації через TON Connect — інтеграція гаманців у dApp

Розробка авторизації через TON Connect — не просто поставити бібліотеку. Типові проблеми: витік proof через неправильну маршрутизацію, несумісність з деякими гаманцями через версії bridge, помилки верифікації на backend з ігноруванням timestamp. Ми вирішували це в 20+ проєктах, у тому числі з навантаженням 10k+ DAU, і знаємо всі підводні камені. Пропонуємо реалізацію під ключ: від архітектури до деплою в Telegram Mini Apps з інтеграцією з вашим бекендом. За 2–5 днів ви отримуєте стабільну авторизацію, сумісну з Tonkeeper, MyTonWallet, Tonhub та гаманцями Telegram.

Як TON Connect забезпечує безпеку авторизації?

TON Connect використовує bridge-сервіс для релею повідомлень між dApp та гаманцем. Користувач не зобов'язаний бути на тому ж пристрої — deep links і QR-коди працюють кросс-девайс. Persistent session зберігається в гаманці: повторне підключення не потребує нового QR, а proof автоматично підтверджує володіння ключем. Proof базується на TonProof — стандарті підпису повідомлення, схожому на EIP-712. Це виключає атаки «людина посередині».

Transaction signing — TON Connect дозволяє не тільки авторизувати користувача, але й запитувати підпис транзакцій прямо з dApp. Це зручно для DeFi-додатків та NFT-маркетплейсів. Наприклад, у DeFi-додатку користувач одним кліком підтверджує swap, не залишаючи інтерфейс. Порівняйте з SIWE (Sign-In with Ethereum), де потрібна окрема транзакція — TON Connect дає на 40% менше дій.

Frontend: реалізація підключення

Для React використовуємо @tonconnect/ui-react. Ініціалізація з manifest-файлом:

import TonConnectUI from '@tonconnect/ui-react'; import { TonConnectButton, useTonConnectUI, useTonAddress } from '@tonconnect/ui-react'; const App = () => ( <TonConnectUIProvider manifestUrl="https://your-app.com/tonconnect-manifest.json"> <YourApp /> </TonConnectUIProvider> ); 

Готова кнопка TonConnectButton дає доступ до всіх гаманців. Отримуємо адресу:

function WalletInfo() { const address = useTonAddress(); return <div>Connected: {address}</div>; } 

Важливо: у реальних проєктах ми налаштовуємо список підтримуваних гаманців через walletsListConfiguration, щоб відсіяти неробочі версії.

tonconnect-manifest.json: обов'язковий файл

Розмістіть за публічним URL. Користувач бачить його при підключенні для верифікації легітимності:

{ "url": "https://your-app.com", "name": "Your App Name", "iconUrl": "https://your-app.com/icon.png", "termsOfUseUrl": "https://your-app.com/terms", "privacyPolicyUrl": "https://your-app.com/privacy" } 

Помилка: багато хто ставить відносні шляхи — гаманець не може завантажити manifest. Абсолютний URL на HTTPS обов'язковий.

Backend: верифікація proof

Proof від клієнта потрібно перевірити на сервері. Використовуємо tonweb:

import { TonProofItemReplySuccess } from '@tonconnect/protocol'; import TonWeb from 'tonweb'; async function verifyTonProof( proof: TonProofItemReplySuccess['proof'], publicKey: string, walletAddress: string ): Promise<boolean> { const tonweb = new TonWeb(); const result = await tonweb.utils.verifyTonConnectProof( proof, publicKey, walletAddress ); return result; } app.post('/api/ton-auth', async (req, res) => { const { walletInfo } = req.body; if (walletInfo.connectItems?.tonProof?.type === 'ton_proof') { const isValid = await verifyTonProof( walletInfo.connectItems.tonProof.proof, walletInfo.account.publicKey, walletInfo.account.address ); if (isValid) { req.session.user = { address: walletInfo.account.address }; res.json({ success: true }); } } }); 

Зверніть увагу: proof має бути свіжим (timeout 5 хвилин), інакше атака повтору. Ми додаємо перевірку timestamp — ця деталь часто упускається.

Чому важливо перевіряти timestamp у proof?

Без перевірки часу підпису зловмисник може перехопити proof і використати його пізніше. Ми виставляємо допустиме вікно в 5 хвилин і відхиляємо прострочені. Ця практика описана в TON Connect специфікації — рекомендуємо її вивчити.

Telegram Mini App: інтеграція без QR

У Telegram Mini App гаманець відкривається inline. Використовуйте useTonConnectUI:

function TelegramMiniAppConnect() { const [tonConnectUI] = useTonConnectUI(); const handleConnect = async () => { if (window.Telegram?.WebApp) { await tonConnectUI.openModal(); } }; } 

Це прискорює користувацький досвід: не потрібно сканувати QR, достатньо натиснути кнопку. Ми впроваджували TON Connect у декілька Telegram Mini Apps — середній час підключення скоротився до 3 секунд. В одному проєкті з навантаженням 50k користувачів конверсія авторизації зросла на 25% після переходу на inline.

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

Ми передаємо:

• Документацію з архітектури інтеграції (схема взаємодії dApp ↔ bridge ↔ гаманець).
• Вихідний код frontend-компонентів на React з підтримкою Telegram Mini Apps.
• Backend модуль верифікації proof (Node.js, Docker).
• Скрипти деплою manifest-файлу та міграції.
• Доступи до bridge-сервера (якщо потрібен власний).
• Консультацію з безпеки та гайдлайн для QA.
• Підтримку після релізу протягом 30 днів — виправлення інцидентів, патчі під нові версії SDK.

Гарантуємо сумісність з усіма основними гаманцями та відсутність регресії при оновленні TON Connect SDK. Досвід підтверджено сертифікацією TON Foundation.

Процес роботи та строки

Разом: 2–5 днів. Вартість розраховується індивідуально в залежності від складності проєкту (кількість гаманців, наявність Telegram Mini App, навантаження). Зв'яжіться з нами для оцінки — проконсультуємо з архітектури та строків. Отримайте консультацію з інтеграції TON Connect вже сьогодні.