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

Artikel
07/13/2023

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

In diesem Tutorial lernen Sie Folgendes:

Einrichten Ihrer Umgebung für die .NET MAUI-Entwicklung und Erstellen eines .NET MAUI-Projekts
Registrieren Ihrer Client-App in Azure
Integration in Azure Identity und das Microsoft Graph SDK
Aktualisieren der Benutzeroberfläche zum Anzeigen von Benutzerinformationen aus Microsoft Graph

Voraussetzungen

Ein Azure-Konto mit einem aktiven Abonnement. Sie können kostenlos ein Konto erstellen.
Die .NET MAUI-Installationsanforderungen.
Wenn Sie noch nicht mit .NET MAUI unter Windows vertraut 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, führen Sie die Schritte unter Erste Schritte mit .NET MAUI unter Windows aus.

Erstellen des .NET MAUI-Projekts

Hinweis

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

Starten Sie Visual Studio, und klicken Sie im Startfenster auf Neues Projekt erstellen , um ein neues Projekt zu erstellen:

Erstellen Sie ein neues Projekt.

Wählen Sie im Fenster Neues Projekt erstellen in der Dropdownliste Alle Projekttypen die Option MAUI aus, wählen Sie die Vorlage .NET MAUI-App aus, und klicken Sie auf weiter:

.NET MAUI-App-Vorlage.

Geben Sie im Fenster Neues Projekt konfigurieren ihrem Projekt 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 die Schaltfläche Erstellen :

Erstellen Sie ein neues Projekt.

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

Das Projekt wird erstellt.

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

Nachdem Sie sich nun vergewissert haben, dass die .NET MAUI-App unter Windows wie erwartet funktioniert, können wir das Graph SDK integrieren. Im nächsten Abschnitt fügen Sie die Pakete hinzu, die für die Authentifizierung und für Aufrufe an Microsoft Graph erforderlich sind.

Registrieren Ihres Clients in Azure

Zum Lesen von Benutzerdaten aus Microsoft Graph ist eine App-Registrierung in Azure mit dem Der App gewährten Bereich User.Read erforderlich. Führen Sie die folgenden Schritte aus, um Ihre Anwendung zu registrieren:

Melden Sie sich beim Azure-Portal an.

Wenn Sie Zugriff auf mehrere Mandanten haben, verwenden Sie den Filter Verzeichnisse + Abonnements im oberen Menü, um zu dem Mandanten zu wechseln, bei 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). Benutzern Ihrer App wird wahrscheinlich dieser Namen angezeigt. Sie können ihn später ändern.

Wählen Sie im Abschnitt Unterstützte Kontotypen die Option Konten in allen Organisationsverzeichnissen und persönliche Microsoft-Konten (z.B. Skype, Xbox, Outlook.com) aus.

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

Kopieren Sie die Werte der Anwendungs-ID (Client) und der Verzeichnis-ID (Mandant) zur späteren Verwendung, und speichern Sie sie. Diese Werte werden im nächsten Abschnitt in der GraphService-Klasse gespeichert.

Wählen Sie unter Verwalten die Option Authentifizierung aus.

Wählen Sie Plattform > hinzufügen Mobile und Desktopanwendungen aus.

Wählen Sie im Abschnitt Umleitungs-URIs die Option aus, und fügen Sie https://login.microsoftonline.com/common/oauth2/nativeclient unter Benutzerdefinierte Umleitungs-URIs hinzu https://localhost.

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 Berechtigung hinzufügen aus. Wählen Sie auf dem Bildschirm API-Berechtigungen anfordern die Option Microsoft Graph-Anwendungsberechtigungen > aus, und suchen Sie nach User.Read. Erweitern Sie Benutzer, wählen Sie User.Read aus, und klicken Sie auf Berechtigungen hinzufügen.

Integrieren des Graph SDK und der Azure Identity

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

Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie im Kontextmenü NuGet-Pakete verwalten... 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 Installieren klicken.

Suchen Sie als Nächstes nach Microsoft.Graph:

