跳至主要内容

🍳 認證按鈕

認證按鈕(@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登入流程失敗時的錯誤處理程序。