Lernprogramm: Erstellen einer .NET MAUI-Shell-App

Gilt für: Mitarbeitermandanten Externe Mandanten (weitere Informationen)

Dieses Lernprogramm ist Teil 1 einer Reihe, die veranschaulicht, wie Sie eine .NET Multi-Platform App UI (.NET MAUI)-Shell-App erstellen und sie mithilfe des Microsoft Entra Admin Centers für die Authentifizierung vorbereiten. In diesem Tutorial fügen Sie ein benutzerdefiniertes Microsoft Authentication Library (MSAL)-Client-Hilfsprogramm hinzu, um das MSAL SDK zu initialisieren, erforderliche Bibliotheken zu installieren und eine Bildressource hinzuzufügen.

In diesem Tutorial führen Sie Folgendes durch:

• Erstellen Sie eine .NET MAUI-Shell-App.
• Hinzufügen von MSAL SDK-Unterstützung mithilfe von MSAL-Hilfsklassen.
• Installieren Sie erforderliche Pakete.
• Hinzufügen einer Bildressource.

Voraussetzungen

• Registrieren Sie eine neue Clientweb-App im Microsoft Entra Admin Center, die für Konten in einem beliebigen Organisationsverzeichnis und persönlichen Microsoft-Konten konfiguriert ist. Weitere Informationen finden Sie unter Registrieren einer Anwendung . Notieren Sie die folgenden Werte auf der Anwendungsübersichtsseite für die spätere Verwendung:
  • Anwendungs-ID (Client)
  • Verzeichnis-ID (Mandant)
• Fügen Sie die folgenden Umleitungs-URIs mithilfe der Plattformkonfiguration für Mobile- und Desktopanwendungen hinzu . Weitere Informationen finden Sie unter Hinzufügen eines Umleitungs-URI in Ihrer Anwendung .
  • Umleitungs-URI: msal{client_id}://auth Dabei {client_id} handelt es sich um die Anwendungs-ID (Client-ID) Ihrer App.
• .NET SDK
• Visual Studio 2022 mit installierter MAUI-Workload:
  • Anweisungen für das Visual Studio-Setup

Erstellen der .NET MAUI-Shell-App

1. Wählen Sie im Startfenster von Visual Studio 2022 "Neues Projekt erstellen" aus.
2. 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 und dann Weiter aus.
3. Im Fenster " Neues Projekt konfigurieren " muss der Projektname auf "SignInMaui" festgelegt sein. Aktualisieren Sie den Projektmappennamen auf sign-in-maui, und wählen Sie Weiter aus.
4. Wählen Sie im Fenster Zusätzliche Informationen das neueste .NET SDK und dann Erstellen aus.

Warten Sie, bis das Projekt erstellt wurde und seine Abhängigkeiten wiederhergestellt sind.

Hinzufügen von MSAL SDK-Unterstützung mithilfe von MSAL-Hilfsklassen

MSAL-Client ermöglicht Entwicklern das Abrufen von Sicherheitstoken von einem externen Mandanten, um gesicherte Web-APIs zu authentifizieren und darauf zuzugreifen. In diesem Abschnitt laden Sie Dateien herunter, aus denen MSALClient besteht.

Laden Sie die folgenden Dateien in einen Ordner auf Ihrem Computer herunter:

• AzureAdConfig.cs – Diese Datei ruft die eindeutigen Bezeichner der Microsoft Entra-App aus Ihrer App-Konfigurationsdatei ab und legt sie fest.
• DownStreamApiConfig.cs – Diese Datei ruft die Bereiche für den Microsoft Graph-Aufruf ab und legt sie fest.
• DownstreamApiHelper.cs – Diese Datei behandelt die Ausnahmen, die beim Aufrufen der downstream-API auftreten.
• Exception.cs – Diese Datei bietet einige Erweiterungsmethoden zum Auslösen und Verarbeiten von Ausnahmen.
• IdentityLogger.cs – Diese Datei behandelt, wie MSAL.NET Protokollierung verwendet wird.
• MSALClientHelper.cs – Diese Datei enthält Methoden zum Initialisieren des MSAL SDK.
• PlatformConfig.cs – Diese Datei enthält Methoden zum Behandeln bestimmter Plattformen. Beispiel: Windows.
• PublicClientSingleton.cs – Diese Datei enthält eine Singletonimplementierung, um den MSALClient und die zugehörigen Klassen zu umschließen, um das statische Initialisierungsmodell für Plattformen zu unterstützen.
• WindowsHelper.cs – Diese Datei enthält Methoden zum Abrufen des Fensterhandles.

