Lernprogramm: Erstellen einer .NET MAUI-App mit dem Microsoft Graph SDK

Artikel
02/04/2025

Erhalten Sie praktische Erfahrungen mit .NET MAUI, indem Sie eine plattformübergreifende App unter Windows erstellen, die das Microsoft Graph SDK- zum Anzeigen von Benutzerdaten nutzt.

In diesem Lernprogramm erfahren Sie, wie Sie:

Einrichten Ihrer Umgebung für die .NET MAUI-Entwicklung und Erstellen eines .NET MAUI-Projekts
Registrieren Ihrer Client-App in Azure
Integrieren mit Azure Identity und Microsoft Graph SDK
Aktualisieren Sie die Benutzeroberfläche, um Benutzerinformationen aus Microsoft Graph anzuzeigen.

Voraussetzungen

Ein Azure-Konto mit einem aktiven Abonnement. Erstellen Sie ein kostenloses Konto.
Die .NET MAUI Installationsanforderungen.
Wenn Sie neu bei .NET MAUI unter Windows sind, sollten Sie mit dem Tutorial Erstellen Ihrer ersten .NET MAUI-App für Windows beginnen.

Einrichten der Umgebung

Wenn Sie Ihre Umgebung noch nicht für die .NET MAUI-Entwicklung eingerichtet haben, folgen Sie den Schritten zu Erste Schritte mit .NET MAUI auf Windows.

Erstellen des .NET MAUI-Projekts

Anmerkung

Wenn Sie bereits mit dem Einrichten eines .NET MAUI-Projekts vertraut sind, können Sie zum Abschnitt Registrieren Ihres Clients in Azure wechseln.

Starten Sie Visual Studio, und klicken Sie im Startfenster auf Erstellen eines neuen Projekts, um ein neues Projekt zu erstellen:

Erstellen eines neuen Projekts.

Wählen Sie im Fenster Erstellen eines neuen Projekts im Dropdownmenü "Alle Projekttypen" MAUI- aus, wählen Sie die Vorlage .NET MAUI App aus, und klicken Sie auf die Schaltfläche Weiter:

.NET MAUI App-Vorlage.

Geben Sie ihrem Projekt im Fenster Konfigurieren Des neuen Projekts einen Namen, wählen Sie einen Speicherort dafür aus, und klicken Sie auf die Schaltfläche Weiter:

benennen Sie das neue Projekt.

Klicken Sie im Fenster Zusätzliche Informationen auf den Button Erstellen:

Neues Projekt erstellen.

Warten Sie, bis das Projekt erstellt wurde, und warten Sie, bis die Abhängigkeiten wiederhergestellt werden:

Projekt wurde erstellt.

Drücken Sie auf der Visual Studio-Symbolleiste die Schaltfläche Windows-Computer, um die App zu erstellen und auszuführen. Klicken Sie auf die Schaltfläche Klick mich an und überprüfen Sie, ob der Inhalt der Schaltfläche mit der Anzahl der Klicks aktualisiert wird.

Nachdem Sie nun überprüft haben, ob die .NET MAUI-App unter Windows erwartungsgemäß funktioniert, können wir das Graph SDK integrieren. Im nächsten Abschnitt fügen Sie die pakete hinzu, die zum Authentifizieren und Tätigen von Aufrufen an Microsoft Graph erforderlich sind.

Registrieren Ihres Clients in Azure

Eine App-Registrierung in Azure mit dem User.Read Bereich, der der App zugewiesen ist, ist erforderlich, um Benutzerdaten aus Microsoft Graph zu lesen. Führen Sie die folgenden Schritte aus, um Ihre Anwendung zu registrieren:

Melden Sie sich beim Azure-Portalan.

Wenn Sie Zugriff auf mehrere Mandanten haben, verwenden Sie die Verzeichnisse + Abonnements Filter im oberen Menü, um zum Mandanten zu wechseln, in dem Sie die Anwendung registrieren möchten.

Suchen Sie nach Azure Active Directory, und wählen Sie diese Option aus.

