繁體中文（台灣）
使用 Logto 建立 Nuxt 認證
學習如何通過整合 Logto SDK 在 Nuxt 中建立用戶認證流程。
Gao
Founder
Founder
學習如何通過整合 Logto SDK 在 Nuxt 中建立用戶認證流程。
在本教程中，我們將向你展示如何通過整合 Logto SDK 來使用 Nuxt 構建使用者身份驗證流程。教程使用 TypeScript 作為程式語言。
在開始之前，請確保你具備以下條件：
要開始，請創建一個類型為 "Traditional web" 的 Logto 應用程式。按照以下步驟創建 Logto 應用程式：
然後你應該會看到一個互動指南，指導你如何將 Logto SDK 整合到你的 Nuxt 應用程式中。以下內容可以作為未來的參考。
通過你最喜愛的套件管理工具安裝 Logto SDK：
在你的 Nuxt 配置文件 (nuxt.config.ts) 中，添加 Logto 模組：
模組的最小配置如下：
由於這些信息是敏感的，建議使用環境變量：
查看更多資訊，請參考 runtime config。
切換到 Logto 控制台的應用程式詳細資料頁面。添加一個重定向 URI http://localhost:3000/callback。
重定向 URI 是 OAuth 2.0 的概念，表示身份驗證後應重定向的位置。
同樣，將 http://localhost:3000/ 添加到 "登出後重定向 URI" 部分。
登出後重定向 URI 是 OAuth 2.0 的概念，表示登出後應重定向的位置。
然後點擊 "保存" 來保存更改。
當註冊 @logto/nuxt 模組時，將執行以下操作：
/sign-in)、登出 (/sign-out) 和回調 (/callback)。useLogtoClient 和 useLogtoUser。這些路由可以通過模組選項中的 logto.pathnames 進行配置，例如：
查看 @logto/nuxt 套件中的 type definition file 以獲取更多信息。
由於 Nuxt 頁面在初始加載後將被加載並成為單頁面應用程式 (SPA)，因此我們需要在需要時將用戶重定向到登入或登出路由。
要顯示用戶信息，你可以使用 useLogtoUser() composable，它可以在伺服器端和客戶端使用：
現在你可以運行應用程式並嘗試使用 Logto 登入/登出：
如果在整合過程中遇到任何問題，請隨時 加入我們的 Discord 伺服器 與社群和 Logto 團隊聊天！