Перейти к основному содержимому

TON Connect для JS

warning

Эта страница переведена сообществом на русский язык, но нуждается в улучшениях. Если вы хотите принять участие в переводе свяжитесь с @alexgton.

Это руководство поможет вам интегрировать TON Connect в ваше Javascript приложение для аутентификации пользователей и подтверждения транзакций.

Если вы используете React для своего DApp, взгляните на TON Connect UI React SDK.

Если вы используете Vue для своего DApp, взгляните на TON Connect UI Vue SDK.

Реализация​

Установка​

Добавьте скрипт в элемент HEAD вашего веб-сайта:



<script src="https://unpkg.com/@tonconnect/ui@latest/dist/tonconnect-ui.min.js"></script>

Начало работы TON Connect​

После установки пакета создайте файл manifest.json для вашего приложения. Более подробную информацию о том, как создать файл manifest.json, можно найти здесь.

Добавьте кнопку с идентификатором ton-connect для подключения к кошельку:

<div id="ton-connect"></div>

После этого тега добавьте скрипт для tonConnectUI в секцию <body> страницы вашего приложения:

<script>
    const tonConnectUI = new TON_CONNECT_UI.TonConnectUI({
        manifestUrl: 'https://<YOUR_APP_URL>/tonconnect-manifest.json',
        buttonRootId: 'ton-connect'
    });
</script>

Подключение к кошельку​

Кнопка "Connect" (добавленная в buttonRootId) автоматически обрабатывает нажатия.

Но вы можете программно открыть "connect modal", например, после нажатия на пользовательскую кнопку:

<script>
    async function connectToWallet() {
        const connectedWallet = await tonConnectUI.connectWallet();
        // Do something with connectedWallet if needed
        console.log(connectedWallet);
    }

    // Call the function
    connectToWallet().catch(error => {
        console.error("Error connecting to wallet:", error);
    });
</script>

Перенаправления​

Настройка стратегии возврата​

Чтобы перенаправить пользователя на конкретный URL после подключения, вы можете настроить стратегию возврата.

Мини-приложения Telegram​

Чтобы перенаправить пользователя в Мини-приложение Telegram после подключения кошелька, используйте параметр twaReturnUrl:

tonConnectUI.uiOptions = {
      twaReturnUrl: 'https://t.me/YOUR_APP_NAME'
  };

Подробнее читайте в документации SDK

Настройка пользовательского интерфейса​

TonConnect UI предоставляет интерфейс, который должен быть знаком и узнаваем пользователю при использовании различных приложений. Однако разработчик приложения может изменить этот интерфейс, чтобы он соответствовал интерфейсу приложения.

Документация SDK​

Использование​

Давайте рассмотрим пример использования TON Connect UI в приложении.

Отправка сообщений​

Вот пример отправки транзакции с использованием TON Connect UI:

import TonConnectUI from '@tonconnect/ui';

const tonConnectUI = new TonConnectUI({ //connect application
    manifestUrl: 'https://<YOUR_APP_URL>/tonconnect-manifest.json',
    buttonRootId: '<YOUR_CONNECT_BUTTON_ANCHOR_ID>'
});

const transaction = {
  validUntil: Math.floor(Date.now() / 1000) + 60, // 60 sec
  messages: [
        {
            address: "EQABa48hjKzg09hN_HjxOic7r8T1PleIy1dRd8NvZ3922MP0", // destination address
            amount: "20000000" //Toncoin in nanotons
        }
    ]
}

const result = await tonConnectUI.sendTransaction(transaction)

Понимание статуса транзакции по хэшу​

Принцип описан в разделе Обработка платежей (с использованием tonweb). Подробнее

Подпись и проверка​

Узнайте, как подписывать и проверять сообщения с помощью TON Connect:

Отключение кошелька​

Вызов для отключения кошелька:

await tonConnectUI.disconnect();

См. также​