Von Bedeutung

Überspringen Sie das Herunterladen der MSALClient-Dateien nicht, sie werden für dieses Lernprogramm benötigt.

Verschieben der MSALClient-Dateien mit Visual Studio

1. Klicken Sie im Projektmappen-Explorer-Bereich mit der rechten Maustaste auf das Projekt "SignInMaui", und wählen Sie "Neuen Ordner>" aus. Nennen Sie den Ordner "MSALClient".
2. Klicken Sie mit der rechten Maustaste auf den Ordner MSALClient, und wählen Sie Hinzufügen>Vorhandenes Element aus.
3. Navigieren Sie zu dem Ordner, der die heruntergeladenen MSALClient-Dateien enthält, die Sie zuvor heruntergeladen haben.
4. Markieren Sie alle MSALClient-Dateien, die Sie heruntergeladen haben, und wählen Sie dann Hinzufügen aus.

Installieren Sie die erforderlichen Pakete

Sie müssen die folgenden Pakete installieren:

• Microsoft.Identity.Client – Dieses Paket enthält die Binärdateien der Microsoft-Authentifizierungsbibliothek für .NET (MSAL.NET).
• Microsoft.Extensions.Configuration.Json: Dieses Paket enthält die Implementierung des JSON-Konfigurationsanbieters für Microsoft.Extensions.Configuration.
• Microsoft.Extensions.Configuration.Binder: Dieses Paket enthält Funktionen zum Binden eines Objekts an Daten in Konfigurationsanbietern für Microsoft.Extensions.Configuration.
• Microsoft.Extensions.Configuration.Abstractions: Dieses Paket enthält Abstraktionen der auf Schlüssel-Wert-Paaren basierenden Konfiguration.
• Microsoft.Identity.Client.Extensions.Msal – Dieses Paket enthält Erweiterungen der Microsoft-Authentifizierungsbibliothek für .NET (MSAL.NET).

NuGet-Paket-Manager

Führen Sie die folgenden Schritte aus, um den NuGet-Paket-Manager zum Installieren des Microsoft.Identity.Client-Pakets in Visual Studio zu verwenden:

1. Wählen Sie "Tools>NuGet Package Manager>Manage NuGet Packages for Solution..." aus.
2. Suchen Sie auf der Registerkarte Durchsuchen nach Microsoft.Identity.Client.
3. Wählen Sie "Microsoft.Identity.Client " in der Liste aus.
4. Wählen Sie im Listenbereich Projekt das Projekt SignInMaui aus.
5. Wählen Sie "Installieren" aus.
6. Wenn Sie aufgefordert werden, die Installation zu überprüfen, wählen Sie "OK" aus.

Wiederholen Sie den Vorgang, um die verbleibenden erforderlichen Pakete zu installieren.

Bildressource hinzufügen

In diesem Abschnitt laden Sie ein Bild herunter, das Sie in Ihrer App verwenden, um die Interaktion der Benutzer zu verbessern.

Laden Sie die folgende Abbildung herunter:

• Symbol: Microsoft Entra ID – Dieses Bild wird als Symbol auf der Hauptseite verwendet.

Verschieben des Bilds mit Visual Studio

1. Erweitern Sie im Bereich Projektmappen-Explorer von Visual Studio den Ordner Ressourcen. Daraufhin wird der Ordner Bilder angezeigt.
2. Klicken Sie mit der rechten Maustaste auf Bilder, und wählen Sie "Vorhandenes Element>..." aus.
3. Navigieren Sie zu dem Ordner, der die heruntergeladenen Bilder enthält.
4. Ändern Sie den Filter zu Dateitypfilter in Bilddateien.
5. Wählen Sie das heruntergeladene Bild aus.
6. Wählen Sie "Hinzufügen" aus.

Nächster Schritt

Teil 3: Tutorial: Anmelden von Benutzern bei der .NET MAUI-Shell-App mithilfe eines externen Mandanten