简体中文
使用 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 概念，表示在身份验证后应该重定向的位置。
同样，在 "退出后重定向 URI" 部分添加 http://localhost:3000/。
退出后重定向 URI 是一个 OAuth 2.0 概念，表示在退出后应该重定向的位置。
然后点击 "保存" 以保存更改。
在你希望实现登录和登出的组件中（例如 app.component.ts），注入 OidcSecurityService 并使用其进行登录和登出。
然后在模板中，添加登录和登出按钮：
OidcSecurityService 提供了一种方便的方法来订阅身份验证状态：
并在模板中使用它：
现在你可以运行应用并尝试使用 Logto 登录/退出：
如果你在集成过程中遇到任何问题，请不要犹豫，加入我们的 Discord 服务器 与社区和 Logto 团队聊天！