在幾分鐘內製作一個用於 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，提取認證碼，然後調用令牌端點用代碼交換憑證。
3. isAuthenticated()：檢查用戶是否已驗證。

製作 React SDK#

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

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

為了使用 SDK，你可以簡單地將應用包裹在 LogtoProvider 組件中，並使用 hooks 來檢查認證狀態、登錄和處理回調。

步驟 1：安裝套件#

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

步驟 2：定義 React 的上下文#

定義提供者的上下文，包含 3 個部分：

1. 底層 LogtoClient 實例，它將在提供者中初始化，並在 hooks 中使用。
2. 認證狀態。
3. 設置認證狀態的方法。

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

步驟 3：實現提供者#

有了上下文，讓我們來實現提供者。提供者將初始化 LogtoClient 實例，檢查用戶是否已驗證，並將上下文提供給其子項。

創建一個新文件 provider.tsx：

步驟 4：實現 hooks#

現在，讓我們實現 hooks。

• useLogto：在這個 hook 中，我們使用上下文獲取 LogtoClient 實例，並提供 signIn 方法和 isAuthenticated 狀態。你可以繼續添加更多方法。
• 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