Freigeben über

Tutorial: Anmelden von Benutzer und Benutzerinnen in der .NET MAUI-Shell-App mithilfe eines externen Mandanten

  • Artikel

Dieses Tutorial ist der letzte Teil einer Reihe, in der das Erstellen einer .NET MAUI-Shell-App (Multi-Platform App UI) und ihre Vorbereitung für die Authentifizierung mithilfe des Microsoft Entra Admin Centers veranschaulicht wird. In Teil 2 dieser Serie haben Sie ein benutzerdefiniertes MSAL-Clienthilfsprogramm (Microsoft Authentication Library, Microsoft-Authentifizierungsbibliothek) hinzugefügt, um das MSAL SDK zu initialisieren, erforderliche Bibliotheken zu installieren und eine Bildressource einzuschließen. In diesem letzten Schritt wird veranschaulicht, wie Sie An- und Abmeldecode in .NET MAUI hinzufügen und die Shell-App auf der Android-Plattform ausführen.

In diesem Tutorial gehen Sie wie folgt vor:

  • Hinzufügen von An- und Abmeldecode.
  • Ändern der App-Shell.
  • Hinzufügen von plattformspezifischem Code.
  • Hinzufügen von App-Einstellungen.
  • Ausführen und Testen der .NET MAUI-Shell-App.

Voraussetzungen

Hinzufügen von An- und Abmeldecode

Die Benutzeroberfläche (UI) einer .NET MAUI-App besteht aus Objekten, die den nativen Steuerelementen jeder Zielplattform zugeordnet sind. Die Hauptsteuerelementgruppen, die zum Erstellen der Benutzeroberfläche einer .NET MAUI-App verwendet werden, sind Seiten, Layouts und Ansichten.

Hinzufügen der Hauptansichtsseite

In den nächsten Schritten wird unser Code so organisiert, dass main view definiert ist.

  1. Löschen Sie MainPage.xaml und MainPage.xaml.cs aus Ihrem Projekt, sie werden nicht mehr benötigt. Suchen Sie im Bereich Projektmappen-Explorer den Eintrag für MainPage.xaml, klicken Sie mit der rechten Maustaste darauf, und wählen Sie Löschen aus.

  2. Klicken Sie mit der rechten Maustaste auf das Projekt SignInMaui, und wählen Sie Hinzufügen>Neuer Ordner aus. Nennen Sie den Ordner Ansichten.

  3. Klicken Sie mit der rechten Maustaste auf die Ansichten.

  4. Wählen Sie Hinzufügen>Neues Element… aus.

  5. Wählen Sie in der Vorlagenliste .NET MAUI aus.

  6. Wählen Sie die Vorlage .NET MAUI ContentPage (XAML) aus. Nennen Sie die Datei MainView.xaml.

  7. Wählen Sie Hinzufügen.

  8. Die Datei MainView.xaml wird in einer neuen Dokumentregisterkarte geöffnet, in der das gesamte XAML-Markup angezeigt wird, das die Benutzeroberfläche der Seite darstellt. Ersetzen des XAML-Markups durch folgendes Markup:

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SignInMaui.Views.MainView"
             Title="Microsoft identity platform"
             >
    <Shell.BackButtonBehavior>
        <BackButtonBehavior IsVisible="False" IsEnabled="False" />
    </Shell.BackButtonBehavior>

    <ScrollView>
        <VerticalStackLayout 
            Spacing="25" 
            Padding="30,0" 
            VerticalOptions="Center">

            <Image
                Source="azure_active_directory.png"
                SemanticProperties.Description="Azure Active Directory Logo"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label 
                Text="Azure AD for Customers"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="26"
                HorizontalOptions="Center" />

            <Label 
                Text="MAUI sample"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="26"
                HorizontalOptions="Center" />

            <Button 
                x:Name="SignInButton"
                Text="Sign In"
                SemanticProperties.Hint="Sign In"
                Clicked="OnSignInClicked"
                HorizontalOptions="Center"
                IsEnabled="False"/>

        </VerticalStackLayout>
    </ScrollView>
 
