繁體中文（台灣）
使用 Logto 構建 SvelteKit 身份驗證
學習如何通過整合 Logto SDK，在 SvelteKit 中構建用戶身份驗證流程。
Gao
Founder
Founder
學習如何通過整合 Logto SDK，在 SvelteKit 中構建用戶身份驗證流程。
在本教程中，我們將向你展示如何通過整合 Logto SDK 來使用 SvelteKit 構建使用者身份驗證流程。教程使用 TypeScript 作為程式語言。
在開始之前，請確保你具備以下條件：
要開始，請創建一個類型為 "傳統 Web" 的 Logto 應用程式。按照以下步驟創建 Logto 應用程式：
然後你應該會看到一個互動指南，指導你如何將 Logto SDK 整合到你的 SvelteKit 應用程式中。以下內容可以作為未來的參考。
通過你喜愛的套件管理器安裝 Logto SDK：
在你的 hooks.server.ts 文件中，添加以下代碼將 Logto 鉤子注入到你的伺服器中：
由於這些信息是敏感的，建議使用環境變量：
如果你有多個鉤子，可以使用 the sequence() helper 函數 來將它們鏈接起來：
現在你可以在 locals 對象中訪問 Logto 客戶端。對於 TypeScript，你可以將類型添加到 app.d.ts：
我們稍後會討論 user 對象。
切換到 Logto 控制台的應用程式詳細資料頁面。添加一個重定向 URI http://localhost:3000/callback。
重定向 URI 是 OAuth 2.0 的概念，表示身份驗證後應重定向的位置。
同樣，將 http://localhost:3000/ 添加到 "登出後重定向 URI" 部分。
登出後重定向 URI 是 OAuth 2.0 的概念，表示登出後應重定向的位置。
然後點擊 "保存" 來保存更改。
回到你的應用程式，在你希望實現登錄和登出的頁面中，定義以下操作：
然後在你的 Svelte 組件中使用這些操作：
要顯示用戶的信息，你可以將 locals.user 對象注入到版面中，從而使其在所有頁面中可用：
在你的 Svelte 組件中：
現在你可以運行應用程式並嘗試使用 Logto 登入/登出：
如果在整合過程中遇到任何問題，請隨時 加入我們的 Discord 伺服器 與社群和 Logto 團隊聊天！