Démarrage rapide : Connecter des utilisateurs dans un exemple d’application de bureau

• Ajoutez les URI de redirection suivants à l’aide de la configuration de la plateforme des applications mobiles et de bureau . Pour plus d’informations, consultez Comment ajouter un URI de redirection dans votre application .
  • URI de redirection : http://localhost
• Node.js
• Visual Studio Code ou un autre éditeur de code

• Ajoutez les URI de redirection suivants à l’aide de la configuration de la plateforme des applications mobiles et de bureau . Pour plus d’informations, consultez Comment ajouter un URI de redirection dans votre application .
  • URI de redirection : https://login.microsoftonline.com/common/oauth2/nativeclient
  • URI de redirection personnalisés : ms-appx-web://microsoft.aad.brokerplugin/{client_id} où {client_id} est l’ID d’application (client) de votre application.
• Visual Studio avec la charge de travail de développement de plateforme Windows universelle installée

• Pour cloner l’exemple, ouvrez une invite de commandes et 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-javascript-nodejs-desktop.git
  

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

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

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

• Télécharger le fichier .zip

Dans votre éditeur de code, ouvrez le fichier ms-identity-javascript-nodejs-desktop-main/App/authConfig.js . Remplacez la valeur comme suit :

Votre fichier doit ressembler à ce qui suit :

const AAD_ENDPOINT_HOST = "https://login.microsoftonline.com/"; // include the trailing slash

const msalConfig = {
    auth: {
        clientId: "00001111-aaaa-2222-bbbb-3333cccc4444",
        authority: `${AAD_ENDPOINT_HOST}/aaaabbbb-0000-cccc-1111-dddd2222eeee`,
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                 console.log(message);
             },
             piiLoggingEnabled: false,
             logLevel: LogLevel.Verbose,
        }
    }
}

const GRAPH_ENDPOINT_HOST = "https://graph.microsoft.com/"; // include the trailing slash

const protectedResources = {
     graphMe: {
         endpoint: `${GRAPH_ENDPOINT_HOST}v1.0/me`,
         scopes: ["User.Read"],
     }
};

module.exports = {
     msalConfig: msalConfig,
     protectedResources: protectedResources,
 };

1. Extrayez le fichier zip dans un dossier local proche de la racine du disque, par exemple , C :\Azure-Samples.

2. Ouvrez le projet dans Visual Studio.

3. Modifiez active-directory-wpf-msgraph-v2/App.xaml.cs et remplacez les valeurs des champs ClientId et Tenant par le code suivant :

   private static string ClientId = "Enter_the_Application_Id_here";
   private static string Tenant = "Enter_the_Tenant_Info_Here";
   

Where:

• Enter_the_Application_Id_here - est l’ID d’application (client) de l’application que vous avez inscrite.

  Pour rechercher la valeur de l’ID d’application (client), accédez à la page Vue d’ensemble de l’application dans le Centre d’administration Microsoft Entra.

• Enter_the_Tenant_Info_Here - est défini sur l’une des options suivantes :

  • Si votre application prend en charge les comptes dans cet annuaire organisationnel, remplacez cette valeur par l’ID de locataire ou le nom du locataire (par exemple, contoso.microsoft.com)

  • Si votre application prend en charge les comptes dans n’importe quel annuaire organisationnel, remplacez cette valeur par organizations

  • Si votre application prend en charge les comptes dans n’importe quel annuaire organisationnel et comptes Microsoft personnels, remplacez cette valeur commonpar .

    Pour rechercher les valeurs de l’ID d’annuaire (locataire) et des types de comptes pris en charge, accédez à la page Vue d’ensemble de l’application dans le Centre d’administration Microsoft Entra.

1. Vous devez installer les dépendances de cet exemple une seule fois :

   cd ms-identity-javascript-nodejs-desktop-main
   npm install
   

2. Exécutez ensuite l’application via l’invite de commandes ou la console :

   npm start
   

3. Sélectionnez Se connecter pour démarrer le processus de connexion.

   La première fois que vous vous connectez, vous êtes invité à fournir votre consentement pour autoriser l’application à vous connecter et à accéder à votre profil. Une fois connecté, vous êtes redirigé vers l’application.

Pour générer et exécuter l’exemple d’application dans Visual Studio, procédez comme suit :

