Partager via


Configurer l’authentification dans un exemple d’application web à l’aide d’Azure AD B2C

Important

À compter du 1er mai 2025, Azure AD B2C ne sera plus disponible pour les nouveaux clients. Pour plus d’informations, consultez notre FAQ.

Cet article utilise un exemple d’application web ASP.NET pour illustrer comment ajouter l’authentification Azure Active Directory B2C (Azure AD B2C) à vos applications web.

Important

L’exemple ASP.NET application web référencée dans cet article ne peut pas être utilisé pour appeler une API REST, car elle retourne un jeton d’ID et non un jeton d’accès. Pour une application web qui peut appeler une API REST, consultez Sécuriser une API web créée avec ASP.NET Core à l’aide d’Azure AD B2C.

Aperçu

OpenID Connect (OIDC) est un protocole d’authentification basé sur OAuth 2.0. Vous pouvez utiliser OIDC pour connecter en toute sécurité les utilisateurs à une application. Cet exemple d’application web utilise Microsoft Identity Web. Microsoft Identity Web est un ensemble de bibliothèques principales ASP.NET qui simplifient l’ajout de la prise en charge de l’authentification et de l’autorisation aux applications web.

Le flux de connexion implique les étapes suivantes :

  1. L’utilisateur accède à l’application web et sélectionne Connexion.
  2. L’application lance une requête d’authentification et redirige les utilisateurs vers Azure AD B2C.
  3. Les utilisateurs s’inscrivent ou se connectent et réinitialisent le mot de passe. Ils peuvent également se connecter avec un compte social.
  4. Une fois que les utilisateurs se connectent correctement, Azure AD B2C retourne un jeton d’ID à l’application.
  5. L’application valide le jeton d’ID, lit les revendications et retourne une page sécurisée aux utilisateurs.

Lorsque le jeton d’ID a expiré ou que la session d’application est invalidée, l’application lance une nouvelle demande d’authentification et redirige les utilisateurs vers Azure AD B2C. Si la session d’authentification unique d’Azure AD B2C est active, Azure AD B2C émet un jeton d’accès sans inviter les utilisateurs à se reconnecter. Si la session Azure AD B2C expire ou devient non valide, les utilisateurs sont invités à se connecter à nouveau.

Se déconnecter

Le flux de déconnexion implique les étapes suivantes :

  1. Dans l’application, les utilisateurs se déconnectent.
  2. L’application efface ses objets de session, et la bibliothèque d’authentification efface son cache de jeton.
  3. L’application dirige les utilisateurs vers le point de terminaison de déconnexion Azure AD B2C pour mettre fin à la session Azure AD B2C.
  4. Les utilisateurs sont redirigés vers l’application.

Conditions préalables

Un ordinateur exécutant l’une des opérations suivantes :

Étape 1 : Configurer votre flux d’utilisateurs

Lorsqu’un utilisateur tente de se connecter à votre application, l’application lance une requête d’authentification auprès du point de terminaison d’autorisation via un flux d’utilisateur. Le flux d’utilisateur définit et contrôle l’expérience de l’utilisateur. Une fois que l’utilisateur a terminé le flux d’utilisateur, Azure AD B2C génère un jeton, puis redirige l’utilisateur vers votre application.

Si vous ne l’avez pas déjà fait, créez un flux d’utilisateur ou une stratégie personnalisée. Répétez les étapes pour créer trois flux utilisateur distincts comme suit :

  • Un flux d’utilisateur Inscription et connexion combiné, par exemple susi. Ce flux utilisateur prend également en charge l’expérience Mot de passe oublié.
  • Un flux utilisateur Modification de profil, tel que edit_profile.
  • Un flux utilisateur Réinitialisation du mot de passe, tel que reset_password.

Azure AD B2C ajoute B2C_1_ devant le nom du flux utilisateur. Par exemple, susi devient B2C_1_susi.

Étape 2 : Inscrire une application web

Pour permettre à votre application de se connecter avec Azure AD B2C, inscrivez votre application dans le répertoire Azure AD B2C. L’inscription de votre application établit une relation d’approbation entre l’application et Azure AD B2C.

Lors de l’inscription de l’application, vous spécifiez l’URI de redirection. L’URI de redirection est le point de terminaison vers lequel les utilisateurs sont redirigés par Azure AD B2C après s’être authentifié avec Azure AD B2C. Le processus d’inscription de l’application génère un ID d’application, également appelé ID client, qui identifie votre application de façon unique. Une fois votre application inscrite, Azure AD B2C utilise à la fois l’ID d’application et l’URI de redirection pour créer des demandes d’authentification.

Pour créer l’inscription d’application web, procédez comme suit :

  1. Connectez-vous au portail Azure.

  2. Si vous avez accès à plusieurs tenants (locataires), sélectionnez l’icône Paramètres dans le menu supérieur pour basculer vers votre tenant Azure AD B2C à partir du menu Annuaires + abonnements.

  3. Dans le portail Azure, recherchez et sélectionnez Azure AD B2C.

  4. Sélectionnez Inscriptions d'applications, puis sélectionnez Nouvelle inscription.

  5. Sous Nom, entrez un nom pour l’application (par exemple, webapp1).

  6. Sous Types de comptes pris en charge, sélectionnez Comptes dans un fournisseur d’identité ou annuaire organisationnel (pour authentifier les utilisateurs avec des flux d’utilisateurs).

  7. Sous URI de redirection, sélectionnez Web, puis entrez https://localhost:44316/signin-oidc dans la zone d’URL.

  8. Sous Gérer, sélectionnez l’authentification, accédez à l’octroi implicite et aux flux hybrides, activez la case à cocher Jetons d’ID (utilisés pour les flux implicites et hybrides).

  9. Sous Autorisations, cochez la case Accorder le consentement administrateur aux autorisations openid et offline access.

  10. Sélectionnez Inscrire.

  11. Sélectionnez Vue d’ensemble.

  12. Enregistrez l’ID d’application (client) que vous utiliserez ultérieurement pour configurer l'application web.

    Capture d’écran de la page Vue d’ensemble de l’application web pour l’enregistrement de votre ID d’application web.

Étape 3 : Obtenir l’exemple d’application web

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

git clone https://github.com/Azure-Samples/active-directory-aspnetcore-webapp-openidconnect-v2

Extrayez l’exemple de fichier dans un dossier où la longueur totale du chemin d’accès est de 260 caractères ou moins.

Étape 4 : Configurer l’exemple d’application web

Dans l’exemple de dossier, sous le dossier 1-WebApp-OIDC/1-5-B2C/ , ouvrez le projet WebApp-OpenIDConnect-DotNet.csproj avec Visual Studio ou Visual Studio Code.

Dans le dossier racine du projet, ouvrez le fichier appsettings.json. Ce fichier contient des informations sur votre fournisseur d’identité Azure AD B2C. Mettez à jour les propriétés des paramètres d’application suivantes :

Section Clé Valeur
AzureAdB2C Cas Première partie de votre nom de client Azure AD B2C (par exemple, https://contoso.b2clogin.com).
AzureAdB2C Domaine Le nom du locataire complet de votre locataire Azure AD B2C (par exemple contoso.onmicrosoft.com).
AzureAdB2C ClientId ID d’application web (client) de l’étape 2.
AzureAdB2C SignUpSignInPolicyId Flux utilisateur ou stratégie personnalisée que vous avez créée à l’étape 1.

Votre fichier de configuration final doit ressembler au code JSON suivant :

"AzureAdB2C": {
  "Instance": "https://contoso.b2clogin.com",
  "Domain": "contoso.onmicrosoft.com",
  "ClientId": "<web-app-application-id>",
  "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
  "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
}

Étape 5 : Exécuter l’exemple d’application web

  1. Générez et exécutez le projet.

  2. Accédez à https://localhost:44316.

  3. Sélectionnez S’inscrire/se connecter.

    Capture d’écran du bouton de connexion et d’inscription sur la page d’accueil du projet.

  4. Terminez le processus d’inscription ou de connexion.

Une fois l’authentification réussie, vous verrez votre nom complet dans la barre de navigation. Pour afficher les revendications retournées par le jeton Azure AD B2C à votre application, sélectionnez Revendications.

Capture d’écran des revendications de jeton d’application web.

Déployer votre application

Dans une application de production, l’URI de redirection de l’inscription d’application est généralement un point de terminaison accessible publiquement dans lequel votre application s’exécute, comme https://contoso.com/signin-oidc.

Vous pouvez ajouter des URI de redirection à vos applications inscrites à tout moment et les modifier. Les restrictions suivantes s’appliquent aux URI de redirection :

  • L’URL de réponse doit commencer par le schéma https.
  • L’URL de réponse respecte la casse. Sa casse doit correspondre à celle du chemin d’URL de votre application en cours d’exécution.

Étapes suivantes