Wählen Sie unter Verwalten Folgendes aus: App-Registrierungen > Neue Registrierung.

Geben Sie unter Name einen Namen für Ihre Anwendung ein (beispielsweise Win-App-calling-MsGraph). Benutzer Ihrer App sehen diesen Namen möglicherweise, und Sie können ihn später ändern.

Wählen Sie im Abschnitt "Unterstützte Kontotypen" "Konten" in einem beliebigen Organisationsverzeichnis und persönlichen Microsoft-Konten (z. B. Skype, Xbox, Outlook.com) aus.

Wählen Sie "Registrieren" aus, um die Anwendung zu erstellen.

Kopieren und speichern Sie die Werte der Anwendungs-ID (Client-ID) und der Verzeichnis-ID (Mandanten-ID) für die spätere Verwendung. Diese Werte werden in der GraphService-Klasse im nächsten Abschnitt gespeichert.

Wählen Sie unter Verwalten die Option Authentifizierung aus.

Wählen Sie Eine Plattform hinzufügen > Mobilgerät- und Desktopanwendungen aus.

Wählen Sie im Bereich Umleitungs-URIs https://login.microsoftonline.com/common/oauth2/nativeclient aus, und fügen Sie in Benutzerdefinierte Umleitungs-URIs http://localhost hinzu.

Wählen Sie Konfigurierenaus.

Wählen Sie unter Verwalten die Option API-Berechtigungen.

Wenn die Microsoft Graph-Berechtigung User.Read unter Konfigurierte Berechtigungen nicht vorhanden ist, wählen Sie Eine Berechtigung hinzufügen aus. Wählen Sie auf dem Bildschirm API-Berechtigungen anfordernMicrosoft Graph > Anwendungsberechtigungen aus, und suchen Sie nach User.Read. Erweitern Sie den Bereich Benutzer, wählen Sie User.Read aus, und klicken Sie auf Berechtigungen hinzufügen.

Integrieren des Graph SDK und Azure Identity

Nachdem Sie ihre .NET MAUI-App unter Windows ausgeführt haben und die App-Registrierung in Azure konfiguriert haben, fügen wir dem Projekt ein paar NuGet-Pakete hinzu, um sie in Azure Identity und Microsoft Graph zu integrieren.

Klicken Sie im Projektmappen- Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie NuGet-Pakete verwalten... aus dem Kontextmenü aus.

Wählen Sie im Fenster NuGet-Paket-Manager die Registerkarte Durchsuchen aus und suchen Sie nach Azure.Identity.

Azure.Identity-Paket.

Fügen Sie dem Projekt die neueste stabile Version des Azure.Identity-Pakets hinzu, indem Sie auf Installierenklicken.

Suchen Sie als Nächstes nach Microsoft.Graph:

Microsoft.Graph-Paket.

Fügen Sie die neueste stabile Version des Microsoft.Graph--Pakets zum Projekt hinzu, indem Sie auf Installierenklicken.

Schließen Sie den NuGet-Paket-Manager Fenster, nachdem das neue Paket die Installation abgeschlossen hat.

Klicken Sie erneut mit der rechten Maustaste auf das Projekt, und wählen Sie Hinzufügen | aus. Klasse aus dem Kontextmenü.

Geben Sie im angezeigten Fenster "Neues Element hinzufügen" die Klasse GraphService ein, und klicken Sie auf Hinzufügen:

Füge GraphService-Klasse hinzu.

Fügen Sie der GraphService-Klasse vier private Member hinzu und ersetzen Sie den Platzhaltertext durch Ihre eigene Client-ID und Mandanten-ID.

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;

Fügen Sie eine Initialize() Methode zu GraphServicehinzu, die vom Konstruktor aufgerufen wird. Der Initialisierungscode authentifiziert sich mithilfe der InteractiveBrowserCredential Klasse. Nach erfolgreicher Authentifizierung stellt die Anmeldeinformationsklasse dem GraphServiceClient das Authentifizierungstoken und die angeforderten Geltungsbereiche (User.Read) bereit.

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("http://localhost"),
        };

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