</ContentPage>

  9. Speichern Sie die Datei .

    Lassen Sie uns die wichtigsten Teile der XAML-Steuerelemente auf der Seite aufgliedern:

    • <ContentPage> ist das Stammobjekt für die MainView-Klasse.
    • <VerticalStackLayout> ist das untergeordnete Objekt von ContentPage. Dieses Layoutsteuerelement ordnet seine untergeordneten Elemente vertikal nacheinander an.
    • <Image> zeigt ein Bild an, in diesem Fall wird azureactive_directory.png_ verwendet, das Sie zuvor heruntergeladen haben.
    • <Label>-Steuerelemente zeigen Text an.
    • <Button> kann von Benutzer*innen gedrückt werden, wodurch das Clicked-Ereignis ausgelöst wird. Sie können Code als Reaktion auf das Clicked-Ereignis ausführen.
    • Clicked="OnSignInClicked", das Clicked-Ereignis der Schaltfläche wird dem OnSignInClicked-Ereignishandler zugewiesen, der in der CodeBehind-Datei definiert ist. Sie erstellen diesen Code im nächsten Schritt.

Behandeln des OnSignInClicked-Ereignisses

Der nächste Schritt besteht darin, den Code für das Clicked-Ereignis der Schaltfläche hinzuzufügen.

  1. Erweitern Sie im Bereich Projektmappen-Explorer von Visual Studio die Datei MainView.xaml, um die CodeBehind-Datei MainView.xaml.cs anzuzeigen. Öffnen Sie MainView.xaml.cs, und ersetzen Sie den Inhalt der Datei durch den folgenden Code:

    // Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.

using SignInMaui.MSALClient;
using Microsoft.Identity.Client;

namespace SignInMaui.Views
{
    public partial class MainView : ContentPage
    {
        public MainView()
        {
            InitializeComponent();

            IAccount cachedUserAccount = PublicClientSingleton.Instance.MSALClientHelper.FetchSignedInUserFromCache().Result;

            _ = Dispatcher.DispatchAsync(async () =>
            {
                if (cachedUserAccount == null)
                {
                    SignInButton.IsEnabled = true;
                }
                else
                {
                    await Shell.Current.GoToAsync("claimsview");
                }
            });
        }

        private async void OnSignInClicked(object sender, EventArgs e)
        {
            await PublicClientSingleton.Instance.AcquireTokenSilentAsync();
            await Shell.Current.GoToAsync("claimsview");
        }
        protected override bool OnBackButtonPressed() { return true; }

    }
}

    Die MainView-Klasse ist eine Inhaltsseite, die für die Anzeige der Hauptansicht der App zuständig ist. Im Konstruktor ruft sie das zwischengespeicherte Benutzerkonto mithilfe von MSALClientHelper aus der PublicClientSingleton-Instanz ab und aktiviert die Anmeldeschaltfläche, wenn kein zwischengespeichertes Benutzerkonto gefunden wird.

    Wenn auf die Anmeldeschaltfläche geklickt wird, ruft sie die AcquireTokenSilentAsync-Methode auf, um ein Token automatisch abzurufen, und navigiert mithilfe der claimsview-Methode zur Shell.Current.GoToAsync-Seite. Darüber hinaus wird die OnBackButtonPressed-Methode überschrieben, um „true“ zurückzugeben, was angibt, dass die Zurück-Schaltfläche für diese Ansicht deaktiviert ist.

Hinzufügen der Seite mit der Anspruchsansicht

