Démarrage rapide : Connectez des utilisateurs à une application monopage (SPA) et appelez l'API Microsoft Graph à l'aide de Blazor WebAssembly

Ce guide de démarrage rapide utilise un exemple d’application monopage (SPA) Blazor WebAssembly (WASM) pour vous montrer comment connecter des utilisateurs à l’aide du flux de code d’autorisation avec une clé de preuve PKCE (Proof Key for Code Exchange) et appeler l’API Microsoft Graph. L’exemple utilise Microsoft.Authentication.WebAssembly.MSAL pour gérer l’authentification.

Prérequis

• Compte Azure avec un abonnement actif. Si vous n’en avez pas déjà un, créez un compte gratuitement.
• Kit de développement logiciel (SDK) .NET
• Visual Studio 2022 ou Visual Studio Code

Inscrire l’application et enregistrer les identificateurs

Pour terminer l’inscription, indiquez le nom de l’application, spécifiez les types de comptes pris en charge et ajoutez un URI de redirection. Une fois l’inscription terminée, le volet Vue d’ensemble de l’application affiche les identificateurs nécessaires dans le code source de l’application.

1. Connectez-vous au centre d’administration Microsoft Entra.

2. Si vous avez accès à plusieurs tenants, utilisez l’icône Paramètres dans le menu supérieur pour basculer vers le tenant dans lequel vous voulez inscrire l’application à partir du menu Répertoires + abonnements.

3. Accédez à Identité>Applications>Inscriptions d’applications, puis sélectionnez Nouvelle inscription.

4. Saisissez un nom pour l'application, par exemple identity-client-spa.

5. Pour les Types de comptes pris en charge, sélectionnez Comptes dans cet annuaire organisationnel. Pour plus d’informations sur les différents types de comptes, sélectionnez l’option M’aider à choisir.

6. Sélectionnez Inscrire.

   

7. Le Vue d’ensemble de l’application s’affiche une fois l’inscription terminée. Enregistrez l’ID du répertoire (locataire) et l’ID d’application (client) à utiliser dans le code source de votre application.

   

   Remarque

   Il est possible de modifier les Types de comptes pris en charge. Pour cela, reportez-vous à Modifier les comptes pris en charge par une application.

Ajouter un URI de redirection de plateforme

Pour spécifier le type de votre application dans votre inscription d’application, suivez ces étapes :

1. Sous Gérer, sélectionnez Authentification.
2. Dans la page Configurations de plateforme, sélectionnez Ajouter une plateforme, puis l’option SPA.
3. Pour les URI de redirection, entrez http://localhost:5000/authentication/login-callback.
4. Sélectionnez Configurer pour enregistrer vos modifications.

Cloner ou télécharger l’exemple d’application

Pour obtenir l’exemple d’application, vous pouvez le cloner à partir de GitHub ou le télécharger sous la forme d’un fichier .zip.

• Pour cloner l’exemple, ouvrez une invite de commandes, accédez à l’emplacement où vous souhaitez créer le projet, puis entrez la commande suivante :

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-dotnet
  

• Téléchargez le fichier .zip. Extrayez-la dans un chemin d’accès de fichier où la longueur du nom est inférieure à 260 caractères.

Configurer le projet

1. Dans votre IDE, ouvrez le dossier de projet ms-identity-docs-code-dotnet/spa-blazor-wasm, qui contient l’exemple.

2. Ouvrez wwwroot/appsettings.json et mettez à jour les valeurs suivantes avec les informations enregistrées précédemment dans le centre d’administration.

   {
     "AzureAd": {
       "Authority": "https://login.microsoftonline.com/<Enter the tenant ID obtained from the Microsoft Entra admin center>",
       "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
       "ValidateAuthority": true
     }
   }
   

   • Authority : L’autorité est une URL indiquant un annuaire dont la bibliothèque d’authentification Microsoft peut demander des jetons. Remplacez Enter_the_Tenant_Info_Here par la valeur d’ID de répertoire (locataire) enregistrée précédemment.
   • ClientId – Identificateur de l’application, également appelé client. Remplacez le texte entre guillemets par la valeur ID d’application (client) enregistrée précédemment.

Exécuter l’application et se connecter

Exécutez le projet avec un serveur web à l’aide de .NET :

1. Pour démarrer le serveur, exécutez les commandes suivantes dans le répertoire du projet :

   dotnet run
   

2. Copiez l’URL http qui s’affiche dans le terminal, par exemple, http://localhost:5000, et collez-la dans un navigateur. Nous vous recommandons d’utiliser une session de navigateur privée ou incognito.

3. Effectuez les étapes et entrez les informations nécessaires pour vous connecter avec votre compte Microsoft. Une adresse e-mail vous sera demandée afin qu’un code secret unique puisse vous être envoyé. Entrez le code lorsque vous y êtes invité.

4. L’application demande l’autorisation de conserver l’accès aux données à laquelle vous lui avez donné accès, et de vous connecter et de lire votre profil. Cliquez sur Accepter. La capture d’écran suivante s’affiche, indiquant que vous êtes connecté à l’application et que vous avez accédé aux détails de votre profil à partir de l’API Microsoft Graph.

   

Se déconnecter de l’application

1. Recherchez le lien Se déconnecter en haut à droite de la page et sélectionnez-le.
2. Vous serez invité à choisir un compte à partir duquel vous souhaitez vous déconnecter. Sélectionnez le compte que vous avez utilisé pour vous connecter.

Un message s’affiche, indiquant que vous vous êtes déconnecté. Vous pouvez maintenant fermer la fenêtre du navigateur.

Voir aussi

• Démarrage rapide : Protéger une API web ASP.NET Core avec la plateforme d’identités Microsoft.

• En savoir plus en générant une application monopage React à partir de zéro avec la série suivante : Tutoriel : Connecter des utilisateurs et appeler Microsoft Graph