繁體中文（台灣）
使用 Logto 建立 Angular 認證
學習如何透過整合 Angular OIDC 客戶端程式庫，在 Angular 中建立用戶認證流程。
Gao
Founder
Founder
學習如何透過整合 Angular OIDC 客戶端程式庫，在 Angular 中建立用戶認證流程。
在本教程中，我們將向你展示如何通過整合 Logto SDK 來使用 Angular 構建使用者身份驗證流程。教程使用 TypeScript 作為程式語言。
在開始之前，請確保你具備以下條件：
要開始，請創建一個類型為 "單頁應用程序" 的 Logto 應用程式。按照以下步驟創建 Logto 應用程式：
然後你應該會看到一個互動指南，指導你如何將 Logto SDK 整合到你的 Angular 應用程式中。以下內容可以作為未來的參考。
安裝 Logto JS 核心 SDK 和 Angular OIDC 客戶端程式庫：
在你的 Angular 專案中，將認證提供者添加到你的 app.config.ts：
切換到 Logto 控制台的應用程式詳細資料頁面。添加一個重定向 URI http://localhost:3000/callback。
重定向 URI 是 OAuth 2.0 的概念，表示身份驗證後應重定向的位置。
同樣，將 http://localhost:3000/ 添加到 "登出後重定向 URI" 部分。
登出後重定向 URI 是 OAuth 2.0 的概念，表示登出後應重定向的位置。
然後點擊 "保存" 來保存更改。
在你希望實現登錄和登出的元件中（例如 app.component.ts），注入 OidcSecurityService 並使用它進行登錄和登出。
然後，在模板中添加登錄和登出按鈕：
OidcSecurityService 提供了一種方便的方法來訂閱認證狀態：
並在模板中使用：
現在你可以運行應用程式並嘗試使用 Logto 登入/登出：
如果在整合過程中遇到任何問題，請隨時 加入我們的 Discord 伺服器 與社群和 Logto 團隊聊天！