Разработка авторизации через 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 работают кросс-девайс).

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

Transaction signing: 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 format
    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 компонентов.