In den nächsten Schritten wird unser Code so organisiert, dass die ClaimsView-Seite definiert ist. Auf der Seite werden die Ansprüche der Benutzer*innen angezeigt, die im ID-Token gefunden wurden.

  1. Klicken Sie im Bereich Projektmappen-Explorer von Visual Studio mit der rechten Maustaste auf die Ansichten.

  2. Wählen Sie Hinzufügen>Neues Element… aus.

  3. Wählen Sie in der Vorlagenliste .NET MAUI aus.

  4. Wählen Sie die Vorlage .NET MAUI ContentPage (XAML) aus. Nennen Sie die Datei ClaimsView.xaml.

  5. Wählen Sie Hinzufügen.

  6. Die Datei ClaimsView.xaml wird in einer neuen Dokumentregisterkarte geöffnet, in der das gesamte XAML-Markup angezeigt wird, das die Benutzeroberfläche der Seite darstellt. Ersetzen des XAML-Markups durch folgendes Markup:

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SignInMaui.Views.ClaimsView"
             Title="ID Token View">
    <Shell.BackButtonBehavior>
        <BackButtonBehavior IsVisible="False" IsEnabled="False" />
    </Shell.BackButtonBehavior>
    <VerticalStackLayout>
        <Label 
            Text="Azure AD for Customers"
            FontSize="26"
            HorizontalOptions="Center" />
        <Label 
            Text="MAUI sample"
            FontSize="26"
            Padding="0,0,0,20"
            HorizontalOptions="Center" />

        <Label 
            Padding="0,20,0,0"
            VerticalOptions="Center" 
            HorizontalOptions="Center"
            FontSize="18"
            Text="Claims found in ID token"
            />
        <ListView ItemsSource="{Binding IdTokenClaims}"
                  x:Name="Claims">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Padding="0, 0, 0, 0">
                            <Label Grid.Column="1" 
                                   Text="{Binding}" 
                                   HorizontalOptions="Center" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <Button
            x:Name="SignOutButton"
            Text="Sign Out"
            HorizontalOptions="Center"
            Clicked="SignOutButton_Clicked" />
    </VerticalStackLayout>
</ContentPage>

    Dieser XAML-Markupcode stellt das Benutzeroberflächenlayout für eine Anspruchsansicht in einer .NET MAUI-App dar. Er beginnt mit dem Definieren von ContentPage einem Titel und dem Deaktivieren des Zurück-Schaltflächenverhaltens.

    Innerhalb eines VerticalStackLayout gibt es mehrere Label-Elemente, die statischen Text anzeigen, gefolgt von einer ListView namens Claims, die an eine Auflistung namens IdTokenClaims gebunden ist, um die im ID-Token gefundenen Ansprüche anzuzeigen. Jeder Anspruch wird in einer ViewCell mit einer DataTemplate gerendert und als zentriertes Label innerhalb eines Rasters angezeigt.

    Schließlich befindet sich am unteren Rand des Layouts eine Sign Out-Schaltfläche, die den SignOutButton_Clicked-Ereignishandler auslöst, wenn darauf geklickt wird.

Behandeln der ClaimsView-Daten

Im nächsten Schritt wird der Code zur Behandlung von ClaimsView-Daten hinzugefügt.

  1. Erweitern Sie im Bereich Projektmappen-Explorer von Visual Studio die Datei ClaimsView.xaml, um die CodeBehind-Datei ClaimsView.xaml.cs anzuzeigen. Öffnen Sie ClaimsView.xaml.cs, und ersetzen Sie den Inhalt der Datei durch den folgenden Code:

    using SignInMaui.MSALClient;
using Microsoft.Identity.Client;

namespace SignInMaui.Views;

public partial class ClaimsView : ContentPage
{
    public IEnumerable<string> IdTokenClaims { get; set; } = new string[] {"No claims found in ID token"};
    public ClaimsView()
    {
        BindingContext = this;
        InitializeComponent();

        _ = SetViewDataAsync();
    }

    private async Task SetViewDataAsync()
    {
        try
        {
            _ = await PublicClientSingleton.Instance.AcquireTokenSilentAsync();

            IdTokenClaims = PublicClientSingleton.Instance.MSALClientHelper.AuthResult.ClaimsPrincipal.Claims.Select(c => c.Value);

            Claims.ItemsSource = IdTokenClaims;
        }

        catch (MsalUiRequiredException)
        {
            await Shell.Current.GoToAsync("claimsview");
        }
    }

    protected override bool OnBackButtonPressed() { return true; }

