📡 Onboarding Web SDK

KryptoGO Onboarding Web SDK (@kryptogo/auth) 是一個 JavaScript 函式庫，用於處理使用者驗證和與使用者錢包在網頁應用程式中的互動。

提示

這是使用 Onboarding Web SDK 的演示網站。

提示

想要在您的 React 應用程式中更快更簡單地使用 KryptoGO 驗證，並減少手動編碼的工作嗎？請查看我們的 Auth Button。

初始化 SDK

要使用 KryptoGO Onboarding Web SDK，在 HTML 檔案中使用 <script> 標籤包含 SDK 腳本，或使用 npm/pnpm/yarn 安裝它。

在 HTML 檔案中包含 Onboarding Web SDK 腳本：
```
<script src="path-to-our-sdk.0.1.0.min.js"></script>
```

或者，使用您偏好的套件管理器安裝：npm、pnpm 或 yarn

npm install @kryptogo/auth
# or
pnpm add @kryptogo/auth
# or
yarn add @kryptogo/auth

Initialize the SDK with your client ID and other optional configuration parameters. The useIFrame parameter specifies whether to use an iframe to show the login window. Example code:

import { KryptoGOAuth } from "@kryptogo/auth";

KryptoGOAuth.init({
  clientId: "CLIENT_ID",
  useIFrame: true,
  onConnect: function () {
    console.log("已驗證！");
  },
  onLogout: function () {
    console.log("使用者已登出！");
  },
  onError: function (error) {
    console.error("驗證失敗：", error);
  },
  onTokenRefresh: function (token) {
    if (token) {
      console.log("新的存取權杖：", token);
    }
  },
});

將 CLIENT_ID 替換為您實際的用戶端 ID，該 ID 由 KryptoGO 提供。

init 函式的參數如下所示：

參數	類型	定義
clientId	string	KryptoGO 提供的用戶端 ID。
useIFrame	boolean	是否使用 iframe 顯示登入視窗。預設為 true。
onConnect	() ⇒ void	驗證成功時呼叫的回調函式。
onLogout	() ⇒ void	使用者登出時呼叫的回調函式。
onError	() ⇒ void	驗證過程中發生錯誤時呼叫的回調函式。
onTokenRefresh	(token: string) ⇒ void	當獲取新的存取權杖時呼叫的回調函式。當您想要自行使用存取權杖時，這將非常有用。

實施 OAuth

要開始 OAuth 流程，請使用以下函數：

KryptoGOAuth.asyncLogin(type?: LOGIN_TYPE, account?: string): Promise<void>

呼叫此函數會彈出登入視窗。成功登入後，視窗會自動關閉並解析 Promise。

如果未指定 type(method)，使用者可以在登入視窗中選擇登入方法。

有兩種處理登入流程結束的回調方式，無論是成功還是失敗。

在 init 函數中使用 onConnect 和 onError 回調。這些回調將在登入流程完成後觸發。
（推薦） 使用 Promise 或 try-catch 區塊來處理登入流程。示例程式碼片段：

(    import { KryptoGOAuth } from "@kryptogo/auth";

      // Using a Promise
      KryptoGOAuth.login("email", "foo@bar.com")
        .then(() => {
          console.log("Success");
        })
        .catch((err) => {
          console.error("Error", err);
        });

      // Using a try-catch block
      try {
        await KryptoGOAuth.login("email", "foo@bar.com");
        console.log("Success");
      } catch (err) {
        console.error("Error", err);
      }

與用戶錢包互動

在用戶登錄之後，您可以使用以下方法來檢索有關他們錢包的信息。

檢索鏈上信息

KryptoGOAuth.getCurrentAccount(): Promise<string> 啟動與服務器的握手以驗證用戶訪問令牌的有效性，然後返回用戶的當前錢包地址。
這個功能將返回什麼地址？
登入時，可能會發生兩種情況：
1. 用戶不是KryptoGO的現有用戶：
  
  將自動創建一個新錢包。
  
  這個新錢包的地址將被設置為預設錢包地址，並由此功能返回。
2. 用戶是KryptoGO的現有用戶（可能有多個相關聯的錢包：
  
  將返回預設的錢包地址。
  
  預設的錢包地址可以在KryptoGO 錢包中設置。
KryptoGOAuth.getNfts(options?: Options): Promise<Nft[]> 返回分頁的NFT結果。

type Options = {
  pagesize: number; // 預設為 10
  pageNumber: number; // 預設為 1
};

type ChainId =
  | "eth"
  | "bsc"
  | "matic"
  | "arb"
  | "btc"
  | "kcc"
  | "sol"
  | "tron";
type NFTProtocol = "ERC721" | "ERC1155";
type NFT = {
  chain_id: ChainId;
  contract_address: string; // "0x60e4d786628fea6478f785a6d7e704777c86a7c6",
  token_id: string; // "24059"
  collection_slug: string; // "mutant-ape-yacht-club",
  contract_schema_name: NFTProtocol;
  floor_price_in_eth: number | null;
  image_url: string; // "https://lh3.googleusercontent.com/k7d4rPjPosBpl-PtKnqH8bcQqaEjZ7AlXHx27RKC6gSA9yduLsjOcBy5GNPC_kdNkc88sen6pm14X23eM0Pb8QNsaa4arswDO8kcQ6w",
  image_preview_url: string; // "https://lh3.googleusercontent.com/k7d4rPjPosBpl-PtKnqH8bcQqaEjZ7AlXHx27RKC6gSA9yduLsjOcBy5GNPC_kdNkc88sen6pm14X23eM0Pb8QNsaa4arswDO8kcQ6w=s250",
  amount: number;
};

KryptoGOAuth.getTokens(options?: Options): Promise<Token[]> 返回分頁的代幣結果。

(type Options = {
    pagesize: number; // default to 10
    pageNumber: number; // default to 1
  };

  type ChainId =
    | "eth"
    | "bsc"
    | "matic"
    | "arb"
    | "btc"
    | "kcc"
    | "sol"
    | "tron";
  type Token = {
    chain_id: ChainId;
    amount: number; // 1.356,
    amount_str: string; // "1.356",
    logo_urls: string[]; // ["https://static.debank.com/image/token/logo_url/eth/935ae4e4d1d12d59a99717a24f2540b5.png"],
    symbol: string; // "ETH",
    usd_value: number; // 1566.26136,
    decimals: number; // 9,
    prices_in_24h: number[][] | null;
    price: number;
  };

以下兩個方法將在下一個版本中發布：

KryptoGOAuth.getRewards(options?: Options): Promise<Reward[]> 返回分頁的獎勵結果。
KryptoGOAuth.getTxs(options?: Options): Promise<Transaction[]> 返回分頁的交易結果。

其他方法

KryptoGOAuth.isConnected(): Promise<boolean> 返回用戶是否已登錄。
KryptoGOAuth.getAccessToken(): Promise<string | undefined> 返回用戶的 KryptoGO 訪問令牌。
KryptoGOAuth.logout() 登出當前用戶會話。

初始化 SDK​

實施 OAuth​

與用戶錢包互動​

檢索鏈上信息​

其他方法​

初始化 SDK

實施 OAuth

與用戶錢包互動

檢索鏈上信息

其他方法