使用 Logto 构建 Angular 身份验证
通过集成 Angular OIDC 客户端库，学习如何使用 Angular 构建用户身份验证流程。
Founder
入门
介绍
- Logto 是一个开源的 Auth0 替代品，用于构建身份基础设施。它支持多种登录方式，包括用户名、电子邮件、电话号码以及 Google 和 GitHub 等流行的社交登录。
- Angular 是一个由 Google 创建和维护的 Web 开发框架。
在本教程中，我们将向你展示如何通过集成 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 概念，表示在身份验证后应该重定向的位置。
同样，在 "退出后重定向 URI" 部分添加 http://localhost:3000/。
退出后重定向 URI 是一个 OAuth 2.0 概念，表示在退出后应该重定向的位置。
然后点击 "保存" 以保存更改。
在你希望实现登录和登出的组件中（例如 app.component.ts），注入 OidcSecurityService 并使用其进行登录和登出。
然后在模板中，添加登录和登出按钮：
订阅身份验证状态并显示用户信息
OidcSecurityService 提供了一种方便的方法来订阅身份验证状态：
并在模板中使用它：
检查点：运行应用程序
现在你可以运行应用并尝试使用 Logto 登录/退出：
- 在浏览器中打开应用，你应该会看到 "登录" 按钮。
- 点击 "登录" 按钮，你应该会被重定向到 Logto 登录页面。
- 登录后，你应该会被重定向回应用，并且你应该会看到用户数据和 "退出" 按钮。
- 点击 "退出" 按钮，你应该会被重定向到 Logto 退出页面，然后重定向回应用，处于未登录状态。
如果你在集成过程中遇到任何问题，请不要犹豫，加入我们的 Discord 服务器 与社区和 Logto 团队聊天！