1. Sélectionnez le menu >Démarrer le débogage, ou appuyez sur la touche F5. MainWindow de votre application s’affiche.
2. Sélectionnez le bouton Appeler l’API Microsoft Graph .
3. Connectez-vous à l’aide de votre compte Microsoft Entra (compte professionnel ou scolaire) ou des informations d’identification de compte Microsoft (live.com, outlook.com).
4. Si vous exécutez l’application pour la première fois, vous êtes invité à fournir le consentement pour permettre à l’application d’accéder à votre profil utilisateur et de vous connecter. Après avoir accepté les autorisations demandées, l’application affiche que vous avez correctement connecté.

Vous devez voir des informations de jeton de base et des données utilisateur obtenues à partir de l’appel à l’API Microsoft Graph.

Pour en savoir plus sur le développement d’applications de bureau Electron avec MSAL Node, consultez le tutoriel :

Essayez le didacticiel de bureau Windows pour obtenir un guide pas à pas complet sur la création d’applications et de nouvelles fonctionnalités, notamment une explication complète de ce guide de démarrage rapide.

• Ajoutez les URI de redirection suivants à l’aide de la configuration de la plateforme des applications mobiles et de bureau . Pour plus d’informations, consultez Comment ajouter un URI de redirection dans votre application .
  • URI de redirection : http://localhost
• Node.js
• Visual Studio Code ou un autre éditeur de code*

• Ajoutez les URI de redirection suivants à l’aide de la configuration de la plateforme des applications mobiles et de bureau . Pour plus d’informations, consultez Comment ajouter un URI de redirection dans votre application .
  • URI de redirection : msal{client_id}://auth où {client_id} est l’ID d’application (client) de votre application.
• Sdk .NET 7.0 ou version ultérieure
• Visual Studio 2022 avec la charge de travail MAUI installée :
  • Instructions pour Windows
  • Instructions pour macOS
• Ajouter votre application au flux utilisateur

• Ajoutez les URI de redirection suivants à l’aide de la configuration de la plateforme des applications mobiles et de bureau . Pour plus d’informations, consultez Comment ajouter un URI de redirection dans votre application .
  • URI de redirection personnalisé : https://login.microsoftonline.com/common/oauth2/nativeclient. Cette opération doit être entrée manuellement.
• Visual Studio Code ou un autre éditeur de code
• .NET 7.0 ou version ultérieure
• Ajouter votre application au flux utilisateur

Pour obtenir l’exemple de code de l’application de bureau, téléchargez le fichier .zip ou clonez l’exemple d’application web à partir de GitHub en exécutant la commande suivante :

git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

Si vous choisissez de télécharger le .zip fichier, extrayez l’exemple de fichier d’application dans un dossier où la longueur totale du chemin d’accès est de 260 caractères ou moins.

Installer les dépendances de projet

1. Ouvrez une fenêtre de console et passez au répertoire qui contient l’exemple d’application Electron :

   cd 1-Authentication\3-sign-in-electron\App
   

2. Exécutez les commandes suivantes pour installer les dépendances d’application :

   npm install && npm update
   

Pour obtenir l’exemple de code de l’application de bureau .NET MAUI, téléchargez le fichier .zip ou clonez l’exemple d’application de bureau .NET MAUI à partir de GitHub en exécutant la commande suivante :

git clone https://github.com/Azure-Samples/ms-identity-ciam-dotnet-tutorial.git

Pour obtenir l’exemple d’application, vous pouvez le cloner à partir de GitHub ou le télécharger en tant que fichier .zip.

• Pour cloner l’exemple, ouvrez une invite de commandes et 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-ciam-dotnet-tutorial.git
  

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

1. Dans votre éditeur de code, ouvrez App\authConfig.js le fichier.

2. Recherchez l’espace réservé :

   1. Enter_the_Application_Id_Here et remplacez-le par l’ID d’application (client) de l’application que vous avez inscrite précédemment.

   2. Enter_the_Tenant_Subdomain_Here et remplacez-le par le sous-domaine Directory (locataire). Par exemple, si votre domaine principal de locataire est contoso.onmicrosoft.com, utilisez contoso. Si vous n’avez pas de nom de locataire, découvrez comment lire les détails de votre locataire.

1. Dans Visual Studio, ouvrez ms-identity-ciam-dotnet-tutorial-main/1-Authentication/2-sign-in-maui/appsettings.json fichier.
2. Recherchez l’espace réservé :
   1. Enter_the_Tenant_Subdomain_Here et remplacez-le par le sous-domaine Directory (locataire). Par exemple, si votre domaine principal de locataire est contoso.onmicrosoft.com, utilisez contoso. Si vous n’avez pas de nom de locataire, découvrez comment lire les détails de votre locataire.
   2. Enter_the_Application_Id_Here et remplacez-le par l’ID d’application (client) de l’application que vous avez inscrite précédemment.

