Startseite>ASP-Quellcode>Andere Kategorien
Herunterladen

Erstellen einer PhotoSharing-Anwendung mit Blazor Web Assembly Hosted, Web API, gRPC und Duende Identity Server

Wir werden eine einfache Website erstellen, auf der Leute Bilder und Kommentare posten können.

  • Jeder kann vorhandene Bilder und Kommentare durchsuchen.
  • Nur authentifizierte Benutzer können neue Bilder und Kommentare hochladen.
  • Nur ein Bildbesitzer kann ein Bild bearbeiten oder löschen.
  • Nur ein Kommentarbesitzer kann einen Kommentar löschen oder aktualisieren.

Wir werden 3 Teile bauen.

  • Das FrontEnd , eine Blazor-Client -Webanwendung gepaart mit einem eigenen ASP.NET Core-Webhost .
  • Das mit .NET 7.0 erstellte Backend besteht aus:
    • Ein REST- Dienst zur Verwaltung der Bilder
    • Ein gRPC- Dienst für die Kommentare
  • Der Identity Provider wird unser eigenes Duende -Projekt sein.

1.1 – FrontEnd-Client

  • Blazor-Client
  • HTML 5
  • CSS 3
  • Öffnen Sie den Id Connect-Client

Dieses Projekt interagiert mit dem Benutzer über einen Browser, indem es dynamisch eine HTML-Benutzeroberfläche erstellt, und kommuniziert mit seinem eigenen Server mithilfe von gRPC Web und HttpClient .

1.2 – Backend für Frontend (BFF)

  • ASP.Net Core-Webhost
  • YARP
  • Duende.Bff.Yarp

Dieses Projekt hostet und bedient die Blazor-Client-Anwendung. Es fungiert auch als Reverse-Proxy, um die Aufrufe an die REST- und gRpc-Backends weiterzuleiten.

2.1 – Fotos REST-Dienst

  • .NET 7-Web-API-Controller
  • Entity Framework Core 7.0
  • SqLite-Datenbank
  • Duende-Client-Authentifizierung

2.2 – Kommentare zum gRPC-Dienst

  • .NET 7 gRPC-Dienst
  • Entity Framework Core 7.0
  • SqLite-Datenbank
  • Duende-Client-Authentifizierung

Diese Projekte sind dafür verantwortlich, die Daten auf dem Server zu speichern und auf die Client-Anfragen über http, json und protobuf zu antworten.

  1. Authentifizierungsserver
    • Identity Server 4 (Duende)
    • Entity Framework Core

Dieses Projekt kümmert sich um den Authentifizierungsteil. Es werden JWT-Tokens ausgegeben, die von der Clientanwendung verwendet werden, um Zugriff auf die Dienste zu erhalten.

Was Sie bereits wissen müssen:

  • C#
  • HTML 5
  • CSS 3

Was Sie lernen werden:

  • AUSRUHEN
  • gRPC
  • Blazor
  • ASP.NET Core 7.0-Web-API-Controller
  • ASP.NET Core 7.0 gRPC-Dienst
  • Entity Framework Core 7.0
  • Swagger / OpenAPI
  • CORS
  • YARP
  • Authentifizierung und Autorisierung
  • OAuth 2 und Open Id Connect
  • Identity Server 4 (Duende)
  • Einfache Autorisierung
  • Autorisierung des Ressourceneigentümers
  • SAUBERE Architektur
  • Unit-Tests mit bUnit
  • Javascript-Interoperabilität

Bevor Sie beginnen

Zum Zeitpunkt der Erstellung dieses Tutorials kann .NET Core 7.0 nur mit Visual Studio 2022 verwendet werden. Es wird empfohlen, die neueste Version von Visual Studio 2022 zu installieren, um mit .NET Core 7.0 arbeiten zu können.

  • Installieren Sie die neueste Version von Visual Studio 2022 mit der ASP.NET- und Webentwicklungs- Workload
  • Installieren Sie .NET Core 7.0, indem Sie das .NET Core 7.0 SDK herunterladen

