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

Article
07/13/2023

Obtenez des informations pratiques 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 de Microsoft Graph

Prérequis

Compte Azure avec un abonnement actif. Créez un compte gratuitement.
Configuration requise pour l’installation de .NET MAUI.
Si vous débutez avec .NET MAUI sur Windows, vous devez commencer par le tutoriel Créer votre première application MAUI .NET pour Windows .

Configuration de l’environnement

Si vous n’avez pas encore configuré votre environnement pour le développement .NET MAUI, suivez les étapes de Prise en main de .NET MAUI sur Windows.

Création du projet MAUI .NET

Notes

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

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

Créez un 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 d’application .NET MAUI , puis cliquez sur le bouton 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 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 requise 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 les valeurs d’ID d’application (client) et d’ID de répertoire (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 > Applications mobiles et de bureau.

Dans la section URI de redirection , sélectionnez https://login.microsoftonline.com/common/oauth2/nativeclient et dans 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 autorisationsd’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 Azure Identity

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.

Cliquez avec le bouton droit sur le projet dans Explorateur de solutions et sélectionnez Gérer les packages NuGet... dans le menu contextuel.

Dans la fenêtre 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 Gestionnaire de package NuGet une fois l’installation du nouveau package terminée.

Cliquez à nouveau avec le bouton droit sur le projet, puis sélectionnez Ajouter | Classe à partir du menu contextuel.

Dans la fenêtre Ajouter un nouvel élément qui s’affiche, nommez la classe GraphService et 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 par 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 à par GraphServiceClient la classe d’informations d’identification avec 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
    }
}

Notes

La méthode « Initialize() » prend actuellement 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 de 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’existant CounterBtn pour obtenir les informations utilisateur 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 à for GraphService et User:

private GraphService graphService;
private User user;

Ajoutez un gestionnaire d’événements pour l’événement Clicked que vous avez ajouté au GetUserInfoButton sur MainPage.xaml. Le gestionnaire d’événements crée une instance de GraphService si elle est null et effectue l’appel pour extraire les données utilisateur. Le HelloLabeltexte de sera mis à jour pour dire bonjour à l’utilisateur, en affichant la DisplayName propriété 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, puis connectez-vous.

Une fois l’authentification terminée, vous verrez le DisplayName de votre utilisateur dans l’application :

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

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

Maintenant que le GraphService retourne des informations utilisateur, mettons à jour l’interface utilisateur pour afficher d’autres informations de profil utilisateur.

Dans MainPage.xaml, commencez par mettre à jour le contenu du VerticalStackLayout, 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 de VerticalStackLayout 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 et 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 prendre en main le Kit de développement logiciel (SDK) Microsoft Graph dans vos applications .NET MAUI, consultez Installer le Kit de développement logiciel (SDK) .NET Microsoft Graph.