Partager via

Tutoriel : Créer une application .NET MAUI à l’aide du Kit de développement logiciel (SDK) Microsoft Graph

  • Article

Familiarisez-vous avec .NET MAUI en créant une application multiplateforme sur Windows qui tire parti du Kit de développement logiciel (SDK) Microsoft Graph pour afficher les données utilisateur.

Dans ce tutoriel, vous allez apprendre à :

  • Configurer votre environnement pour le développement .NET MAUI et créer un projet .NET MAUI
  • Inscrire votre application cliente dans Azure
  • Intégrer à Azure Identity et au Kit de développement logiciel (SDK) Microsoft Graph
  • Mettre à jour l’interface utilisateur pour afficher les informations utilisateur à partir de Microsoft Graph

Prérequis

Configuration de l’environnement

Si vous n'avez pas encore configuré votre environnement pour le développement .NET MAUI, suivez les étapes pour Bien démarrer avec .NET MAUI sur Windows.

Création du projet .NET MAUI

Remarque

Si vous connaissez déjà la configuration d’un projet .NET MAUI, vous pouvez passer à la section Inscrire votre client dans Azure .

Lancez Visual Studio et, dans la fenêtre de démarrage, cliquez sur Créer un projet pour créer un projet :

Créer un nouveau projet.

Dans la fenêtre Créer un projet, sélectionnez MAUI dans la liste déroulante Tous les types de projets, sélectionnez le modèle .NET MAUI App, puis cliquez sur Suivant :

Modèle d’application .NET MAUI.

Dans la fenêtre Configurer votre nouveau projet , donnez un nom à votre projet, choisissez un emplacement pour celui-ci, puis cliquez sur le bouton Suivant :

Nommez le nouveau projet.

Dans la fenêtre Informations supplémentaires, cliquez sur le bouton Créer :

Créez un projet.

Attendez que le projet soit créé et que ses dépendances soient restaurées :

Le projet est créé.

Dans la barre d'outils de Visual Studio, appuyez sur le bouton Machine Windows pour générer et exécuter l'application. Cliquez sur le bouton Cliquez sur moi et vérifiez que le contenu du bouton est mis à jour avec le nombre de clics.

Maintenant que vous avez vérifié que l’application .NET MAUI sur Windows fonctionne comme prévu, nous pouvons intégrer le Kit de développement logiciel (SDK) Graph. Dans la section suivante, vous allez ajouter les packages nécessaires pour authentifier et passer des appels à Microsoft Graph.

Inscrire votre client dans Azure

Une inscription d’application dans Azure avec l’étendue User.Read accordée à l’application est nécessaire pour lire les données utilisateur de Microsoft Graph. Pour inscrire votre application, procédez comme suit :

Connectez-vous au portail Azure.

Si vous avez accès à plusieurs locataires, utilisez le filtre Répertoires + abonnements dans le menu supérieur pour basculer vers le locataire dans lequel vous souhaitez inscrire l’application.

Recherchez et sélectionnez Azure Active Directory.

Sous Gérer, sélectionnez Inscriptions d’applications > Nouvelle inscription.

Entrez un nom pour votre application (par exemple, Win-App-calling-MsGraph). Les utilisateurs de votre application peuvent voir ce nom, et vous pouvez le changer ultérieurement.

Dans la section Types de comptes pris en charge, sélectionnez Comptes dans un annuaire organisationnel et comptes personnels Microsoft (par exemple, Skype, Xbox, Outlook.com) .

Sélectionnez Inscrire pour créer l’application.

Copiez et enregistrez l’ID d’application (client) et les valeurs d’ID d’annuaire (locataire) pour une utilisation ultérieure. Nous allons stocker ces valeurs dans la classe GraphService dans la section suivante.

Sous Gérer, sélectionnez Authentification.

Sélectionnez Ajouter une plateforme > mobile et des applications de bureau.

Dans la section URI de redirection, sélectionnez https://login.microsoftonline.com/common/oauth2/nativeclient et, dans les URI de redirection personnalisés, ajoutez https://localhost.

Sélectionnez Configurer.

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

Si l’autorisation User.Read Microsoft Graph n’est pas présente sous Autorisations configurées, sélectionnez Ajouter une autorisation. Dans l’écran Demander des autorisations d’API, sélectionnez autorisations d’application Microsoft Graph > et recherchez User.Read. Développez Utilisateur, sélectionnez User.Read, puis cliquez sur Ajouter des autorisations.

Intégrer le Kit de développement logiciel (SDK) Graph et l’identité Azure

