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

Artikel
07/05/2024

Nutzen Sie .NET MAUI praktisch, 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 mit .NET MAUI unter Windows noch nicht 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 aus, um mit .NET MAUI unter Windows zu beginnen.

Erstellen des .NET MAUI-Projekts

Hinweis

Wenn Sie bereits mit der Einrichtung eines .NET MAUI-Projekts vertraut sind, können Sie zum Abschnitt "Registrieren Ihres Clients in Azure " springen.

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 im Dropdownmenü „Alle Projekttypen“ die Option MAUI aus, wählen Sie die .NET MAUI-App-Vorlage aus, und klicken Sie auf die Schaltfläche Weiter:

.NET MAUI App-Vorlage.

Geben Sie ihrem Projekt im Fenster "Neues Projekt konfigurieren" 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 ":

Neues Projekt erstellen.

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

Projekt wird erstellt.

Drücken Sie auf der Visual Studio-Symbolleiste die Windows Machine-Schaltfläche, 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 Bereich "User.Read", der der App gewährt wird, 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-Portal an.

Wenn Sie Zugriff auf mehrere Mandanten haben, verwenden Sie den Filter "Verzeichnisse + Abonnements " 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). 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 und speichern Sie die Anwendungs-ID (Client-ID ) und die 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 "Plattform > für Mobile- und Desktopanwendungen hinzufügen" aus.

Wählen Sie im Abschnitt "Umleitungs-URIs" aus, und fügen Sie https://localhosthttps://login.microsoftonline.com/common/oauth2/nativeclient in benutzerdefinierte Umleitungs-URIs hinzu.

Wählen Sie Konfigurierenaus.

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

Wenn die Microsoft Graph User.Read-Berechtigung unter "Konfigurierte Berechtigungen" nicht vorhanden ist, wählen Sie "Berechtigung hinzufügen" aus. Wählen Sie im Bildschirm "Api-Berechtigungen anfordern" die Berechtigungen der Microsoft Graph-Anwendung > 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 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 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 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 | Klasse aus dem Kontextmenü.

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

Fügen Sie die GraphService-Klasse hinzu.

Fügen Sie der GraphService Klasse vier private Member hinzu, wobei Sie Ihre eigene Client-ID und Die Mandanten-ID für den Platzhaltertext ersetzen:

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 hinzu, der GraphServicevom Konstruktor aufgerufen wird. Der Initialisierungscode authentifiziert sich mithilfe der InteractiveBrowserCredential Klasse. Bei erfolgreicher Authentifizierung wird das Authentifizierungstoken der Anmeldeinformationsklasse zusammen mit den angeforderten Bereichen (User.Read) 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. 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 hinzu GetMyDetailsAsync() , mit der das User Objekt für den authentifizierten Benutzer zurückgegeben wird:

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 hinzugefügt GraphServicewurde:

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

Fügen Sie in "MainPage.xaml" der Bezeichnung "Hello, World!" einx:Name:

<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.cs private Variablen für GraphService undUser:

private GraphService graphService;
private User user;

Fügen Sie einen Ereignishandler für das Clicked Ereignis hinzu, das Sie zu "GetUserInfoButtonMainPage.xaml" hinzugefügt haben. Der Ereignishandler erstellt eine Instanz davon GraphService , ob er null ist, und ruft den Aufruf ab, um die Benutzerdaten abzurufen. Der HelloLabelText des Texts wird aktualisiert, um dem Benutzer hallo zu sagen, wobei die DisplayName Eigenschaft von Microsoft Graph angezeigt wird:

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

Auswahl einer Firma.

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 die Bezeichnung geladen.

Aktualisieren der Benutzeroberfläche zum Anzeigen von Benutzerinformationen

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

Beginnen Sie in "MainPage.xaml", indem Sie den Inhalt der VerticalStackLayoutDatei aktualisieren, die vorhandene Willkommensbezeichnung und das vorhandene Willkommenssteuerelement entfernen und Image vier neue Bezeichnungen hinzufügen, 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 des VerticalStackLayout Inhalts sollte jetzt 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 in MainPage.xaml.cs die UI-Elemente mit den Werten der neuen Eigenschaften im GetUserInfoBtn_Clicked Ereignishandler mithilfe der 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 "Benutzerinformationen laden". Nach der Authentifizierung sollten Ihre Benutzerinformationen in der App angezeigt werden:

Zusätzliche Benutzerinformationen wurden in Bezeichnungen geladen.

Informationen zum Installieren und Erste Schritte mit dem Microsoft Graph SDK in Ihren .NET MAUI-Apps finden Sie unter Installieren des Microsoft Graph .NET SDK.