Partager via

Démarrage rapide : Configurer la connexion pour une application ASP.NET à l’aide d’Azure Active Directory B2C

  • Article

Azure Active Directory B2C (Azure AD B2C) assure la gestion des identités de cloud pour préserver la protection de votre application, de votre entreprise et de vos clients. Azure AD B2C permet à vos applications de s’authentifier auprès de comptes des réseaux sociaux et de comptes d’entreprise à l’aide de protocoles standard ouverts.

Dans ce démarrage rapide, vous utilisez un exemple d’application ASP.NET pour vous connecter à l’aide d’un fournisseur d’identité sociale et appeler une API web protégée par Azure AD B2C.

Prérequis

  • Visual Studio 2022 avec la charge de travail Développement web et ASP.NET.

  • Un compte de réseau social Facebook, Google ou Microsoft.

  • Téléchargez un fichier zip ou clonez l’exemple d’application web à partir de GitHub.

    git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-webapp-and-webapi.git

    L’exemple de solution contient deux projets :

    • TaskWebApp : application web qui crée et modifie une liste de tâches. L’application web utilise le flux d’inscription ou de connexion d’utilisateur pour inscrire ou connecter des utilisateurs.
    • TaskService : API web qui prend en charge les fonctionnalités de création, de lecture, de mise à jour et de suppression des listes de tâches. L’API web est protégée par Azure AD B2C et appelée par l’application web.

Exécuter l’application dans Visual Studio

  1. Dans l’exemple de dossier de projet de l’application, ouvrez la solution B2C-WebAPI-DotNet.sln dans Visual Studio.

  2. Pour ce guide de démarrage rapide, vous exécutez les projets TaskWebApp et TaskService simultanément. Cliquez avec le bouton droit sur la solution B2C-WebAPI-DotNet dans l’Explorateur de solutions, puis sélectionnez Configurer les projets de démarrage....

  3. Sélectionnez Plusieurs projets de démarrage et remplacez l’action pour les deux projets par Démarrer.

  4. Sélectionnez OK.

  5. Appuyez sur la touche F5 pour déboguer les deux applications. Chaque application s’ouvre dans son propre onglet de navigateur :

    • https://localhost:44316/ : application web ASP.NET. Dans ce démarrage rapide, vous allez interagir directement avec cette application.
    • https://localhost:44332/ : API web appelée par l’application web ASP.NET.

Connectez-vous à l’aide de votre compte

  1. Sélectionnez S’inscrire/Se connecter dans l’application web ASP.NET pour démarrer le workflow.

    Capture d’écran montrant l’exemple d’application web ASP.NET dans un navigateur avec le lien Inscription/Connexion mis en évidence

    L’exemple prend en charge plusieurs options d’inscription, notamment l’utilisation d’un fournisseur d’identité sociale ou la création d’un compte local à l’aide d’une adresse e-mail. Pour ce guide de démarrage rapide, utilisez un compte de fournisseur d’identité sociale provenant de Facebook, Google ou Microsoft.

  2. Azure AD B2C présente une page de connexion d’une entreprise fictive appelée Fabrikam pour l’exemple d’application web. Pour vous inscrire au moyen d’un fournisseur d’identité sociale, sélectionnez le bouton en regard du fournisseur d’identité que vous souhaitez utiliser.

    Capture d’écran de la page Connexion ou Inscription avec les boutons des fournisseurs d’identité

    Vous vous authentifiez (vous connectez) avec les informations d’identification de votre compte de réseau social et autorisez l’application à lire les informations de votre compte de réseau social. En accordant l’accès, l’application peut extraire des informations de profil du compte de réseau social, telles que votre nom et votre ville.

  3. Terminez le processus de connexion pour le fournisseur d’identité.

Modifier votre profil

Azure Active Directory B2C fournit des fonctionnalités permettant aux utilisateurs de mettre à jour leurs profils. L’exemple d’application web utilise un flux utilisateur de modification du profil Azure AD B2C pour le workflow.

  1. Dans la barre de menus de l’application, sélectionnez le nom de votre profil, puis Modifier le profil pour modifier le profil que vous avez créé.

    Capture d’écran de l’exemple d’application web dans le navigateur avec le lien Modifier le profil mis en évidence

  2. Changez votre nom d’affichage ou ville, puis sélectionnez Continuer pour mettre à jour votre profil.

    Le changement s’affiche dans la partie supérieure droite de la page d’accueil de l’application web.

Accéder à une ressource d’API protégée

  1. Sélectionnez Liste de tâches pour entrer et modifier des éléments de votre liste des tâches.

  2. Dans la zone de texte Nouvel élément, entrez du texte. Sélectionnez Ajouter pour appeler l’API web protégée par Azure AD B2C qui ajoute un élément de liste des tâches.

    Capture d’écran de l’exemple d’application web dans le navigateur avec le lien Modifier le profil mis en évidence.

    L'application Web ASP.NET inclut un jeton d'accès Microsoft Entra dans la demande adressée à la ressource API Web protégée pour effectuer des opérations sur les éléments de la liste de tâches de l'utilisateur.

Vous avez utilisé votre compte d’utilisateur Azure AD B2C pour effectuer un appel autorisé vers une API web protégée par Azure AD B2C.

Étapes suivantes

Créer un locataire Azure Active Directory B2C dans le portail Azure