OpenIddict UI 项目教程

OpenIddict UI 项目教程

1. 项目介绍

OpenIddict UI 是一个为 OpenIddict-Core 堆栈提供无头 UI 功能的工具。该项目的主要目的是为开发者提供必要的 API 和服务，以便他们能够构建自己的用户界面。OpenIddict UI 不提供现成的 UI，而是提供了一系列 API 来管理 OpenIddict 的 Scopes 和 Applications，以及 ASP.NET Core Identity 类型的管理（如账户、角色等）。

2. 项目快速启动

2.1 环境准备

在开始之前，请确保您的开发环境已经安装了以下工具：

• .NET Core SDK
• Node.js
• Visual Studio Code（或其他代码编辑器）

2.2 下载项目

首先，克隆项目到本地：

git clone https://github.com/thomasduft/openiddict-ui.git
cd openiddict-ui

2.3 构建和运行服务器端

打开 Visual Studio Code 并导航到项目根目录。在集成终端中运行以下命令来构建项目：

dotnet build

构建成功后，切换到调试标签（Ctrl+Shift+D）并运行 Server 项目。

2.4 开发客户端（Angular 前端）

确保您已经安装了 Node.js。如果使用的是 devcontainer，则无需额外配置。

首先，确保服务器端已经运行。然后，导航到 Client 目录并运行以下命令：

npm install
npm run start

这将启动 Angular 的开发服务器。打开浏览器并访问 http://localhost:4200，您将看到登录界面。

2.5 登录

使用预配置的管理员账户登录：

• 邮箱: admin@openiddict.com
• 密码: Pass123$

3. 应用案例和最佳实践

3.1 自定义身份验证

OpenIddict UI 允许您自定义身份验证流程。例如，您可以在 Startup.ConfigureServices 方法中添加自定义扩展钩子：

services.AddOpenIddict()
    .AddCore(options => { /* 配置核心组件 */ })
    .AddServer(options => { /* 配置服务器组件 */ })
    .AddValidation(options => { /* 配置验证组件 */ })
    .AddUIStore(options => { /* 配置 UI 存储 */ })
    .AddUIApis(options => { /* 配置 UI API */ })
    .AddUIIdentityStore<ApplicationUser>(options => { /* 配置 Identity 存储 */ })
    .AddUIIdentityApis<ApplicationUser>();

3.2 使用自定义主键类型

如果您的 ApplicationUser 类继承自 IdentityUser<Guid>，您需要为 AddUIIdentityStore 和 AddUIIdentityApis 提供主键类型：

services.AddUIIdentityStore<ApplicationUser, int>(options => { /* 配置 Identity 存储 */ })
    .AddUIIdentityApis<ApplicationUser, int>();

4. 典型生态项目

4.1 OpenIddict Core

OpenIddict Core 是 OpenIddict UI 的基础，提供了 OAuth 2.0 和 OpenID Connect 的核心功能。

4.2 ASP.NET Core Identity

ASP.NET Core Identity 是用于管理用户账户、角色和权限的框架，OpenIddict UI 与之集成，提供了用户管理 API。

4.3 Angular

Angular 是一个流行的前端框架，OpenIddict UI 的示例项目使用了 Angular 来展示如何与后端 API 进行交互。

通过以上步骤，您可以快速启动并开始使用 OpenIddict UI 项目。希望本教程对您有所帮助！