構建 Angular 認證與 Logto
了解如何透過整合 Angular OIDC 客戶端庫來構建用戶認證流。
Founder
開始使用
簡介
- Logto 是一個開源的 Auth0 替代方案，用於構建身份基礎設施。它支持各種登錄方式，包括用戶名、電郵、電話號碼和流行的社交登錄，例如 Google 和 GitHub。
- Angular 是一個由 Google 創建和維護的網絡開發框架。
在本教程中，我們將向你展示如何通過集成 Logto SDK 來使用 Angular 構建用戶身份驗證流程。教程使用 TypeScript 作為編程語言。
先決條件
在開始之前，請確保你具備以下條件：
- 一個 Logto 帳戶。如果你還沒有，可以 免費註冊。
- An Angular 開發環境和一個項目。
創建一個 Logto 應用程序
要開始，請創建一個類型為 "單頁應用程序" 的 Logto 應用程序。按照以下步驟創建 Logto 應用程序：
- 登錄到 Logto 控制台。
- 在左側導航欄中，點擊 應用程序。
- 點擊 創建應用程序。
- 在打開的頁面中，找到 "單頁應用程序" 部分並定位到 "Angular" 卡片。
- 點擊 開始構建，輸入你的應用程序名稱。
- 點擊 創建。
然後你應該會看到一個互動指南，指導你如何將 Logto SDK 集成到你的 Angular 應用程序中。以下內容可以作為未來的參考。
將 Logto 集成到你的項目中
安裝
安裝 Logto JS 核心 SDK 和 Angular OIDC 客戶端庫：
配置應用程序
在你的 Angular 項目中，將認證提供者添加到 app.config.ts：
實現登入和登出
配置重定向 URI
切換到 Logto 控制台的應用程序詳細信息頁面。添加一個重定向 URI http://localhost:3000/callback。
重定向 URI 是 OAuth 2.0 的概念，表示身份驗證後應重定向的位置。
同樣，將 http://localhost:3000/ 添加到 "登出後重定向 URI" 部分。
登出後重定向 URI 是 OAuth 2.0 的概念，表示登出後應重定向的位置。
然後點擊 "保存" 來保存更改。
在你想實現登入和登出的組件中（例如 app.component.ts），注入 OidcSecurityService 並使用它進行登入和登出。
然後，在模板中添加按鈕以登入和登出：
訂閱認證狀態並顯示用戶信息
OidcSecurityService 提供了一種方便 的方式來訂閱認證狀態：
在模板中使用它：
檢查點：運行應用程序
現在你可以運行應用程序並嘗試使用 Logto 登錄/登出：
- 在瀏覽器中打開應用程序，你應該會看到 "登錄" 按鈕。
- 點擊 "登錄" 按鈕，你應該會被重定向到 Logto 登錄頁面。
- 登錄後，你應該會被重定向回應用程序，並且你應該會看到用戶數據和 "登出" 按鈕。
- 點擊 "登出" 按鈕，你應該會被重定向到 Logto 登出頁面，然後被重定向回應用程序，處於未登錄狀態。
如果在集成過程中遇到任何問題，請隨時 加入我們的 Discord 服務器 與社區和 Logto 團隊聊天！