Microsoft.Graph-Paket.

Fügen Sie dem Projekt die neueste stabile Version des Microsoft.Graph-Pakets hinzu, indem Sie auf Installieren klicken.

Schließen Sie das Fenster NuGet-Paket-Manager , nachdem die Installation des neuen Pakets abgeschlossen wurde.

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

Benennen Sie im daraufhin angezeigten Fenster Neues Element hinzufügen die Klasse GraphService , und klicken Sie auf Hinzufügen:

Fügen Sie die GraphService-Klasse hinzu.

Fügen Sie der GraphService Klasse vier private Member hinzu, und ersetzen Sie dabei Ihre eigenen Client-ID - und Mandanten-ID-Werte durch den Platzhaltertext:

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 hinzu GraphService, die vom Konstruktor aufgerufen wird. Der Initialisierungscode wird mithilfe der InteractiveBrowserCredential -Klasse authentifiziert. Nach erfolgreicher Authentifizierung wird das Authentifizierungstoken zusammen mit den angeforderten Bereichen (User.Read) von der Anmeldeinformationsklasse bereitgestelltGraphServiceClient.

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

Hinweis

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

Fügen Sie eine öffentliche asynchrone Methode namens hinzu GetMyDetailsAsync() , 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;
    }
}

Zwei using Anweisungen sind erforderlich, um den neuen Code zu kompilieren, der hinzugefügt wurde GraphService:

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

Fügen Sie in MainPage.xaml der Bezeichnung Hello, World! eine x:Name hinzu:

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

Fügen Sie der Seite nach der vorhandenen CounterBtn eine neue Schaltfläche hinzu, um die Benutzerinformationen von 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.cs" private Variablen für GraphService und Userhinzu:

private GraphService graphService;
private User user;

Fügen Sie einen Ereignishandler für das Clicked Ereignis hinzu, das Sie der GetUserInfoButton - Datei "MainPage.xaml" hinzugefügt haben. Der Ereignishandler erstellt eine instance, GraphService wenn null ist, und führt den Aufruf aus, um die Benutzerdaten abzurufen. Der HelloLabelText des -Objekts wird aktualisiert, um dem Benutzer Hallo zu sagen und die DisplayName -Eigenschaft von Microsoft Graph anzuzeigen:

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 Sie die App.

Wenn das Fenster Bei Ihrem Konto anmelden angezeigt wird, wählen Sie ein vorhandenes Konto aus, oder klicken Sie auf 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 Ihres Benutzers in der App angezeigt:

Benutzerinformationen wurden in der Bezeichnung geladen.

Aktualisieren der Benutzeroberfläche zum Anzeigen von Benutzerinformationen

Nachdem nun GraphService Benutzerinformationen zurückgegeben werden, aktualisieren wir die Benutzeroberfläche, um einige zusätzliche Benutzerprofilinformationen anzuzeigen.

Beginnen Sie in MainPage.xaml, indem Sie den Inhalt von VerticalStackLayoutaktualisieren, die vorhandene Willkommensbezeichnung und das -Steuerelement entfernen und Image vier neue Bezeichnungen hinzufügen, um die Benutzerinformationen anzuzeigen. Jede Bezeichnung, die aktualisiert wird, hat einen Namen, und wir haben Platzhaltertext bereitgestellt, bis die Daten aus der Graph-Abfrage geladen werden. Der Inhalt des 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 schließlich in MainPage.xaml.cs die UI-Elemente mit den Werten der neuen Eigenschaften im GetUserInfoBtn_Clicked Ereignishandler, indem Sie die Eigenschaften des Graph User-Objekts verwenden:

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 Benutzerinformationen laden . Nach der Authentifizierung sollten Ihre Benutzerinformationen in der App angezeigt werden:

Zusätzliche Benutzerinformationen wurden in Bezeichnungen geladen.

Informationen zum Installieren und Einstieg in das Microsoft Graph SDK in Ihren .NET MAUI-Apps finden Sie unter Installieren des Microsoft Graph .NET SDK.