    private async void SignOutButton_Clicked(object sender, EventArgs e)
    {
        await PublicClientSingleton.Instance.SignOutAsync().ContinueWith((t) =>
        {
            return Task.CompletedTask;
        });

        await Shell.Current.GoToAsync("mainview");
    }
}

    Der ClaimsView.xaml.cs-Code stellt den CodeBehind für eine Anspruchsansicht in einer .NET MAUI-App dar. Er importiert zuerst die erforderlichen Namespaces und definiert die ClaimsView-Klasse, die ContentPage erweitert. Die IdTokenClaims-Eigenschaft ist eine Aufzählung von Zeichenfolgen, die anfänglich auf eine einzelne Zeichenfolge festgelegt ist, die angibt, dass keine Ansprüche gefunden wurden.

    Der ClaimsView-Konstruktor legt den Bindungskontext auf die aktuelle Instanz fest, initialisiert die Ansichtskomponenten und ruft die SetViewDataAsync-Methode asynchron auf. Die SetViewDataAsync-Methode versucht, im Hintergrund ein Token abzurufen, ruft die Ansprüche aus dem Authentifizierungsergebnis ab und legt die IdTokenClaims-Eigenschaft fest, um sie in der ListView namens Claims anzuzeigen. Wenn eine MsalUiRequiredException auftritt, die angibt, dass eine Benutzerinteraktion für die Authentifizierung erforderlich ist, navigiert die App zur Anspruchsansicht.

    Die OnBackButtonPressed-Methode überschreibt das Verhalten der Zurück-Schaltfläche, um immer „true“ zurückzugeben und hindert Benutzer*innen so daran, von dieser Ansicht zurückzunavigieren. Der SignOutButton_Clicked-Ereignishandler meldet Benutzer*innen mithilfe der PublicClientSingleton-Instanz ab und navigiert anschließend zur main view.

Ändern der App-Shell

Die AppShell-Klasse definiert die visuelle Hierarchie einer App, das XAML-Markup, das beim Erstellen der Benutzeroberfläche der App verwendet wird. Aktualisieren Sie die AppShell, um sie über die Views zu informieren.

  1. Doppelklicken Sie im Bereich AppShell.xamlProjektmappen-Explorer auf die Datei , um den XAML-Editor zu öffnen. Ersetzen Sie das XAML-Markup durch den folgenden Code:

    <?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="SignInMaui.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:SignInMaui.Views"
    Shell.FlyoutBehavior="Disabled">

    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainView}"
        Route="MainPage" />
</Shell>

    Der XAML-Code definiert eine AppShell-Klasse, die das Flyoutverhalten deaktiviert und den Hauptinhalt auf ein ShellContent-Element mit dem Titel Home und eine Inhaltsvorlage festlegt, die auf die MainView-Klasse verweist.

  2. Erweitern Sie im Bereich Projektmappen-Explorer von Visual Studio die Datei AppShell.xaml, um die CodeBehind-Datei AppShell.xaml.cs anzuzeigen. Öffnen Sie AppShell.xaml.cs, und ersetzen Sie den Inhalt der Datei durch den folgenden Code:

    // Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
using SignInMaui.Views;

namespace SignInMaui;

public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();
        Routing.RegisterRoute("mainview", typeof(MainView));
        Routing.RegisterRoute("claimsview", typeof(ClaimsView));
    }
}

    Sie aktualisieren die AppShell.xaml.cs-Datei so, dass sie die erforderlichen Routenregistrierungen für MainView und ClaimsView enthält. Durch Aufrufen der InitializeComponent()-Methode stellen Sie die Initialisierung der AppShell-Klasse sicher. Die RegisterRoute()-Methode ordnet die mainview- und claimsview-Routen den jeweiligen Ansichtstypen, MainView und ClaimsView, zu.

Hinzufügen von plattformspezifischem Code

Ein .NET MAUI-App-Projekt enthält einen Ordner „Platforms“, bei dem jeder untergeordnete Ordner eine Plattform repräsentiert, auf die .NET MAUI ausgerichtet werden kann. Führen Sie die folgenden Schritte aus, um anwendungsspezifisches Android-Verhalten zur Ergänzung der Standardanwendungsklasse bereitzustellen:

  1. Doppelklicken Sie im Bereich Projektmappen-Explorer auf die Datei Platforms/Android/AndroidManifest.xml, um den XML-Editor zu öffnen. Aktualisieren Sie die folgenden Eigenschaften:

    • Legen Sie Anwendungsname auf MAUI CIAM fest.
    • Legen Sie Paketname auf SignInMaui.Droid fest.
    • Legen Sie Android-Mindestversion auf Android 5.0 (API-Ebene 21) fest.

  2. Doppelklicken Sie im Bereich Projektmappen-Explorer auf die Datei Platforms/Android/MainActivity.cs, um den C#-Editor zu öffnen. Ersetzen Sie den Inhalt der Datei durch folgenden Code:

    // Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
