跳到主要内容

TON Connect for JS

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

如果你的DApp使用React，可以看看TON Connect UI React SDK。

实现​

1. 安装​

Add script in the HEAD element of your website:

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

2. TON Connect 初始化​

安装包后，您应创建一个manifest.json文件给您的应用程序。有关如何创建manifest.json文件的更多信息，请查看这里。

添加一个带有ton-connect id的按钮来连接钱包：

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

3. 连接到钱包​

"连接"按钮（在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>

4. 重定向​

自定义返回策略​

要在连接后重定向用户到特定的URL，您可以自定义返回策略。

Telegram小程序​

要在钱包连接后重定向用户到Telegram小程序，请使用twaReturnUrl选项：

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

在SDK文档中阅读更多

5. UI自定义​

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: "0:412410771DA82CBA306A55FA9E0D43C9D245E38133CB58F1457DFB8D5CD8892F", // destination address
            amount: "20000000" //Toncoin in nanotons
        }
    ]
}

const result = await tonConnectUI.sendTransaction(transaction)

通过哈希理解交易状态​

位于支付处理（使用tonweb）中的原则。查看更多

签名和验证​

了解如何使用TON Connect签名和验证消息：

钱包断开连接​

调用以断开钱包连接：

await tonConnectUI.disconnect();

参阅​