繁體中文(香港)
  • angular
  • frontend
  • tutorial
  • auth
  • authentication
  • oauth
  • oidc
  • identity

構建 Angular 認證與 Logto

了解如何透過整合 Angular OIDC 客戶端庫來構建用戶認證流。

Gao
Gao
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
Product screenshot

開始使用

簡介

  • Logto 是一個開源的 Auth0 替代方案,用於構建身份基礎設施。它支持各種登錄方式,包括用戶名、電郵、電話號碼和流行的社交登錄,例如 Google 和 GitHub。
  • Angular 是一個由 Google 創建和維護的網絡開發框架。

在本教程中,我們將向你展示如何通過集成 Logto SDK 來使用 Angular 構建用戶身份驗證流程。教程使用 TypeScript 作為編程語言。

先決條件

在開始之前,請確保你具備以下條件:

  • 一個 Logto 帳戶。如果你還沒有,可以 免費註冊
  • An Angular 開發環境和一個項目。

創建一個 Logto 應用程序

要開始,請創建一個類型為 "單頁應用程序" 的 Logto 應用程序。按照以下步驟創建 Logto 應用程序:

  1. 登錄到 Logto 控制台
  2. 在左側導航欄中,點擊 應用程序
  3. 點擊 創建應用程序
  4. 在打開的頁面中,找到 "單頁應用程序" 部分並定位到 "Angular" 卡片。
  5. 點擊 開始構建,輸入你的應用程序名稱。
  6. 點擊 創建

然後你應該會看到一個互動指南,指導你如何將 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 登錄/登出:

  1. 在瀏覽器中打開應用程序,你應該會看到 "登錄" 按鈕。
  2. 點擊 "登錄" 按鈕,你應該會被重定向到 Logto 登錄頁面。
  3. 登錄後,你應該會被重定向回應用程序,並且你應該會看到用戶數據和 "登出" 按鈕。
  4. 點擊 "登出" 按鈕,你應該會被重定向到 Logto 登出頁面,然後被重定向回應用程序,處於未登錄狀態。

如果在集成過程中遇到任何問題,請隨時 加入我們的 Discord 服務器 與社區和 Logto 團隊聊天!

進一步閱讀