using Android.App;
using Android.Content;
using Android.Content.PM;
using Android.OS;
using SignInMaui.MSALClient;
using Microsoft.Identity.Client;

namespace SignInMaui;

[Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]
public class MainActivity : MauiAppCompatActivity
{
    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        // configure platform specific params
        PlatformConfig.Instance.RedirectUri = $"msal{PublicClientSingleton.Instance.MSALClientHelper.AzureAdConfig.ClientId}://auth";
        PlatformConfig.Instance.ParentWindow = this;

        // Initialize MSAL and platformConfig is set
        _ = Task.Run(async () => await PublicClientSingleton.Instance.MSALClientHelper.InitializePublicClientAppAsync()).Result;
    }

    protected override void OnActivityResult(int requestCode, Result resultCode, Intent data)
    {
        base.OnActivityResult(requestCode, resultCode, data);
        AuthenticationContinuationHelper.SetAuthenticationContinuationEventArgs(requestCode, resultCode, data);
    }
}

    Lassen Sie uns die wichtigsten Teile des Codes aufschlüsseln, den Sie hinzugefügt haben:

    • Die erforderlichen using-Anweisungen befinden sich oben.
    • Die MainActivity-Klasse wird definiert und erbt von MauiAppCompatActivity. Dies ist die Basisklasse für die Android-Plattform in .NET MAUI.
    • Das Attribut [Activity] wird auf die MainActivity-Klasse angewendet und gibt verschiedene Einstellungen für die Android-Aktivität an.
      • Theme = "@style/Maui.SplashTheme" legt das Begrüßungsdesign für die Aktivität fest.
      • MainLauncher = true gibt diese Aktivität als Haupteinstiegspunkt der Anwendung an.
      • ConfigurationChanges gibt die Konfigurationsänderungen an, die die Aktivität verarbeiten kann, z. B . Bildschirmgröße, Ausrichtung, Benutzeroberflächenmodus, Bildschirmlayout, kleinste Bildschirmgröße und Dichte.
    • Die OnCreate-Methode wird überschrieben, um benutzerdefinierte Logik bereitzustellen, wenn die Aktivität erstellt wird.
      • base.OnCreate(savedInstanceState) ruft die Basisimplementierung der Methode auf.
      • PlatformConfig.Instance.RedirectUri wird auf einen dynamisch generierten Wert basierend auf PublicClientSingleton.Instance.MSALClientHelper.AzureAdConfig.ClientId festgelegt. Er konfiguriert den Umleitungs-URI für den MSAL-Client.
      • PlatformConfig.Instance.ParentWindow wird auf die aktuelle Aktivitätsinstanz festgelegt, die das übergeordnete Fenster für authentifizierungsbezogene Vorgänge angibt.
      • PublicClientSingleton.Instance.MSALClientHelper.InitializePublicClientAppAsync() initialisiert die MSAL-Client-App asynchron mithilfe einer Hilfsprogrammmethode aus einer Singletoninstanz namens MSALClientHelper. Task.Run wird verwendet, um die Initialisierung in einem Hintergrundthread auszuführen, und .Result wird verwendet, um synchron zu warten, bis die Aufgabe abgeschlossen ist.
    • Die OnActivityResult-Methode wird überschrieben, um das Ergebnis einer Aktivität zu verarbeiten, die von der aktuellen Aktivität gestartet wird.
      • base.OnActivityResult(requestCode, resultCode, data) ruft die Basisimplementierung der Methode auf.
      • AuthenticationContinuationHelper.SetAuthenticationContinuationEventArgs(requestCode, resultCode, data) legt die Ereignisargumente für das Fortsetzen der Authentifizierung basierend auf dem empfangenen Anforderungscode, dem Ergebniscode und den Absichtsdaten fest. Dies wird verwendet, um den Authentifizierungsflow fortzusetzen, nachdem eine externe Aktivität ein Ergebnis zurückgibt.

  3. Wählen Sie im Bereich Projektmappen-Explorer von Visual Studio die Option Plattformen aus.

  4. Klicken Sie mit der rechten Maustaste auf den Ordner Android, und wählen Sie >Hinzufügen>Neues Element… aus.

  5. Wählen Sie C#-Elemente>Klasse aus. Nennen Sie die Datei MsalActivity.cs.

  6. Ersetzen Sie den Inhalt der Datei MsalActivity.cs durch den folgenden Code:

    // Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Microsoft.Identity.Client;

