Page d'accueil>Code source ASP>Autres catégories
Télécharger

Création d'une application de partage de photos avec Blazor Web Assembly hébergé, API Web, gRPC et Duende Identity Server

Nous allons créer un site Web simple sur lequel les gens pourront publier des photos et des commentaires.

  • Tout le monde peut parcourir les photos et commentaires existants.
  • Seuls les utilisateurs authentifiés peuvent télécharger de nouvelles photos et commentaires.
  • Seul le propriétaire d'une image peut modifier ou supprimer une image.
  • Seul le propriétaire d'un commentaire peut supprimer ou mettre à jour un commentaire.

Nous allons construire 3 parties.

  • Le FrontEnd , une application Web client Blazor associée à son propre hôte Web ASP.NET Core .
  • Le Backend , construit avec .NET 7.0, sera composé de
    • Un service REST pour la gestion des images
    • Un service gRPC pour les commentaires
  • Le fournisseur d'identité sera notre propre projet Duende .

1.1 - Client FrontEnd

  • Client Blazor
  • HTML5
  • CSS3
  • Ouvrir le client ID Connect

Ce projet interagira avec l'utilisateur via un navigateur en construisant de manière dynamique une interface utilisateur HTML et communiquera avec son propre serveur en utilisant gRPC Web et HttpClient .

1.2 - Backend pour frontend (BFF)

  • Hôte Web ASP.Net Core
  • YARP
  • Duende.Bff.Yarp

Ce projet héberge et sert l'application Blazor Client. Il agit également comme un proxy inverse pour transférer les appels vers les backends REST et gRpc.

2.1 - Photos Service REST

  • Contrôleur d'API Web .NET 7
  • Entité Framework Core 7.0
  • Base de données SQLite
  • Authentification client Duende

2.2 - Commentaires du service gRPC

  • Service gRPC .NET 7
  • Entité Framework Core 7.0
  • Base de données SQLite
  • Authentification client Duende

Ces projets seront chargés de stocker les données sur le serveur et de répondre aux demandes des clients via http, json et protobuf.

  1. Serveur d'authentification
    • Serveur d'identité 4 (Duende)
    • Noyau du cadre d'entité

Ce projet s'occupera de la partie authentification. Il émettra des jetons JWT qui seront utilisés par l'application client pour accéder aux services.

Ce que vous devez déjà savoir :

  • C#
  • HTML5
  • CSS3

Ce que vous allez apprendre :

  • REPOS
  • gRPC
  • Blazer
  • Contrôleur d'API Web ASP.NET Core 7.0
  • Service gRPC ASP.NET Core 7.0
  • Entité Framework Core 7.0
  • Swagger/OpenAPI
  • CORS
  • YARP
  • Authentification et autorisation
  • OAuth 2 et Open ID Connect
  • Serveur d'identité 4 (Duende)
  • Autorisation simple
  • Autorisation du propriétaire de la ressource
  • Architecture PROPRE
  • Tests unitaires avec bUnit
  • Interopérabilité Javascript

Avant de commencer

Au moment de la rédaction de ce didacticiel, .NET Core 7.0 ne peut être utilisé qu'avec Visual Studio 2022. Il est recommandé d'installer la dernière version de Visual Studio 2022 afin de fonctionner avec .NET Core 7.0.

  • Installez la dernière version de Visual Studio 2022 avec la charge de travail ASP.NET et de développement Web
  • Installez .NET Core 7.0 en téléchargeant le SDK .NET Core 7.0

Vous souhaiterez peut-être accéder à la documentation de démarrage pour un ensemble d'instructions mis à jour.

Notre flux de travail

Nous allons suivre quelques étapes simples. Chaque étape se concentrera sur une tâche et s’appuiera sur l’étape précédente. Nous commencerons par des projets simples qui deviendront de plus en plus complexes au fur et à mesure. Par exemple, nous ne nous concentrerons pas dans un premier temps sur l’authentification et l’autorisation. Nous l'ajouterons ultérieurement.

Comment suivre ce tutoriel

Si vous commencez à partir de Lab01 et suivez chaque readme.md, vous pouvez terminer chaque laboratoire et passer au suivant en utilisant votre propre code. Pas besoin d'ouvrir ni les Start ni les dossiers Solution fournis dans ce dépôt.

  • Les dossiers Start sont les points de départ de chaque étape.
  • Les dossiers Solution sont les versions finales de chaque étape, qui vous sont remises au cas où vous souhaiteriez vérifier ce que votre projet est censé devenir à la fin de chaque laboratoire.

Il vous suffit d'ouvrir un dossier Start correspondant au laboratoire que vous souhaitez essayer ( Lab01/Start pour repartir de zéro) et de suivre les instructions que vous trouverez dans le fichier readme.md . Lorsque vous avez terminé, n'hésitez pas à comparer votre travail avec la solution fournie dans le dossier Solution .

Pour COMMENCER

  1. Ouvrez le dossier Labs
  2. Accédez au sous-dossier Lab01
  3. Accédez au sous-dossier Start
  4. Suivez les instructions contenues dans le fichier readme.md pour continuer

