blazor

使用 Blazor Web Assembly 托管、Web API、gRPC 和 Duende Identity Server 构建照片共享应用程序

我们将建立一个简单的网站，人们可以在其中发布图片和评论。

• 每个人都可以浏览现有的图片和评论。
• 只有经过身份验证的用户才能上传新图片和评论。
• 只有图片所有者才能编辑或删除图片。
• 只有评论所有者可以删除或更新评论。

我们将构建 3 个部分。

• FrontEnd ，一个Blazor 客户端Web 应用程序，与其自己的ASP.NET Core Web 主机配对。
• 使用 .NET 7.0 构建的后端将包括
  • 用于管理图片的REST服务
  • 用于评论的gRPC服务
• 身份提供商将是我们自己的Duende项目。

1.1 - 前端客户端

• Blazor客户端
• HTML 5
• CSS 3
• 打开 ID Connect 客户端

该项目将通过动态构建 HTML 用户界面，通过浏览器与用户交互，并使用gRPC Web和HttpClient与自己的服务器对话。

1.2 - 前端后端 (BFF)

• ASP.Net Core 虚拟主机
• 雅普
• 杜安德·巴夫·亚普

该项目托管并提供 Blazor 客户端应用程序。它还充当反向代理，将调用转发到 REST 和 gRpc 后端。

2.1 - 照片 REST 服务

• .NET 7 Web API 控制器
• 实体框架核心 7.0
• SqLite数据库
• Duende 客户端身份验证

2.2 - 评论 gRPC 服务

• .NET 7 gRPC 服务
• 实体框架核心 7.0
• SqLite数据库
• Duende 客户端身份验证

这些项目将负责将数据存储在服务器上，并通过http、json和protobuf响应客户端请求。

3. 认证服务器
   • 身份服务器 4（Duende）
   • 实体框架核心

该项目将负责身份验证部分。它将发行 JWT 令牌，客户端应用程序将使用该令牌来访问服务。

您已经需要了解的内容：

• C#
• HTML 5
• CSS 3

你将学到什么：

• 休息
• 远程过程调用
• 布拉佐尔
• ASP.NET Core 7.0 Web API 控制器
• ASP.NET Core 7.0 gRPC 服务
• 实体框架核心 7.0
• 招摇 / OpenAPI
• 跨域资源共享
• 雅普
• 认证与授权
• OAuth 2 和 Open Id Connect
• 身份服务器 4（Duende）
• 简单授权
• 资源所有者授权
• 干净的架构
• 使用 bUnit 进行单元测试
• JavaScript 互操作性

开始之前

在撰写本教程时，.NET Core 7.0 只能与 Visual Studio 2022 一起使用。建议您安装最新版本的 Visual Studio 2022 以便使用 .NET Core 7.0。

• 安装最新版本的 Visual Studio 2022 以及ASP.NET 和 Web 开发工作负载
• 通过下载 .NET Core 7.0 SDK 安装 .NET Core 7.0

您可能需要访问入门文档以获取更新的说明集。

---

我们的工作流程

我们将遵循一些简单的步骤。每个步骤都将专注于一项任务，并将建立在上一步的基础上。我们将从简单的项目开始，逐渐变得越来越复杂。例如，我们一开始不会关注身份验证和授权。我们将在稍后的步骤中添加它。

如何遵循本教程

如果您从 Lab01 开始并遵循每个 readme.md，则可以完成每个实验并使用您自己的代码继续进行下一个实验。无需打开此存储库中提供的Start文件夹和Solution文件夹。

• Start文件夹是每个步骤的起点。
• Solution文件夹是每个步骤的最终版本，提供给您，以防您想在每个实验结束时检查您的项目应该变成什么。

您所要做的就是打开与您想要尝试的实验相对应的Start文件夹（ Lab01/Start以便从头开始），然后按照您在readme.md文件中找到的说明进行操作。完成后，请随意将您的工作与Solution文件夹中提供的解决方案进行比较。

开始

1. 打开Labs夹
2. 导航到Lab01子文件夹
3. 导航到Start子文件夹
4. 按照readme.md文件中包含的说明继续

如果您想查看最终应用程序

创建照片 REST 服务数据库