namespace MauiAppBasic.Platforms.Android.Resources
{
    [Activity(Exported =true)]
    [IntentFilter(new[] { Intent.ActionView },
        Categories = new[] { Intent.CategoryBrowsable, Intent.CategoryDefault },
        DataHost = "auth",
        DataScheme = "msalEnter_the_Application_Id_Here")]
    public class MsalActivity : BrowserTabActivity
    {
    }
}

    Lassen Sie uns die wichtigsten Teile des Codes aufschlüsseln, den Sie hinzugefügt haben:

    • Die MsalActivity-Klasse wird innerhalb des MauiAppBasic.Platforms.Android.Resources-Namespace deklariert. Die Klasse erbt von der BrowserTabActivity-Klasse und gibt an, dass sie ihre Funktionalität erweitert.
    • Die Klasse ist mit dem [Activity(Exported = true)]-Attribut versehen, was bedeutet, dass die Aktivität exportiert wird und dass von anderen Methoden darauf zugegriffen werden kann.
    • Ein Absichtsfilter wird mithilfe des Attributs „[IntentFilter(...)]“ angegeben. Er konfiguriert die Aktivität so, dass die ActionView-Absicht abgefangen wird.
    • Der Absichtsfilter ist so festgelegt, dass die ActionView-Absicht mit dem angegebenen DataScheme (msalEnter_the_Application_Id_Here) und DataHost („auth“) behandelt wird. Diese Konfiguration ermöglicht es der Aktivität, den Authentifizierungsprozess zu verarbeiten, indem die ActionView-Absicht abgefangen und verarbeitet wird. Ersetzen Sie Enter_the_Application_Id_Here durch die Anwendungs-ID (Client) der zuvor von Ihnen registrierten App.

Hinzufügen von App-Einstellungen

Einstellungen ermöglichen die Trennung von Daten, die das Verhalten einer App mit Code konfigurieren, sodass das Verhalten geändert werden kann, ohne die App neu zu erstellen. MauiAppBuilder bietet ConfigurationManager, um Einstellungen in unserer .NET MAUI-App zu konfigurieren. Fügen wir die appsettings.json-Datei als EmbeddedResource hinzu.

Führen Sie folgende Schritte aus, um appsettings.json zu erstellen:

  1. Klicken Sie im Bereich Projektmappen-Explorer von Visual Studio mit der rechten Maustaste auf das Projekt SignInMaui, und wählen Sie >Hinzufügen>Neues Element… aus.

  2. Wählen Sie Web>JavaScript-JSON-Konfigurationsdatei aus. Nennen Sie die Datei appsettings.json.

  3. Wählen Sie Hinzufügen.

  4. Wählen Sie appsettings.json aus

  5. Legen Sie im Bereich Eigenschaften die Option Buildaktion auf Eingebettete Ressource fest.

  6. Legen Sie im Bereich Eigenschaften den Wert für In Ausgabeverzeichnis kopieren auf Immer kopieren fest.

  7. Ersetzen Sie den Inhalt der Datei appsettings.json durch den folgenden Code:

    {
  "AzureAd": {
    "Authority": "https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/",
    "ClientId": "Enter_the_Application_Id_Here",
    "CacheFileName": "msal_cache.txt",
    "CacheDir": "C:/temp"
  },
  "DownstreamApi": {
    "Scopes": "openid offline_access"
  }
}

  8. Suchen Sie in appsettings.json den folgenden Platzhalter:

    1. Enter_the_Tenant_Subdomain_Here, und ersetzen Sie ihn durch die Unterdomäne des Verzeichnisses (des Mandanten). Wenn Ihre primäre Mandantendomäne beispielsweise contoso.onmicrosoft.com lautet, verwenden Sie contoso. Wenn Sie ihren Mandantennamen nicht kennen, können Sie Ihre Mandantendetails auslesen.
    2. Enter_the_Application_Id_Here, und ersetzen Sie ihn mit der Anwendungs-ID (Client-ID) der zuvor von Ihnen registrierten Anwendung.

