跳到主要内容

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

参阅