跳至主要内容

🍳 認證按鈕

認證按鈕（@kryptogo/auth-react）是一個預建的 React 元件，可簡化將 KryptoGO 認證流程整合到您的 React 應用程式中。在您的 React JSX 代碼中包含認證按鈕，傳遞屬性，它會為您處理用戶介面和認證流程。

提示

需要更精細的控制和靈活性來控制用戶介面和認證流程嗎？請查看我們的入門網頁 SDK。

使用案例​

認證按鈕非常適合您希望以快速簡便的方式將 KryptoGO 認證添加到您的 React 應用程式中，而無需手動管理用戶介面元素和認證流程的情況。它抽象了許多複雜性，適合希望進行更簡單整合的開發人員。

提示

這是一個示範網站，使用了認證按鈕。

使用認證按鈕​

要使用認證按鈕，請在 HTML 檔案中使用 <script> 標籤包含 SDK 腳本，或使用 npm/pnpm/yarn 安裝。

在 HTML 檔案中包含 @kryptogo/auth-react 腳本：

<script src="path-to-our-sdk.0.1.0.min.js"></script>

或者，使用 npm/pnpm/yarn 安裝：

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

然後，您可以在您的應用程序中使用授權按鈕。這裡有一個示例代碼片段。

import { ConnectButton } from '@kryptogo/auth-react';
export default function MyPage() {
  return (
    <div>
      <ConnectButton
        content="Login"
        clientId="CLIENT_ID"
      />
    </div>
  );
}
  • 將 CLIENT_ID 替換為由 KryptoGO 提供的實際用戶端 ID。
  • ConnectButton 的屬性如下所示：
屬性類型說明
clientIdstringKryptoGO 提供的用戶端 ID。
methodsLoginMethod[]指定可用的登入方法。
stylesColorPalette用戶介面的顏色調色板。
beforeLogin() => boolean在啟動登入流程之前要執行的操作。如果函式返回假值，則不會開始登入流程。
onLogin() => void登入流程成功後要執行的操作。
onLogout() => void登出流程成功後要執行的操作。
onError(error: any) => void登入流程失敗時的錯誤處理程序。