Maintenant que votre application .NET MAUI s’exécute sur Windows et que vous avez configuré l’inscription de l’application dans Azure, nous allons ajouter quelques packages NuGet au projet pour l’intégrer à Azure Identity et Microsoft Graph.

Faites un clic droit sur le projet dans Explorateur de solutions, puis sélectionnez Gérer les packages NuGet... dans le menu contextuel.

Dans la fenêtre de Gestionnaire de package NuGet, sélectionnez l’onglet Parcourir et recherchez Azure.Identity :

Package Azure.Identity.

Ajoutez la dernière version stable du package Azure.Identity au projet en cliquant sur Installer.

Ensuite, recherchez Microsoft.Graph :

Package Microsoft.Graph.

Ajoutez la dernière version stable du package Microsoft.Graph au projet en cliquant sur Installer.

Fermez la fenêtre de Gestionnaire de package NuGet une fois le nouveau package installé.

Faites à nouveau un clic droit sur le projet, puis sélectionnez Ajouter | Classe dans le menu contextuel.

Dans la fenêtre Ajouter un nouvel élément qui s’affiche, nommez la classe GraphService , puis cliquez sur Ajouter :

Ajoutez la classe GraphService.

Ajoutez quatre membres privés à la GraphService classe, en remplaçant vos propres valeurs d’ID client et d’ID de locataire pour le texte de l’espace réservé :

private readonly string[] _scopes = new[] { "User.Read" };
private const string TenantId = "<add your tenant id here>";
private const string ClientId = "<add your client id here>";
private GraphServiceClient _client;

Ajoutez une Initialize() méthode à GraphService, qui sera appelée à partir du constructeur. Le code d’initialisation s’authentifie à l’aide de la InteractiveBrowserCredential classe. Une fois l’authentification réussie, le jeton d’authentification est fourni à la GraphServiceClient classe d’informations d’identification, ainsi que les étendues demandées (User.Read).

public GraphService()
{
    Initialize();
}

private void Initialize()
{
    // assume Windows for this sample
    if (OperatingSystem.IsWindows())
    {
        var options = new InteractiveBrowserCredentialOptions
        {
            TenantId = TenantId,
            ClientId = ClientId,
            AuthorityHost = AzureAuthorityHosts.AzurePublicCloud,
            RedirectUri = new Uri("https://localhost"),
        };

        InteractiveBrowserCredential interactiveCredential = new(options);
        _client = new GraphServiceClient(interactiveCredential, _scopes);
    }
    else 
    {
        // TODO: Add iOS/Android support
    }
}

Remarque

Actuellement, la méthode « Initialize() » prend uniquement en charge Windows. L’authentification sur iOS et Android nécessite un autre package NuGet (Microsoft.Identity.Client) et quelques étapes supplémentaires. Pour en savoir plus sur l’authentification mobile, consultez Configurer une application cliente native.

Ajoutez une méthode asynchrone publique nommée GetMyDetailsAsync() pour renvoyer l’objet User pour l’utilisateur authentifié :

public async Task<User> GetMyDetailsAsync()
{
    try
    {
        return await _client.Me.GetAsync();
    }
    catch (Exception ex)
    {
        Console.WriteLine($"Error loading user details: {ex}");
        return null;
    }
}

Deux using instructions seront nécessaires pour compiler le nouveau code ajouté à GraphService:

using Azure.Identity;
using Microsoft.Graph;
using Microsoft.Graph.Models;

Dans MainPage.xaml, ajoutez un x:Name à l’étiquette Hello, World ! :

<Label
    x:Name="HelloLabel"
    Text="Hello, World!"
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" />

Ajoutez un nouveau bouton à la page après l’obtention des informations de l’utilisateur à CounterBtn partir de Graph :

<Button
    x:Name="GetUserInfoBtn"
    Text="Load User Info"
    SemanticProperties.Hint="Loads user information from Microsoft Graph"
    Clicked="GetUserInfoBtn_Clicked"
    HorizontalOptions="Center" />

Dans MainPage.xaml.cs, ajoutez des variables privées pour GraphService et User:

private GraphService graphService;
private User user;

Ajoutez un gestionnaire d’événements pour l’événement Clicked que vous avez ajouté à GetUserInfoButton MainPage.xaml. Le gestionnaire d’événements crée une instance de GraphService si elle a la valeur Null et effectue l’appel pour extraire les données utilisateur. Le HelloLabeltexte du texte sera mis à jour pour dire bonjour à l’utilisateur, affichant la DisplayName propriété à partir de Microsoft Graph :

private async void GetUserInfoBtn_Clicked(object sender, EventArgs e)
{
    if (graphService == null)
    {
        graphService = new GraphService();
    }
    user = await graphService.GetMyDetailsAsync();
    HelloLabel.Text = $"Hello, {user.DisplayName}!";
}