1. Ouvrez le projet dans votre IDE (comme Visual Studio ou Visual Studio Code) pour configurer le code.

2. Dans votre éditeur de code, ouvrez le fichier appsettings.json dans le dossier ms-identity-ciam-dotnet-tutorial>1-Authentication>5-sign-in-dotnet-wpf .

3. Remplacez Enter_the_Application_Id_Here par l’ID d’application (client) de l’application que vous avez inscrite précédemment.

4. Remplacez Enter_the_Tenant_Subdomain_Here par le sous-domaine Répertoire (locataire). Par exemple, si votre domaine principal est contoso.onmicrosoft.com, remplacez Enter_the_Tenant_Subdomain_Here par contoso. Si vous n’avez pas votre domaine principal, découvrez comment lire les détails du locataire.

Vous pouvez maintenant tester l’exemple d’application de bureau Electron. Une fois l’application exécutée, la fenêtre de l’application de bureau s’affiche automatiquement :

1. Dans votre terminal, exécutez la commande suivante :

   npm start
   

   

2. Dans la fenêtre de bureau qui s’affiche, sélectionnez le bouton Se connecter ou s’inscrire . Une fenêtre de navigateur s’ouvre et vous êtes invité à vous connecter.

3. Dans la page de connexion du navigateur, tapez votre adresse e-mail, sélectionnez Suivant, tapez votre mot de passe, puis sélectionnez Se connecter. Si vous n’avez pas de compte, sélectionnez Aucun compte ? Créez un lien, qui démarre le flux d’inscription.

4. Si vous choisissez l’option d’inscription, après avoir renseigné votre e-mail, votre code secret à usage unique, le nouveau mot de passe et plus de détails de compte, vous avez terminé l’ensemble du flux d’inscription. Vous voyez une page similaire à la capture d’écran suivante. Vous voyez une page similaire si vous choisissez l’option de connexion. La page affiche les revendications d’ID de jeton.

   

Les applications .NET MAUI sont conçues pour s’exécuter sur plusieurs systèmes d’exploitation et appareils. Vous devez sélectionner la cible avec laquelle vous souhaitez tester et déboguer votre application.

Définissez la cible de débogage dans la barre d’outils Visual Studio sur l’appareil avec lequel vous souhaitez déboguer et tester. Les étapes suivantes illustrent la définition de la cible de débogage sur Windows :

1. Sélectionnez La liste déroulante Déboguer la cible .
2. Sélectionner Framework
3. Sélectionnez net7.0-windows...

Exécutez l’application en appuyant sur F5 ou sélectionnez le bouton de lecture en haut de Visual Studio.

1. Vous pouvez maintenant tester l’exemple d’application de bureau .NET MAUI. Une fois l’application exécutée, la fenêtre de l’application de bureau s’affiche automatiquement :

   

2. Dans la fenêtre de bureau qui s’affiche, sélectionnez le bouton Se connecter . Une fenêtre de navigateur s’ouvre et vous êtes invité à vous connecter.

   

   Pendant le processus de connexion, vous êtes invité à accorder diverses autorisations (pour permettre à l’application d’accéder à vos données). Une fois la connexion réussie et le consentement, l’écran de l’application affiche la page principale.

   

1. Ouvrez une fenêtre de console et passez au répertoire qui contient l’exemple d’application de bureau WPF :

   cd 1-Authentication\5-sign-in-dotnet-wpf
   

2. Dans votre terminal, exécutez l’application en exécutant la commande suivante :

   dotnet run
   

3. Après avoir lancé l’exemple, vous devez voir une fenêtre avec un bouton de connexion . Sélectionnez le bouton Connexion .

   

4. Dans la page de connexion, entrez votre adresse e-mail de compte. Si vous n’avez pas de compte, sélectionnez Aucun compte ? Créez-en un, qui démarre le flux d’inscription. Suivez ce flux pour créer un compte et vous connecter.

5. Une fois connecté, vous verrez un écran affichant une connexion réussie et des informations de base sur votre compte d’utilisateur stocké dans le jeton récupéré. Les informations de base sont affichées dans la section Informations de jeton de l’écran de connexion

• Activez la réinitialisation du mot de passe.
• Personnalisez la personnalisation par défaut.
• Explorez l’exemple de code de l’application de bureau Electron.

• Tutoriel : Créer une application .NET MAUI.
• Activez la réinitialisation du mot de passe.
• Personnalisez la personnalisation par défaut.

• Tutoriel : Authentifier les utilisateurs sur votre application de bureau WPF
• Activez la réinitialisation du mot de passe.
• Personnalisez la personnalisation par défaut.