• 在 Visual Studio 中打开Lab15SolutionblazorPhotoSharingApplicationPhotoSharingApplication.sln
• 构建解决方案
• 确保您有多个启动项目：
  • 身份服务器
  • 休息
  • 远程过程调用
  • 前端.服务器

启动应用程序

登录

• 用户名： 爱丽丝
• 密码：pass123$

或者

• 用户名： 鲍勃
• 密码：pass123$

在我们开始之前最后一点

我假设您是一位对构建 Web 应用程序感兴趣的 C# 程序员。根据您的年龄，您可能已经使用过 asp、aspx、mvc 和/或 razor 页面，现在您想尝试 blazor。您可能已经熟悉 HTML 和 CSS，甚至可能使用过一些 javascript 框架，例如 Angular、React 或 Vue。

我将链接大量有关 Web 概念和技术的文档，因此，如果您不是 Web 开发专家，请不要担心，您可以一路学习所有内容。不过，您至少应该精通 C#，否则本教程将很难理解。事实上，我们要编写的大部分代码都是 C# 的。我们还将编写一些 HTML，但这很容易学习，因此不会成为问题。

实验室

• 实验室 01 - Blazor 前端
  • 探索 Blazor Web Assembly 项目的结构并创建我们的第一个页面
• 实验室 02 - 前端：其他视图
  • 干净的架构
  • 依赖注入
  • 通过 NuGet 包使用其他 Blazor 库
  • 路线
  • 数据绑定
  • 事件处理
• 实验室 03 - 前端：使用 MatBlazor 设置 UI 样式
  • 材料设计
  • 马特·布拉佐
  • 布局页面
• 实验室 04 - 前端 - Razor 类库和组件
  • 创建 Razor 类库
  • 在项目中使用 Razor 类库
  • 剃须刀组件
  • 父组件和子组件
  • 特性
  • 事件回调
• 实验 05 - 后端：使用 ASP.NET Core 7.0 和 Visual Studio 2022 的 Web API
  • 休息协议
  • Asp.NET Core Web API
  • 控制器
  • 行动
  • 路线
  • 装订
  • 实体框架核心
  • JSON
  • 招摇 / OpenAPI
• 实验 06 - 前端：与后端连接
  • Http客户端
  • Http客户端配置
  • GetFromJson异步
  • PostAsJson异步
  • PutAsJsonAsync
  • 删除异步
  • 从Json异步读取
  • 跨域资源共享
  • 雅普
• 实验室 07 - 前端：评论
  • 更清洁的架构
  • 更多组件
• 实验 08 - 后端：使用 ASP.NET Core 7.0 和 Visual Studio 2022 的 gRPC
  • 更清洁的架构
  • 远程过程调用
  • 原始缓冲区
  • Asp.Net Core 中的 gRPC
• 实验 09 - 前端：与后端连接
  • gRPC 网络
  • .NET Core 中的 gRPC 客户端 Web
  • 配置
  • 跨域资源共享
  • 雅普
• 实验 10 - 安全性：身份验证和授权
  • Duende 身份服务器
  • 为 JWT 承载身份验证配置 REST 服务
  • 配置 gRPC 服务以进行 JWT 承载身份验证
  • 配置 Blazor 客户端以进行 JWT 承载身份验证
  • 使用 Authorize 属性进行简单授权
  • 使用Duende.Bff.Yarp框架检索和传递 JWT 承载令牌
• 实验 11 - 安全性：基于资源的授权
  • 授权服务
  • 政策
  • 要求
  • 处理程序
• 实验 12 - 性能优化
  • 实体框架表拆分
  • 从 REST Web Api 服务下载文件
  • 浏览器缓存
• 实验室 13 - 验证
  • 数据注释
  • 核心服务中的流畅验证
  • ASP.NET Core REST 服务中的流畅验证
  • 使用 Blazored.FluentValidation 在 Blazor 中进行流畅验证
• 实验室 14 - 使用 bUnit 对 Blazor 组件进行单元测试
  • 单元测试
  • 嘲笑
  • x单位
  • 起订量
  • b单位
• 实验室 15 - Blazor / Javascript 互操作性
  • IJS运行时
  • 在 ASP.NET Core Blazor 中调用 JavaScript 函数
  • 从 ASP.NET Core Blazor 中的 JavaScript 函数调用 .NET 方法
  • Blazor JavaScript 隔离和对象引用
  • 传单
  • exif.js