在幾分鐘內為 Logto 製作一個網絡 SDK

Logto 是一個開源認證平台，提供多個官方 SDK ，旨在簡化不同框架和平台的整合。然而，仍然有許多平台沒有官方 SDK 。

為了彌補這個差距，Logto 提供了一個基礎包 @logto/browser，它設計來幫助開發者製作針對特定需求的自定義 SDK。這個包實現了 Logto 的核心功能，只要支持 JavaScript 且運行在瀏覽器環境，就可以使用。

在本指南中，我們將帶你一步步創建一個使用 @logto/browser 的 React SDK，這個 SDK 將實現登入流程。你可以按照相同的步驟為其他在瀏覽器中運行的 JavaScript 平台創建 SDK。

登入流程#

在開始之前，讓我們了解一下 Logto 的登入流程。登入流程包括以下步驟：

1. 重定向到 Logto：使用者被重定向到 Logto 的登入頁面。
2. 驗證：使用者輸入他們的憑證並在 Logto 上進行驗證。
3. 重定向回你的應用：成功驗證後，使用者會被重定向回你的應用，並帶有一個驗證碼。
4. 交換驗證碼：你的應用使用驗證碼交換令牌。

@logto/browser 的簡要介紹#

@logto/browser 包提供了一個 LogtoClient 類，其中包含 Logto 的核心功能，包括登入流程的方法：

1. signIn()：生成 OIDC 驗證 URL，並重定向到它。
2. handleSignInCallback()：檢查並解析回調 URL，提取驗證碼，然後通過呼叫 token endpoint 交換令牌。
3. isAuthenticated()：檢查用戶是否已驗證。

製作 React SDK#

在 SDK 中，我們將提供兩個 hooks：useLogto 和 useHandleSignInCallback，以及一個 LogtoProvider 組件：

1. useLogto：一個提供 signIn 方法來觸發登入流程的 hook，並檢查用戶是否已驗證的 isAuthenticated 狀態。
2. useHandleSignInCallback：一個處理回調 URL 並通過認證碼交換令牌完成登入流程的 hook。

要使用 SDK ，你只需用 LogtoProvider 組件包裹你的應用，並使用 hooks 來檢查認證狀態、登入和處理回調。

步驟 1：安裝包#

首先，使用 npm 或其他包管理器安裝 @logto/browser 包：

步驟 2：定義 React 的 context#

定義 provider 的 context，包含三個部分：

1. 在 provider 中初始化並在 hooks 中使用的 LogtoClient 實例。
2. 認證狀態。
3. 設定認證狀態的方法。

創建一個新文件 context.tsx 並編寫以下代碼：

步驟 3：實現 provider#

context 準備好之後，讓我們實現 provider。provider 將初始化 LogtoClient 實例，檢查用戶是否已驗證，並為其子組件提供 context。

創建一個新文件 provider.tsx：

步驟 4：實現 hooks#

現在，讓我們實現 hooks。

• useLogto：在這個 hook 中，我們使用 context 獲取 LogtoClient 實例，並提供 signIn 方法和 isAuthenticated 狀態。你可以繼續為這個 hook 添加更多方法。
• useHandleSignInCallback：這個 hook 將從瀏覽器中讀取回調 URL，提取驗證碼，並交換令牌。當用戶驗證成功後，它還會將認證狀態設置為 true。

創建一個新文件 hooks.ts 並編寫以下代碼：

檢查點：使用 SDK#

現在，你已經為 Logto 製作了 React SDK。你可以通過用 LogtoProvider 組件包裹應用，並使用 hooks 來檢查認證狀態、登入和處理回調。在這裡查看官方的 React 範例項目 這裡。

結論#

在本指南中，我們已講解如何創建一個實現基本認證流程的 Logto React SDK。這裡提供的 SDK 是一個基本範例。你可以通過添加更多方法和功能來擴展它，以滿足你的應用需求。

你可以按照相同的步驟為其他在瀏覽器中運行的 JavaScript 平台創建 SDK。

資源：

1. Logto 瀏覽器 SDK
2. Logto React SDK