使用 Logto 建立 Nuxt 認證
學習如何通過整合 Logto SDK 在 Nuxt 中建立用戶認證流程。
Founder
開始使用
簡介
- Logto 是一個開源的 Auth0 替代方案，用於構建身份基礎設施。它支持各種登入方式，包括使用者名稱、電子郵件、電話號碼和流行的社群登入，例如 Google 和 GitHub。
- Nuxt 一個開源框架，使網頁開發更直觀和強大。
在本教程中，我們將向你展示如何通過整合 Logto SDK 來使用 Nuxt 構建使用者身份驗證流程。教程使用 TypeScript 作為程式語言。
先決條件
在開始之前，請確保你具備以下條件：
- 一個 Logto 帳戶。如果你還沒有，可以 免費註冊。
- A Nuxt 開發環境和一個專案。
創建一個 Logto 應用程式
要開始，請創建一個類型為 "Traditional web" 的 Logto 應用程式。按照以下步驟創建 Logto 應用程式：
- 登入到 Logto 控制台。
- 在左側導航欄中，點擊 應用程式。
- 點擊 創建應用程式。
- 在打開的頁面中，找到 "Traditional web" 部分並定位到 "Nuxt" 卡片。
- 點擊 開始構建，輸入你的應用程式名稱。
- 點擊 創建。
然後你應該會看到一個互動指南，指導你如何將 Logto SDK 整合到你的 Nuxt 應用程式中。以下內容可以作為未來的參考。
整合 Logto SDK
安裝
通過你最喜愛的套件管理工具安裝 Logto SDK：
註冊 Logto 模組
在你的 Nuxt 配置文件 (nuxt.config.ts) 中，添加 Logto 模組：
模組的最小配置如下：
由於這些信息是敏感的，建議使用環境變量：
查看更多資訊，請參考 runtime config。
實作登入和登出
配置重定向 URI
切換到 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)。 - 匯入兩個 composables：
useLogtoClient和useLogtoUser。
這些路由可以通過模組選項中的 logto.pathnames 進行配置，例如：
查看 @logto/nuxt 套件中的 type definition file 以獲取更多信息。
由於 Nuxt 頁面在初始加載後將被加載並成為單頁面應用程式 (SPA)，因此我們需要在需要時將用戶重定向到登入或登出路由。
顯示用戶信息
要顯示用戶信息，你可以使用 useLogtoUser() composable，它可以在伺服器端和客戶端使用：
檢查點：運行應用程式
現在你可以運行應用程式並嘗試使 用 Logto 登入/登出：
- 在瀏覽器中打開應用程式，你應該會看到 "登入" 按鈕。
- 點擊 "登入" 按鈕，你應該會被重定向到 Logto 登入頁面。
- 登入後，你應該會被重定向回應用程式，並且你應該會看到使用者數據和 "登出" 按鈕。
- 點擊 "登出" 按鈕，你應該會被重定向到 Logto 登出頁面，然後被重定向回應用程式，處於未登入狀態。
如果在整合過程中遇到任何問題，請隨時 加入我們的 Discord 伺服器 與社群和 Logto 團隊聊天！