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 以及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