Tutoriel : Créer une application Blazor Server qui utilise la plateforme d’identité Microsoft pour l’authentification

Dans ce tutoriel, vous allez créer une application Blazor Server qui connecte les utilisateurs et récupère les données de Microsoft Graph, par l’intermédiaire de la plateforme d’identités Microsoft et en inscrivant votre application dans Microsoft Entra ID.

Nous disposons également d’un guide de démarrage rapide pour Blazor WASM.

Dans ce tutoriel, vous allez :

  • Créez une application Blazor Server configurée pour utiliser Microsoft Entra ID pour l’authentification des utilisateurs dans une seule organisation (dans le locataire Microsoft Entra, l’application est inscrite)
  • Gérer l’authentification et l’autorisation à l’aide de Microsoft.Identity.Web
  • Récupérer des données à partir d’une API web protégée, Microsoft Graph

Prérequis

Créer l’application à l’aide de l’interface de ligne de commande .NET

mkdir <new-project-folder>
cd <new-project-folder>
dotnet new blazorserver --auth SingleOrg --calls-graph

Installer l’outil .NET Microsoft Identity App Sync

dotnet tool install --global msidentity-app-sync

Cet outil automatise les tâches suivantes pour vous :

  • Inscrire votre application dans Microsoft Entra ID
    • Créez un secret pour une application inscrite
    • Inscrire des URI de redirection en fonction de votre launchsettings.json
  • Initialiser l’utilisation de secrets utilisateur dans votre projet
  • Stocker votre secret d’application dans le stockage des secrets utilisateur
  • Mettez à jour votre fichier appsettings.json avec client-id, tenant-id, etc.

Les outils .NET étendent les fonctionnalités de la commande CLI dotnet. Pour obtenir plus d’informations, consultez Outils .NET.

Pour plus d’informations sur le stockage des secrets utilisateur, consultez Stockage sécurisé des secrets d’application pendant le développement.

Utiliser l’outil de synchronisation d’applications Microsoft Identity

Exécutez la commande suivante pour inscrire votre application dans votre locataire et mettre à jour la configuration .NET de votre application. Indiquez le nom d’utilisateur/nom d’utilisateur principal appartenant à votre compte Azure (par exemple username@domain.com) et l’ID de locataire ou le nom de domaine de Microsoft Entra ID associé à votre compte Azure.

msidentity-app-sync --username <username/upn> --tenant-id <tenantID>

Remarque

  • Vous n’avez pas besoin de fournir le nom d’utilisateur si vous êtes connecté avec un seul compte dans les outils de développement.
  • Vous n’avez pas besoin de fournir l’id de locataire si le locataire dans lequel vous souhaitez créer l’application est votre locataire de base.

Facultatif - Créer un certificat SSL de développement

Afin d’éviter les erreurs/avertissements SSL lors de la navigation dans l’application en cours d’exécution, vous pouvez utiliser ce qui suit sur macOS et Windows pour générer un certificat SSL auto-signé à utiliser par .NET.

dotnet dev-certs https --trust

Exécuter l’application

Dans votre terminal, exécutez la commande suivante :

dotnet run

Accédez à l’application web en cours d’exécution à l’aide de l’URL générée par la ligne de commande.

Étapes suivantes

Approfondissez en créant une application web ASP.NET Core qui connecte les utilisateurs dans cette série de tutoriels en plusieurs parties :