繁體中文（香港）
在幾分鐘內為 Logto 製作一個網絡 SDK
學習如何使用 `@logto/browser` 為 Logto 創建自定義 SDK。
Sijie
Developer
Developer
Stop wasting weeks on user auth
Launch secure apps faster with Logto. Integrate user auth in minutes, and focus on your core product.
Get started
學習如何使用 `@logto/browser` 為 Logto 創建自定義 SDK。
Logto 是一個開源認證平台，提供多個官方 SDK ，旨在簡化不同框架和平台的整合。然而，仍然有許多平台沒有官方 SDK 。
為了彌補這個差距，Logto 提供了一個基礎包 @logto/browser，它設計來幫助開發者製作針對特定需求的自定義 SDK。這個包實現了 Logto 的核心功能，只要支持 JavaScript 且運行在瀏覽器環境，就可以使用。
在本指南中，我們將帶你一步步創建一個使用 @logto/browser 的 React SDK，這個 SDK 將實現登入流程。你可以按照相同的步驟為其他在瀏覽器中運行的 JavaScript 平台創建 SDK。
在開始之前，讓我們了解一下 Logto 的登入流程。登入流程包括以下步驟：
@logto/browser 的簡要介紹@logto/browser 包提供了一個 LogtoClient 類，其中包含 Logto 的核心功能，包括登入流程的方法：
signIn()：生成 OIDC 驗證 URL，並重定向到它。handleSignInCallback()：檢查並解析回調 URL，提取驗證碼，然後通過呼叫 token endpoint 交換令牌。isAuthenticated()：檢查用戶是否已驗證。在 SDK 中，我們將提供兩個 hooks：useLogto 和 useHandleSignInCallback，以及一個 LogtoProvider 組件：
useLogto：一個提供 signIn 方法來觸發登入流程的 hook，並檢查用戶是否已驗證的 isAuthenticated 狀態。useHandleSignInCallback：一個處理回調 URL 並通過認證碼交換令牌完成登入流程的 hook。要使用 SDK ，你只需用 LogtoProvider 組件包裹你的應用，並使用 hooks 來檢查認證狀態、登入和處理回調。
首先，使用 npm 或其他包管理器安裝 @logto/browser 包：
定義 provider 的 context，包含三個部分：
LogtoClient 實例。創建一個新文件 context.tsx 並編寫以下代碼：
context 準備好之後，讓我們實現 provider。provider 將初始化 LogtoClient 實例，檢查用戶是否已驗證，並為其子組件提供 context。
創建一個新文件 provider.tsx：
現在，讓我們實現 hooks。
useLogto：在這個 hook 中，我們使用 context 獲取 LogtoClient 實例，並提供 signIn 方法和 isAuthenticated 狀態。你可以繼續為這個 hook 添加更多方法。useHandleSignInCallback：這個 hook 將從瀏覽器中讀取回調 URL，提取驗證碼，並交換令牌。當用戶驗證成功後，它還會將認證狀態設置為 true。創建一個新文件 hooks.ts 並編寫以下代碼：
現在，你已經為 Logto 製作了 React SDK。你可以通過用 LogtoProvider 組件包裹應用，並使用 hooks 來檢查認證狀態、登入和處理回調。在這裡查看官方的 React 範例項目 這裡。
在本指南中，我們已講解如何創建一個實現基本認證流程的 Logto React SDK。這裡提供的 SDK 是一個基本範例。你可以通過添加更多方法和功能來擴展它，以滿足你的應用需求。
你可以按照相同的步驟為其他在瀏覽器中運行的 JavaScript 平台創建 SDK。
資源：