Розробка авторизації через TON Connect

Розробка авторизації через TON Connect

TON Connect — протокол підключення гаманців з dApps в екосистемі TON. Аналог SIWE/WalletConnect, але розроблений нативно для TON. Підтримується всіма major TON гаманцями: Tonkeeper, MyTonWallet, Tonhub. Особливо потужний у контексті Telegram Mini Apps — нативна інтеграція.

Архітектура TON Connect

Bridge: TON Connect використовує bridge-сервіс для relay повідомлень між dApp та гаманцем. Користувач не повинен бути на тому ж устаткуванні що й dApp (deep links + QR codes працюють cross-device).

Session: після підключення — persistent session зберігається у гаманці. Повторне підключення не вимагає нового QR-кода.

Підписання транзакцій: TON Connect не тільки для auth — можна запитувати підписання транзакцій.

Frontend реалізація

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

// Компонент кнопки підключення
function ConnectButton() {
    return <TonConnectButton />; // Готовий UI компонент
}

// Отримання адреси підключеного гаманця
function WalletInfo() {
    const address = useTonAddress(); // raw або user-friendly формат
    return <div>Connected: {address}</div>;
}

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"
}

Цей файл показується користувачу при підключенні — верифікація що це легітимне додаток.

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

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();
    
    // Верифікація proof через TON Connect SDK
    const result = await tonweb.utils.verifyTonConnectProof(
        proof,
        publicKey,
        walletAddress
    );
    
    return result;
}

// Express endpoint
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 });
        }
    }
});

Специфіка Telegram Mini App

У Telegram Mini App TON Connect працює без QR-кодів — гаманець відкривається inline в Telegram:

import { useTonConnectUI } from '@tonconnect/ui-react';

function TelegramMiniAppConnect() {
    const [tonConnectUI] = useTonConnectUI();
    
    // У Telegram Mini App — відкриває гаманець всередину Telegram
    const handleConnect = async () => {
        if (window.Telegram?.WebApp) {
            // Спеціальна поведінка для Telegram
            await tonConnectUI.openModal();
        }
    };
}

TON Connect auth — 2-5 днів для інтеграції. Telegram Mini Apps роблять це ще швидшим завдяки готовим UI компонентам.