Exécutez l’application et cliquez sur le bouton Charger les informations utilisateur :

Lancer l’application.

Lorsque la fenêtre Se connecter à votre compte s’affiche, sélectionnez un compte existant ou cliquez sur Utiliser un autre compte :

Sélectionnez un compte.

Si vous avez sélectionné un autre compte, entrez l’adresse e-mail et le mot de passe du compte et connectez-vous.

Une fois l’authentification terminée, le displayName de votre utilisateur s’affiche sur l’application :

Les informations utilisateur ont été chargées dans l’étiquette.

Mettre à jour l’interface utilisateur pour afficher les informations utilisateur

Maintenant que les GraphService informations utilisateur retournent, nous allons mettre à jour l’interface utilisateur pour afficher des informations de profil utilisateur supplémentaires.

Dans MainPage.xaml, commencez par mettre à jour le contenu du VerticalStackLayoutfichier , en supprimant l’étiquette et Image le contrôle d’accueil existants et en ajoutant quatre nouvelles étiquettes pour afficher les informations utilisateur. Chaque étiquette qui sera mise à jour est nommée et nous avons fourni du texte d’espace réservé jusqu’à ce que les données soient chargées à partir de la requête Graph. Le contenu du VerticalStackLayout fichier doit maintenant ressembler à ceci :

<VerticalStackLayout
    Spacing="25"
    Padding="30,0"
    VerticalOptions="Center">

    <Label
        x:Name="HelloLabel"
        Text="Hello, World!"
        SemanticProperties.Description="Displays a welcome message for the user"
        SemanticProperties.HeadingLevel="Level1"
        FontSize="32"
        HorizontalOptions="Center" />

    <Button
        x:Name="CounterBtn"
        Text="Click me"
        SemanticProperties.Hint="Counts the number of times you click"
        Clicked="CounterBtn_Clicked"
        HorizontalOptions="Center" />

    <Button
        Text="Load User Info"
        SemanticProperties.Hint="Loads user information from Microsoft Graph"
        Clicked="GetUserInfoBtn_Clicked"
        HorizontalOptions="Center" />

    <Label
        x:Name="DisplayNameLabel"
        Text="Display name"
        SemanticProperties.Description="Displays the user's display name from Microsoft Graph."
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />

    <Label
        x:Name="UserFirstNameLabel"
        Text="First name"
        SemanticProperties.Description="Displays the user's first name info from Microsoft Graph"
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />

    <Label
        x:Name="UserLastNameLabel"
        Text="Last name"
        SemanticProperties.Description="Displays the user's last name from Microsoft Graph"
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />

    <Label
        x:Name="UserPrincipalNameLabel"
        Text="User Principal Name"
        SemanticProperties.Description="Displays the user principal name from Microsoft Graph"
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />

</VerticalStackLayout>

Enfin, dans MainPage.xaml.cs, mettez à jour les éléments d’interface utilisateur avec les valeurs des nouvelles propriétés dans le GetUserInfoBtn_Clicked gestionnaire d’événements à l’aide des propriétés de l’objet Utilisateur Graph :

private async void GetUserInfoBtn_Clicked(object sender, EventArgs e)
{
    if (graphService == null)
    {
        graphService = new GraphService();
    }
    user = await graphService.GetMyDetailsAsync();
    HelloLabel.Text = $"Hello, {user.DisplayName}!";

    DisplayNameLabel.Text = user.DisplayName;
    UserFirstNameLabel.Text = user.GivenName;
    UserLastNameLabel.Text = user.Surname;
    UserPrincipalNameLabel.Text = user.UserPrincipalName;
}

Réexécutez l’application, puis cliquez sur le bouton Charger les informations utilisateur. Vous devez voir vos informations utilisateur affichées dans l’application après l’authentification :

Des informations utilisateur supplémentaires ont été chargées dans les étiquettes.

Pour savoir comment installer et bien démarrer avec le Kit de développement logiciel (SDK) Microsoft Graph dans vos applications .NET MAUI, consultez Installer le Kit de développement logiciel (SDK) Microsoft Graph .NET.

Étapes suivantes

Passez à l’article suivant pour savoir comment…

Créer une application de recommandation avec .NET MAUI et ChatGPT

Voir aussi

Ressources pour l’apprentissage de .NET MAUI

Vue d’ensemble du Kit de développement logiciel (SDK) Microsoft Graph

Configurer une application cliente native

Vue d’ensemble de l’API gestion des identités et des accès Azure AD