Verwenden einer benutzerdefinierten URL-Domäne (Optional)

Verwenden Sie eine benutzerdefinierte Domäne, um die Authentifizierungs-URL vollständig für Ihre Marke anzupassen. Aus Sicht der Benutzer entsteht dadurch der Eindruck, dass sie während des Authentifizierungsprozesses in Ihrer Domäne bleiben, anstatt zum Domänennamen ciamlogin.com umgeleitet zu werden.

Befolgen Sie diese Schritte, um eine benutzerdefinierte Domäne zu verwenden:

  1. Führen Sie die Schritte unter Aktivieren von benutzerdefinierten URL-Domänen für Apps in externen Mandanten aus, um eine benutzerdefinierte URL-Domäne für Ihren externen Mandanten zu aktivieren.

  2. Öffnen Sie die Datei appsettings.json:

    1. Aktualisieren Sie den Wert der Authority-Eigenschaft in https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here. Ersetzen Sie Enter_the_Custom_Domain_Here durch die benutzerdefinierte URL-Domäne und Enter_the_Tenant_ID_Here durch Ihre Mandanten-ID. Wenn Sie Ihre Mandanten-ID nicht kennen, erfahren Sie hier, wie Sie die Mandantendetails abrufen.
    2. Fügen Sie die knownAuthorities-Eigenschaft mit dem Wert [Enter_the_Custom_Domain_Here] hinzu.

Nachdem Sie die Änderungen an der Datei appsettings.json vorgenommen haben, sollte die Datei in etwa wie der folgende Codeschnipsel aussehen (wenn Ihre benutzerdefinierte URL-Domäne login.contoso.com lautet und Ihre Mandanten-ID aaaabbbb-0000-cccc-1111-dddd2222eeee ist):

{
  "AzureAd": {
    "Authority": "https://login.contoso.com/aaaabbbb-0000-cccc-1111-dddd2222eeee",
    "ClientId": "Enter_the_Application_Id_Here",
    "CacheFileName": "msal_cache.txt",
    "CacheDir": "C:/temp",
    "KnownAuthorities": ["login.contoso.com"]
  },
  "DownstreamApi": {
    "Scopes": "openid offline_access"
  }
}

Ausführen und Testen der mobilen .NET MAUI-App

.NET MAUI-Apps sind für die Ausführung auf mehreren Betriebssystemen und Geräten konzipiert. Sie müssen auswählen, mit welchem Ziel Sie Ihre App testen und debuggen möchten.

Legen Sie das Debugziel in der Visual Studio-Symbolleiste auf das Gerät fest, mit dem Sie debuggen und testen möchten. Die folgenden Schritte veranschaulichen das Festlegen des Debugziels auf Android:

  1. Wählen Sie die Dropdownliste Debugziel aus.
  2. Wählen Sie Android-Emulatoren aus.
  3. Wählen Sie das Emulatorgerät aus.

Führen Sie die App aus, indem Sie F5 drücken oder die Wiedergabeschaltfläche oben in Visual Studio auswählen.

  1. Sie können jetzt die .NET MAUI-Android-Beispielanwendung testen. Nachdem Sie die Anwendung ausgeführt haben, wird das Fenster der Android-Anwendung in einem Emulator angezeigt:

    Screenshot: Anmeldeschaltfläche in der Android-Anwendung.

  2. Wählen Sie im daraufhin angezeigten Android-Fenster die Schaltfläche Anmelden aus. Daraufhin wird ein Browserfenster geöffnet, in dem Sie aufgefordert werden, sich anzumelden.

    Screenshot: Benutzereingabeaufforderung zum Eingeben der Anmeldeinformationen in der Android-Anwendung.

    Während des Anmeldevorgangs werden Sie aufgefordert, verschiedene Berechtigungen zu erteilen (damit die Anwendung auf Ihre Daten zugreifen kann). Nach erfolgreicher Anmeldung und Zustimmung wird auf dem Anwendungsbildschirm die Hauptseite angezeigt.

    Screenshot: Hauptseite in der Android-Anwendung nach der Anmeldung.

Weitere Informationen