Anmerkung

Die Methode "Initialize()" unterstützt derzeit nur Windows. Für die Authentifizierung unter iOS und Android ist ein anderes NuGet-Paket (Microsoft.Identity.Client) und einige zusätzliche Schritte erforderlich. Weitere Informationen zur mobilen Authentifizierung finden Sie unter Konfigurieren einer systemeigenen Clientanwendung.

Fügen Sie eine öffentliche asynchrone Methode namens GetMyDetailsAsync() hinzu, um das User-Objekt für den authentifizierten Benutzer zurückzugeben:

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

Es werden zwei using Anweisungen benötigt, um den neuen Code zu kompilieren, der GraphServicehinzugefügt wurde:

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

Fügen Sie in MainPage.xaml einen x:Name zur Hello, World!-Bezeichnung hinzu.

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

Fügen Sie der Seite nach dem vorhandenen CounterBtn eine neue Schaltfläche hinzu, um die Benutzerinformationen aus Graph abzurufen:

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

Fügen Sie in MainPage.xaml.csprivate Variablen für GraphService und Userhinzu:

private GraphService graphService;
private User user;

Fügen Sie dem Ereignis Clicked, das Sie GetUserInfoButton auf MainPage.xaml hinzugefügt haben, einen Ereignishandler hinzu. Der Ereignishandler erstellt eine Instanz von GraphService, wenn sie null ist, und ruft den Aufruf, um die Benutzerdaten abzurufen. Der Text des HelloLabelwird aktualisiert, um dem Benutzer hallo zu sagen, und zeigt die DisplayName-Eigenschaft von Microsoft Graph an:

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

Führen Sie die App aus, und klicken Sie auf die Schaltfläche Benutzerinformationen laden:

Starten der App.

Wenn das Fenster Bei Ihrem Konto anmelden angezeigt wird, wählen Sie ein vorhandenes Konto aus, oder klicken Sie auf Ein anderes Konto verwenden:

Wählen Sie ein Konto aus.

Wenn Sie ein anderes Konto ausgewählt haben, geben Sie die E-Mail-Adresse und das Kennwort für das Konto ein, und melden Sie sich an.

Nach Abschluss der Authentifizierung wird der DisplayName des Benutzers in der App angezeigt.

Benutzerinformationen wurden in das Label geladen.

Aktualisieren der Benutzeroberfläche zum Anzeigen von Benutzerinformationen

Nachdem nun die GraphService Benutzerinformationen zurückgibt, aktualisieren wir die Benutzeroberfläche so, dass einige zusätzliche Benutzerprofilinformationen angezeigt werden.

Beginnen Sie in "MainPage.xaml", indem Sie den Inhalt von VerticalStackLayoutaktualisieren: entfernen Sie die vorhandene Willkommensbeschriftung und die Steuerung Image, und fügen Sie vier neue Beschriftungen hinzu, um die Benutzerinformationen anzuzeigen. Jede Bezeichnung, die aktualisiert wird, wird benannt, und wir haben Platzhaltertext bereitgestellt, bis die Daten aus der Graph-Abfrage geladen werden. Der Inhalt der VerticalStackLayout sollte nun wie folgt aussehen:

<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>

Aktualisieren Sie schlussendlich in MainPage.xaml.cs die UI-Elemente mit den Werten der neuen Eigenschaften im GetUserInfoBtn_Clicked-Ereignishandler. Verwenden Sie hierzu die Eigenschaften des Graph User-Objekts:

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;
}

Führen Sie die App erneut aus, und klicken Sie auf die Schaltfläche Laden von Benutzerinformationen. Nach der Authentifizierung sollten Ihre Benutzerinformationen in der App angezeigt werden:

Zusätzliche Informationen zum Benutzer wurden in Labels geladen.

Informationen dazu, wie Sie das Microsoft Graph SDK in Ihren .NET MAUI-Apps installieren und mit der Arbeit beginnen, finden Sie unter Installieren des Microsoft Graph .NET SDK.