본문으로 건너뛰기

TON Connect for JS

이 가이드는 사용자 인증과 트랜잭션을 위해 Javascript 애플리케이션에 TON Connect를 통합하는 데 도움을 줍니다.

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

지갑 연결​

"Connect" 버튼(buttonRootId에 추가됨)은 자동으로 클릭을 처리합니다.

하지만 사용자 정의 버튼 클릭 후와 같이 프로그래밍 방식으로 "연결 모달"을 열 수 있습니다:

<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로 리다이렉트하려면 리턴 전략을 커스터마이즈할 수 있습니다.

텔레그램 미니 앱​

지갑 연결 후 텔레그램 미니 앱으로 리다이렉트하려면 twaReturnUrl 옵션을 사용하세요:

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

SDK 문서에서 자세히 알아보기

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

const result = await tonConnectUI.sendTransaction(transaction)

해시로 트랜잭션 상태 이해하기​

Payment Processing(tonweb 사용)에 있는 원칙입니다. 자세히 알아보기

서명 및 확인​

TON Connect를 사용하여 메시지를 서명하고 확인하는 방법 이해하기:

지갑 연결 해제​

지갑 연결을 해제하려면:

await tonConnectUI.disconnect();

참고​