跳到主要内容

用于 JS 的 TON Connect

本指南将帮助您把 TON Connect 集成到您的 Javascript 应用程序中，用于用户身份验证和交易。

如果您的 DApp 使用 React，请查看 TON Connect UI React SDK。

如果您的 DApp 使用 Vue，请参阅 TON Connect UI Vue SDK。

实现​

安装​

将脚本添加到网站的 HEAD 元素中：



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

TON 连接启动​

安装软件包后，请为您的应用程序创建一个 manifest.json 文件。有关如何创建 manifest.json 文件的更多信息，请参阅 此处。

添加一个 ID 为 ton-connect 的按钮，用于连接到钱包：

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

_在此标记_后，在应用程序页面的 <body> 部分添加 tonConnectUI 脚本：

<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 = {
    messages: [
        {
            address: "EQABa48hjKzg09hN_HjxOic7r8T1PleIy1dRd8NvZ3922MP0", // destination address
            amount: "20000000" //Toncoin in nanotons
        }
    ]
}

const result = await tonConnectUI.sendTransaction(transaction)

通过哈希值了解交易状态​

该原理位于支付处理部分（使用 tonweb）。查看更多

签名和验证​

了解如何使用 TON Connect 签署和验证信息：

钱包断线​

调用以断开钱包连接：

await tonConnectUI.disconnect();

另请参见​