Si vous voulez voir la candidature finale

Créer la base de données du service REST Photos

  • Ouvrez Lab15SolutionblazorPhotoSharingApplicationPhotoSharingApplication.sln dans Visual Studio
  • Construire la solution
  • Assurez-vous d'avoir plusieurs projets de démarrage :
    • Serveur d'identité
    • Repos
    • gRPC
    • Frontend.Serveur

Démarrer l'application

Pour vous connecter

  • Nom d'utilisateur : Alice
  • Mot de passe : Pass123$

Ou

  • Nom d'utilisateur : Bob
  • Mot de passe : Pass123$

Une dernière note avant de commencer

Je suppose que vous êtes un programmeur C# intéressé par la création d'une application Web. Selon votre âge, vous avez peut-être déjà utilisé des pages asp, aspx, mvc et/ou razor et vous souhaitez maintenant essayer Blazor. Vous êtes peut-être déjà familier avec HTML et CSS et peut-être avez-vous même joué avec certains frameworks javascript tels que Angular, React ou Vue.

Je vais relier une tonne de documentation sur les concepts et les technologies Web, alors ne vous inquiétez pas si vous n'êtes pas un expert en développement Web, vous pouvez tout apprendre en cours de route. Cependant, vous devez au moins maîtriser C#, sinon ce didacticiel sera difficile à suivre. La plupart du code que nous allons écrire sera en fait du C#. Nous allons également écrire du HTML, mais c'est facile à apprendre donc cela ne posera pas de problème.

Les laboratoires

  • Lab 01 – L’interface Blazor
    • Explorer la structure d'un projet Blazor Web Assembly et créer notre première page
  • Lab 02 - Frontend : vues supplémentaires
    • Architecture PROPRE
    • Injection de dépendance
    • Utilisation de bibliothèques Blazor supplémentaires via des packages NuGet
    • Itinéraires
    • Liaison de données
    • Gestion des événements
  • Lab 03 - Frontend : Styliser l'interface utilisateur avec MatBlazor
    • Conception matérielle
    • MatBlazor
    • Pages de mise en page
  • Lab 04 - Frontend - Bibliothèques et composants de classes Razor
    • Création d'une bibliothèque de classes Razor
    • Utilisation d'une bibliothèque de classes Razor à partir d'un projet
    • Composants du rasoir
    • Composants parent et enfant
    • Propriétés
    • Rappels d'événements
  • Lab 05 - Backend : API Web avec ASP.NET Core 7.0 et Visual Studio 2022
    • Protocole REST
    • API Web Asp.NET Core
    • Contrôleurs
    • Actes
    • Itinéraires
    • Obligatoire
    • Noyau du cadre d'entité
    • JSON
    • Swagger/OpenAPI
  • Lab 06 – Frontend : connexion avec le backend
    • Client HTTP
    • Configuration du client HTTP
    • GetFromJsonAsync
    • PostAsJsonAsync
    • PutAsJsonAsync
    • SupprimerAsync
    • ReadFromJsonAsync
    • CORS
    • YARP
  • Lab 07 - Frontend : Commentaires
    • Une architecture plus PROPRE
    • Plus de composants
  • Lab 08 - Backend : gRPC avec ASP.NET Core 7.0 et Visual Studio 2022
    • Une architecture plus PROPRE
    • gRPC
    • protobuf
    • gRPC dans Asp.Net Core
  • Lab 09 – Frontend : connexion avec le backend
    • Web gRPC
    • Client Web gRPC dans .NET Core
    • Configuration
    • CORS
    • YARP
  • Lab 10 - Sécurité : Authentification et autorisation
    • Serveur d'identité Duende
    • Configuration du service REST pour l'authentification du porteur JWT
    • Configuration du service gRPC pour l'authentification du porteur JWT
    • Configuration du client Blazor pour l'authentification du porteur JWT
    • Autorisation simple avec l'attribut Authorize
    • Récupérer et transmettre des jetons JWT Bearer à l'aide du framework Duende.Bff.Yarp
  • Lab 11 – Sécurité : autorisation basée sur les ressources
    • Service d'autorisation
    • Politiques
    • Exigences
    • Gestionnaires
  • Laboratoire 12 – Optimisation des performances
    • Fractionnement de la table du cadre d'entité
    • Télécharger un fichier à partir d'un service API Web REST
    • Mise en cache du navigateur
  • Laboratoire 13 - Validation
    • Annotations de données
    • Validation fluide dans le service principal
    • Validation fluide dans le service REST ASP.NET Core
    • Validation fluide dans Blazor avec Blazored.FluentValidation
  • Lab 14 - Tests unitaires des composants Blazor avec bUnit
    • Tests unitaires
    • Railleur
    • xUnité
    • Quantité minimale de commande
    • bUnité
  • Lab 15 - Interopérabilité Blazor / Javascript
    • IJSRuntime
    • Appeler une fonction JavaScript dans ASP.NET Core Blazor
    • Appeler des méthodes .NET à partir de fonctions JavaScript dans ASP.NET Core Blazor
    • Isolation JavaScript Blazor et références d'objets
    • Brochure
    • exif.js
Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout