Configurer l’authentification dans un exemple d’application de bureau WPF à l’aide d’Azure AD B2C

  • Article

Cet article utilise un exemple d’application de bureau Windows Presentation Foundation (WPF) pour illustrer l’ajout d’une authentification Azure Active Directory B2C (Azure AD B2C) à vos applications de bureau.

Vue d’ensemble

OpenID Connect (OIDC) est un protocole d’authentification basé sur OAuth 2.0. Vous pouvez utiliser OIDC pour connecter de façon sécurisée des utilisateurs à une application. Cet exemple d’application de bureau utilise la bibliothèque d’authentification Microsoft (MSAL) avec le flux PKCE (Proof Key for Code Exchange) du code d’autorisation OIDC. La bibliothèque MSAL est une bibliothèque fournie par Microsoft qui simplifie l’ajout d’une prise en charge de l’authentification et de l’autorisation aux applications de bureau.

Le flux de connexion implique les étapes suivantes :

  1. Les utilisateurs ouvrent l’application et sélectionnent Se connecter.
  2. L’application ouvre le navigateur système de l’appareil de bureau et envoie une requête d’authentification à Azure AD B2C.
  3. Les utilisateurs s’inscrivent ou se connectent, réinitialisent le mot de passe ou se connectent à l’aide d’un compte social.
  4. Une fois les utilisateurs connectés, Azure AD B2C retourne un code d’autorisation à l’application.
  5. L’application :
    1. Elle échange le code d’autorisation contre un jeton d’ID, un jeton d’accès et un jeton d’actualisation.
    2. Elle lit les revendications du jeton d’ID.
    3. Elle stocke les jetons dans un cache en mémoire pour une utilisation ultérieure.

Vue d’ensemble de l’inscription de l’application

Pour permettre à votre application de se connecter avec Azure AD B2C et d’appeler une API web, inscrivez deux applications dans le répertoire d’Azure AD B2C.

  • L’inscription de l’application de bureau permet à votre application de se connecter grâce à Azure AD B2C. Pendant l’inscription de l’application, 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 qu’ils se sont authentifiés avec Azure AD B2C. Le processus d’inscription d’application génère un ID d’application, également appelé ID client, qui identifie de façon univoque votre application de bureau (par exemple ID d’application : 1).

  • L’inscription de l’API web permet à votre application d’appeler une API web protégée. Elle expose les autorisations de l’API web (étendues). Le processus d’inscription de l’application génère un ID d’application, qui identifie de façon univoque votre API web (par exemple ID d’application : 2). Accordez à votre application de bureau (ID d’application : 1) des autorisations sur les étendues de l’API web (ID d’application : 2).

L’architecture et l’inscription de l’application sont illustrées dans les diagrammes suivants :

Diagram of the desktop app with web API, registrations, and tokens.

Appel à une API web

Une fois l’authentification terminée, les utilisateurs interagissent avec l’application, qui appelle une API web protégée. L’API web utilise l’authentification par jeton du porteur. Le jeton du porteur est le jeton d’accès obtenu par l’application auprès d’Azure AD B2C. L’application transmet le jeton dans l’en-tête d’autorisation de la requête HTTPS.

Authorization: Bearer <access token>

Si l’étendue du jeton d’accès ne correspond pas aux étendues de l’API web, la bibliothèque d’authentification obtient un nouveau jeton d’accès avec les étendues appropriées.

Flux de déconnexion

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.

Prérequis

Un ordinateur qui exécute Visual Studio 2019 avec un développement de bureau .NET.

É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 vos applications

Créez l’inscription d’application de l’application de bureau et de l’API web, puis spécifier les étendues de votre API web.

Étape 2.1 : Inscrire l’application API web

Pour créer l’inscription d’application API web (ID d’application : 2), suivez les étapes suivantes :

  1. Connectez-vous au portail Azure.

  2. Veillez à bien utiliser l’annuaire qui contient votre locataire Azure AD B2C. Sélectionnez l’icône Répertoires + abonnements dans la barre d’outils du portail.

  3. Sur la page Paramètres du portail | Répertoires + abonnements, recherchez votre répertoire AD B2C Azure dans la liste Nom de répertoire, puis sélectionnez Basculer.

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

  5. Sélectionnez Inscriptions d’applications, puis Nouvelle inscription.

  6. Dans le champ Nom, entrez un nom pour l’application (par exemple my-api1). Laissez les valeurs par défaut pour l'URI de redirection et les Types de comptes pris en charge.

  7. Sélectionnez Inscription.

  8. Une fois l’inscription de l’application terminée, sélectionnez Vue d’ensemble.

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

    Screenshot that demonstrates how to get a web A P I application I D.

Étape 2.2 : Configurer les étendues de l’application API web

  1. Sélectionnez l’application my-api1 que vous avez créée (ID d’application : 2) pour ouvrir sa page Vue d’ensemble.

  2. Sous Gérer, sélectionnez Exposer une API.

  3. A côté d’URI d’ID d’application, sélectionnez le lien Définir. Remplacez la valeur par défaut (GUID) par un nom unique (par exemple, tasks-api), puis sélectionnez Enregistrer.

    Lorsque votre application web demande un jeton d’accès pour l’API web, elle doit ajouter cet URI en tant que préfixe de chaque étendue que vous définissez pour l’API.

  4. Sous Étendues définies par cette API, sélectionnez Ajouter une étendue.

  5. Pour créer une étendue qui définit l’accès en lecture à l’API :

    1. Pour Nom de l’étendue, entrez tâches.lecture.
    2. Pour Nom d’affichage du consentement administrateur, entrez Accès en lecture à l’API de tâches.
    3. Pour Description du consentement administrateur, entrez Autorise l’accès en lecture à l’API de tâches.

  6. Sélectionnez Ajouter une étendue.

  7. Sélectionnez Ajouter une étendue, puis ajoutez une étendue qui définit l’accès en écriture à l’API :

    1. Pour Nom de l’étendue, entrez tâches.écriture.
    2. Pour Nom d’affichage du consentement administrateur, entrez Accès en écriture à l’API de tâches.
    3. Pour Description du consentement administrateur, entrez Autorise l’accès en écriture à l’API de tâches.

  8. Sélectionnez Ajouter une étendue.

Étape 2.3 : Inscrire l’application de bureau

Pour créer l’inscription de l’application de bureau, procédez comme suit :

  1. Connectez-vous au portail Azure.
  2. Sélectionnez Inscriptions d’applications, puis Nouvelle inscription.
  3. Sous Nom, entrez un nom pour l’application (par exemple, desktop-app1).
  4. 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) .
  5. Sous URI de redirection, sélectionnez Client public/natif (bureau et bureau) puis, dans la zone URL, entrez https://your-tenant-name.b2clogin.com/oauth2/nativeclient. Remplacez your-tenant-name par votre nom de locataire. Pour d’autres options, consultez Configurer l’URI de redirection.
  6. Sélectionnez Inscription.
  7. Une fois l’inscription de l’application terminée, sélectionnez Vue d’ensemble.
  8. Enregistrez l’ID d’application (client) que vous utiliserez ultérieurement pour configurer l’application de bureau. Screenshot highlighting the desktop application ID.

Étape 2.4 : Accorder à l’application de bureau les autorisations pour l’API web

Pour accorder des autorisations à votre application (ID d’application : 1), procédez comme suit :

  1. Sélectionnez Inscriptions d’applications, puis l’application que vous avez créée (ID d’application : 1).

  2. Sous Gérer, sélectionnez Autorisations de l’API.

  3. Sous Autorisations configurées, sélectionnez Ajouter une autorisation.

  4. Sélectionnez l’onglet Mes API.

  5. Sélectionnez l’API (ID d’application : 2) à laquelle l’application web doit être autorisée à accéder. Par exemple, saisissez my-api1.

  6. Sous Autorisation, développez tâches, puis sélectionnez les étendues que vous avez définies auparavant (par exemple, tasks.read et tasks.write).

  7. Sélectionnez Ajouter des autorisations.

  8. Sélectionnez Accorder le consentement de l’administrateur pour <nom de votre locataire>.

  9. Sélectionnez Oui.

  10. Sélectionnez Actualiser, puis vérifiez que la mention Accordé pour ... apparaît sous État pour les deux étendues.

  11. Dans la liste Autorisations configurées, sélectionnez votre étendue, puis copiez le nom complet de celle-ci.

    Screenshot of the configured permissions pane, showing that read access permissions are granted.

Étape 3 : Configurer l’exemple d’API web

Cet exemple montre comment acquérir un jeton d’accès avec les étendues appropriées que l’application de bureau peut utiliser pour une API web. Pour appeler une API web à partir du code, procédez comme suit :

  1. Utilisez une API web existante ou créez-en une nouvelle. Pour plus d’informations, consultez Activer l’authentification dans votre propre API web à l’aide d’Azure AD B2C.
  2. Après avoir configuré l’API web, copiez l’URI du point de terminaison de l’API web. Vous allez utiliser le point de terminaison de l’API web dans les étapes suivantes.

Conseil

Si vous n’avez pas d’API web, vous pouvez quand même exécuter cet exemple. Dans ce cas, l’application renvoie le jeton d’accès, mais ne pourra pas appeler l’API web.

Étape 4 : Obtenir l’exemple d’application de bureau WPF

  1. Téléchargez le fichier .zip ou clonez l’exemple d’application web à partir du référentiel GitHub.

    git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-desktop.git

  2. Ouvrez la solution active-directory-b2c-wpf (le fichier active-directory-b2c-wpf.sln) dans Visual Studio.

Étape 5 : Configurer l’exemple d’application de bureau

Dans le projet active-directory-b2c-wpf, ouvrez le fichier App.xaml.cs. Les membres de la classe App.xaml.cs contiennent des informations sur votre fournisseur d’identité Azure AD B2C. L’application de bureau utilise ces informations pour établir une relation de confiance avec Azure AD B2C, connecter et déconnecter les utilisateurs et acquérir des jetons et les valider.

Mettez à jour les membres de classe suivants :

Clé Valeur
TenantName La première partie du nom de locataire Azure AD B2C (par exemple contoso.b2clogin.com).
ClientId L’ID d’application de bureau de l’étape 2.3.
PolicySignUpSignIn Le flux d’utilisateur ou la stratégie personnalisée d’inscription ou de connexion que vous avez créés à l’étape 1.
PolicyEditProfile Le flux d’utilisateur ou la stratégie personnalisée du profil de modification que vous avez créés à l’étape 1.
ApiEndpoint (Facultatif) Le point de terminaison de l’API web que vous avez créé à l’étape 3 (par exemple https://contoso.azurewebsites.net/hello).
ApiScopes Étendues d’API web que vous avez créées à l’étape 2.4.

Votre fichier App.xaml.cs final doit ressembler au code C# suivant :

public partial class App : Application
{

private static readonly string TenantName = "contoso";
private static readonly string Tenant = $"{TenantName}.onmicrosoft.com";
private static readonly string AzureAdB2CHostname = $"{TenantName}.b2clogin.com";
private static readonly string ClientId = "<web-api-app-application-id>";
private static readonly string RedirectUri = $"https://{TenantName}.b2clogin.com/oauth2/nativeclient";

public static string PolicySignUpSignIn = "b2c_1_susi";
public static string PolicyEditProfile = "b2c_1_edit_profile";
public static string PolicyResetPassword = "b2c_1_reset";

public static string[] ApiScopes = { $"https://{Tenant}//api/tasks.read" };
public static string ApiEndpoint = "https://contoso.azurewebsites.net/hello";

Étape 6 : Exécuter et tester l’application de bureau

  1. Restaurez les packages NuGet.

  2. Sélectionnez F5 pour générer et exécuter l’exemple.

  3. Sélectionnez Se connecter, puis inscrivez-vous ou connectez-vous avec votre compte Azure AD B2C local ou avec un compte social.

    Screenshot highlighting how to start the sign-in flow.

  4. Après une inscription ou une connexion réussie, les détails du jeton s’affichent dans le volet inférieur de l’application WPF.

    Screenshot highlighting the Azure AD B2C access token and user ID.

  5. Sélectionnez Appeler l’API pour appeler votre API web.

Étapes suivantes

Découvrez comment configurer les options d’authentification dans une application du bureau WPF à l’aide d’Azure AD B2C.