繁體中文（香港）
使用 Logto 建立 Nuxt 認證
學習如何透過整合 Logto SDK 在 Nuxt 中建立用戶認證流程。
Gao
Founder
Founder
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 SDK 在 Nuxt 中建立用戶認證流程。
在本教程中，我們將向你展示如何通過集成 Logto SDK 來使用 Nuxt 構建用戶身份驗證流程。教程使用 TypeScript 作為編程語言。
在開始之前，請確保你具備以下條件：
要開始，請創建一個類型為 "傳統網頁" 的 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() 可組合函數，該函數在服務器和客戶端端均可用：
現在你可以運行應用程序並嘗試使用 Logto 登錄/登出：
如果在集成過程中遇到任何問題，請隨時 加入我們的 Discord 服務器 與社區和 Logto 團隊聊天！