Möglicherweise möchten Sie in der Dokumentation „Erste Schritte“ nach aktualisierten Anweisungen suchen.

Unser Workflow

Wir werden einige einfache Schritte befolgen. Jeder Schritt konzentriert sich auf eine Aufgabe und baut auf dem vorherigen Schritt auf. Wir beginnen mit einfachen Projekten, die im Laufe der Zeit immer komplexer werden. Beispielsweise werden wir uns zunächst nicht auf Authentifizierung und Autorisierung konzentrieren. Wir werden es zu einem späteren Zeitpunkt hinzufügen.

So befolgen Sie dieses Tutorial

Wenn Sie mit Lab01 beginnen und jeder readme.md folgen, können Sie jedes Lab abschließen und mit Ihrem eigenen Code mit dem nächsten fortfahren. Es ist nicht erforderlich, weder den Start noch den Solution zu öffnen, der in diesem Repo bereitgestellt wird.

  • Start sind die Ausgangspunkte jedes Schritts.
  • Solution sind die endgültigen Versionen jedes Schritts, die Ihnen ausgehändigt werden, falls Sie am Ende jedes Labors überprüfen möchten, wie Ihr Projekt aussehen soll.

Sie müssen lediglich einen Start öffnen, der dem Labor entspricht, das Sie ausprobieren möchten ( Lab01/Start um von vorne zu beginnen) und den Anweisungen in der Datei readme.md folgen. Wenn Sie fertig sind, können Sie Ihre Arbeit gerne mit der Lösung im Solution vergleichen.

Zum STARTEN

  1. Öffnen Sie den Labs -Ordner
  2. Navigieren Sie zum Unterordner Lab01
  3. Navigieren Sie zum Unterordner Start .
  4. Befolgen Sie die Anweisungen in der Datei readme.md um fortzufahren

Wenn Sie die endgültige Bewerbung sehen möchten

Erstellen Sie die Photos REST Service-Datenbank

  • Öffnen Sie Lab15SolutionblazorPhotoSharingApplicationPhotoSharingApplication.sln in Visual Studio
  • Erstellen Sie die Lösung
  • Stellen Sie sicher, dass Sie über mehrere Startup-Projekte verfügen:
    • IdentityServer
    • Ausruhen
    • gRPC
    • Frontend.Server

Starten Sie die Anwendung

Zum Anmelden

  • Benutzername: Alice
  • Passwort: Pass123$

Oder

  • Benutzername: Bob
  • Passwort: Pass123$

Eine letzte Anmerkung, bevor wir beginnen

Ich gehe davon aus, dass Sie ein C#-Programmierer sind, der an der Erstellung einer Webanwendung interessiert ist. Je nachdem, wie alt Sie sind, haben Sie möglicherweise bereits ASP-, ASPX-, MVC- und/oder Razor-Seiten verwendet und möchten nun Blazor ausprobieren. Möglicherweise sind Sie bereits mit HTML und CSS vertraut und haben möglicherweise sogar mit einigen Javascript-Frameworks wie Angular, React oder Vue experimentiert.

Ich werde eine Menge Dokumentation über Webkonzepte und -technologien verlinken. Machen Sie sich also keine Sorgen, wenn Sie kein Webentwickler-Experte sind, Sie können alles ganz nebenbei lernen. Sie sollten jedoch zumindest fließend C# beherrschen, sonst wird es schwierig, diesem Tutorial zu folgen. Der Großteil des Codes, den wir schreiben werden, wird tatsächlich C# sein. Wir werden auch etwas HTML schreiben, aber das ist leicht zu erlernen und wird daher kein Problem darstellen.

Die Labore

  • Labor 01 – Das Blazor-Frontend
    • Erkundung der Struktur eines Blazor Web Assembly-Projekts und Erstellung unserer ersten Seite
  • Labor 02 – Frontend: Zusätzliche Ansichten
    • SAUBERE Architektur
    • Abhängigkeitsinjektion
    • Verwendung zusätzlicher Blazor-Bibliotheken über NuGet-Pakete
    • Routen
    • Datenbindung
    • Ereignisbehandlung
  • Labor 03 – Frontend: Gestaltung der Benutzeroberfläche mit MatBlazor
    • Materialdesign
    • MatBlazor
    • Layoutseiten
  • Labor 04 – Frontend – Razor-Klassenbibliotheken und -Komponenten
    • Erstellen einer Razor-Klassenbibliothek
    • Verwenden einer Razor-Klassenbibliothek innerhalb eines Projekts
    • Rasiererkomponenten
    • Übergeordnete und untergeordnete Komponenten
    • Eigenschaften
    • EventCallbacks
  • Labor 05 – Backend: Web-API mit ASP.NET Core 7.0 und Visual Studio 2022
    • REST-Protokoll
    • Asp.NET Core-Web-API
    • Controller
    • Aktionen
    • Routen
    • Bindung
    • Entity Framework Core
    • JSON
    • Swagger / OpenAPI
  • Labor 06 – Frontend: Verbindung mit dem Backend
    • HttpClient
    • HttpClient-Konfiguration
    • GetFromJsonAsync
    • PostAsJsonAsync
    • PutAsJsonAsync
    • DeleteAsync
    • ReadFromJsonAsync
    • CORS
    • YARP
  • Lab 07 - Frontend: Kommentare
    • Mehr SAUBERE Architektur
    • Weitere Komponenten
  • Lab 08 – Backend: gRPC mit ASP.NET Core 7.0 und Visual Studio 2022
    • Mehr SAUBERE Architektur
    • gRPC
    • protobuf
    • gRPC im Asp.Net Core
  • Labor 09 – Frontend: Verbindung mit dem Backend
    • gRPC-Web
    • gRPC-Client-Web in .NET Core
    • Konfiguration
    • CORS
    • YARP
  • Labor 10 – Sicherheit: Authentifizierung und Autorisierung
    • Duende-Identitätsserver
    • Konfigurieren des REST-Dienstes für die JWT-Bearer-Authentifizierung
    • Konfigurieren des gRPC-Dienstes für die JWT-Bearer-Authentifizierung
    • Konfigurieren des Blazor-Clients für die JWT-Bearer-Authentifizierung
    • Einfache Autorisierung mit dem Authorize-Attribut
    • Abrufen und Weitergeben von JWT-Bearer-Tokens mithilfe des Duende.Bff.Yarp -Frameworks
  • Labor 11 – Sicherheit: Ressourcenbasierte Autorisierung
    • AuthorizationService
    • Richtlinien
    • Anforderungen
    • Handler
  • Labor 12 – Leistungsoptimierung
    • Entity Framework-Tabellenaufteilung
    • Laden Sie eine Datei von einem REST-Web-API-Dienst herunter
    • Browser-Caching
  • Labor 13 – Validierung
    • Datenanmerkungen
    • Fließende Validierung im Kerndienst
    • Fließende Validierung im ASP.NET Core REST Service
    • Fließende Validierung in Blazor mit Blazored.FluentValidation
  • Labor 14 – Unit-Testen von Blazor-Komponenten mit bUnit
    • Unit-Tests
    • Verspottung
    • xUnit
    • Moq
    • bEinheit
  • Labor 15 – Blazor/Javascript-Interoperabilität
    • IJSRuntime
    • Rufen Sie eine JavaScript-Funktion in ASP.NET Core Blazor auf
    • Rufen Sie .NET-Methoden aus JavaScript-Funktionen in ASP.NET Core Blazor auf
    • Blazor-JavaScript-Isolation und Objektverweise
    • Broschüre
    • exif.js
Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle