Kurz: Přihlášení uživatelů v aplikaci .NET MAUI pomocí externího tenanta

Článek
10/24/2023

Tento kurz je poslední částí série, která ukazuje, jak přidat kód pro přihlášení a odhlášení v prostředí .NET Multi-Platform App UI (.NET MAUI) a spustit aplikaci na platformě Windows. Ve 2. části této série jste vytvořili aplikaci prostředí .NET MAUI, přidali jste podporu sady MSAL SDK prostřednictvím pomocných tříd MSAL, nainstalovali požadované knihovny a zahrnuli prostředek image. Tento poslední krok ukazuje, jak přidat kód pro přihlášení a odhlášení v prostředí .NET MAUI a spustit aplikaci na platformě Windows.

V tomto kurzu se naučíte:

Přidejte kód pro přihlášení a odhlášení.
Upravte prostředí aplikace.
Přidejte kód specifický pro platformu.
Přidejte nastavení aplikace.
Spusťte a otestujte aplikaci prostředí .NET MAUI.

Požadavky

Kurz: Registrace a konfigurace aplikace .NET MAUI v externím tenantovi

Uživatelské rozhraní aplikace .NET MAUI je tvořeno objekty, které se mapují na nativní ovládací prvky každé cílové platformy. Hlavní skupiny ovládacích prvků používané k vytvoření uživatelského rozhraní aplikace .NET MAUI jsou stránky, rozložení a zobrazení.

Přidat hlavní stránku zobrazení

Další kroky uspořádají náš kód tak, aby byl main view definován.

Odstraňte MainPage.xaml a MainPage.xaml.cs z projektu, už je nepotřebujete. V podokně Průzkumník řešení vyhledejte položku MainPage.xaml, klikněte na ni pravým tlačítkem myši a vyberte Odstranit.
Klikněte pravým tlačítkem na projekt SignInMaui a vyberte Přidat>novou složku. Pojmenujte složku Zobrazení.
Klikněte pravým tlačítkem myši na zobrazení.
Vyberte Přidat>novou položku....
V seznamu šablon vyberte .NET MAUI .
Vyberte šablonu .NET MAUI ContentPage (XAML). Pojmenujte soubor MainView.xaml.
Vyberte Přidat.

Soubor MainView.xaml se otevře na nové kartě dokumentu a zobrazí se všechny revize XAML, které představují uživatelské rozhraní stránky. Nahraďte kód XAML následujícím kódem:

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

Uložte soubor.

Pojďme rozdělit klíčové části ovládacích prvků XAML umístěné na stránce:
- <ContentPage> je kořenový objekt třídy MainView.
- <VerticalStackLayout> je podřízený objekt ContentPage. Tento ovládací prvek rozložení uspořádá podřízené položky svisle, jeden za druhým.
- <Image> zobrazí obrázek, v tomto případě používá azureactive_directory.png_, který jste si stáhli dříve.
- <Label> ovládací prvky zobrazují text.
- <Button> může stisknout uživatel, který vyvolá Clicked událost. Kód můžete spustit v reakci na Clicked událost.
- Clicked="OnSignInClicked"Clicked událost tlačítka je přiřazena obslužné OnSignInClicked rutině události, která bude definována v souboru kódu za kódem. Tento kód vytvoříte v dalším kroku.

Zpracování události OnSignInClicked

Dalším krokem je přidání kódu události tlačítka Clicked .

V podokně Průzkumník řešení sady Visual Studio rozbalte soubor MainView.xaml a zobrazte jeho soubor s kódem za MainView.xaml.cs. Otevřete MainView.xaml.cs a nahraďte obsah souboru následujícím kódem:

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

    }
}

Třída MainView je stránka obsahu zodpovědná za zobrazení hlavního zobrazení aplikace. V konstruktoru načte uživatelský účet uložený v mezipaměti pomocí MSALClientHelper instance PublicClientSingleton a povolí tlačítko pro přihlášení, pokud se nenajde žádný uživatelský účet uložený v mezipaměti.

Po kliknutí na tlačítko pro přihlášení volá metodu AcquireTokenSilentAsync , která získá token bezobslužně a pomocí metody přejde na claimsview stránku Shell.Current.GoToAsync . Metoda je navíc přepsána OnBackButtonPressed tak, aby vrátila hodnotu true, což značí, že tlačítko Zpět je pro toto zobrazení zakázané.

Přidat stránku zobrazení deklarací identity

Následující kroky uspořádají kód tak, aby ClaimsView byla definována stránka. Na stránce se zobrazí deklarace identity uživatele nalezené v tokenu ID.

V podokně Průzkumník řešení sady Visual Studio klikněte pravým tlačítkem myši na zobrazení.
Vyberte Přidat>novou položku....
V seznamu šablon vyberte .NET MAUI .
Vyberte šablonu .NET MAUI ContentPage (XAML). Pojmenujte soubor ClaimsView.xaml.
Vyberte Přidat.

Soubor ClaimsView.xaml se otevře na nové kartě dokumentu a zobrazí se všechny revize XAML, které představují uživatelské rozhraní stránky. Nahraďte kód XAML následujícím kódem:

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

Tento kód značek XAML představuje rozložení uživatelského rozhraní pro zobrazení deklarací identity v aplikaci .NET MAUI. Začíná definováním ContentPage názvu a zakázáním chování tlačítka Zpět.

Uvnitř objektu VerticalStackLayoutexistuje několik Label prvků, které zobrazují statický text, za ListView kterým následuje název Claims , který vytvoří vazbu na kolekci, IdTokenClaims která zobrazí deklarace identity nalezené v tokenu ID. Každá deklarace identity se vykreslí v rámci ViewCell pomocí DataTemplate a zobrazí se jako střed Label v rámci mřížky.

Nakonec je Sign Out tlačítko uprostřed v dolní části rozložení, které aktivuje obslužnou rutinu SignOutButton_Clicked události po kliknutí.

Zpracování dat ClaimsView

Dalším krokem je přidání kódu pro zpracování ClaimsView dat.

V podokně Průzkumník řešení v sadě Visual Studio rozbalte soubor ClaimsView.xaml a zobrazte jeho soubor s kódem za ClaimsView.xaml.cs. Otevřete ClaimsView.xaml.cs a nahraďte obsah souboru následujícím kódem:
```
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");
    }
}
```
Kód ClaimsView.xaml.cs představuje kód pro zobrazení deklarací identity v aplikaci .NET MAUI. Začíná importem potřebných oborů názvů a definováním ClaimsView třídy, která rozšiřuje ContentPage. Vlastnost IdTokenClaims je výčet řetězců, původně nastaven na jeden řetězec označující žádné nalezené deklarace.

Konstruktor ClaimsView nastaví kontext vazby na aktuální instanci, inicializuje komponenty zobrazení a volá metodu SetViewDataAsync asynchronně. Metoda SetViewDataAsync se pokusí získat token bezobslužně, načte deklarace identity z výsledku ověřování a nastaví IdTokenClaims vlastnost tak, aby se zobrazily v pojmenovaném ListViewClaims. MsalUiRequiredException Pokud k tomu dojde, což znamená, že k ověřování je potřeba interakce uživatele, aplikace přejde do zobrazení deklarací identity.

OnBackButtonPressed Metoda přepíše chování tlačítka Zpět tak, aby vždy vrátil hodnotu true, což uživateli brání v návratu z tohoto zobrazení. Obslužná rutina SignOutButton_Clicked události odhlásí uživatele pomocí PublicClientSingleton instance a po dokončení přejde na main view.

Úprava prostředí aplikace

Třída AppShell definuje vizuální hierarchii aplikace, kód XAML použitý při vytváření uživatelského rozhraní aplikace. AppShell Aktualizujte ho tak, aby o tom Viewsvěděl .

Poklikáním AppShell.xaml na soubor v podokně Průzkumník řešení otevřete editor XAML. Nahraďte kód XAML následujícím kódem:

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

Kód XAML definuje AppShell třídu, která zakáže chování v informačním rámečku a nastaví hlavní obsah na ShellContent prvek s názvem Home a šablonou obsahu odkazující na MainView třídu.

V podokně Průzkumník řešení v sadě Visual Studio rozbalte soubor AppShell.xaml a zobrazte jeho soubor s kódem AppShell.xaml.cs. Otevřete AppShell.xaml.cs a nahraďte obsah souboru následujícím kódem:
```
// 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));
    }
}
```
Aktualizujete AppShell.xaml.cs soubor tak, aby zahrnoval nezbytné registrace tras pro a MainViewClaimsView. Voláním InitializeComponent() metody zajistíte inicializaci AppShell třídy. Metoda RegisterRoute() přidružuje mainview a claimsview směruje k příslušným typům MainView zobrazení a ClaimsView.

Přidání kódu specifického pro platformu

Projekt aplikace .NET MAUI obsahuje složku Platformy , přičemž každá podřízená složka představuje platformu, na kterou může .NET MAUI cílit. Chcete-li poskytnout chování specifické pro aplikaci k doplnění výchozí třídy aplikace, upravíte Platforms/Windows/App.xaml.cs.

Obsah souboru nahraďte následujícím kódem:

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

// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.

namespace SignInMaui.WinUI;

/// <summary>
/// Provides application-specific behavior to supplement the default Application class.
/// </summary>
public partial class App : MauiWinUIApplication
{
    /// <summary>
    /// Initializes the singleton application object.  This is the first line of authored code
    /// executed, and as such is the logical equivalent of main() or WinMain().
    /// </summary>
    public App()
    {
        this.InitializeComponent();

        // configure redirect URI for your application
        PlatformConfig.Instance.RedirectUri = $"msal{PublicClientSingleton.Instance.MSALClientHelper.AzureAdConfig.ClientId}://auth";

        // Initialize MSAL
        IAccount existinguser = Task.Run(async () => await PublicClientSingleton.Instance.MSALClientHelper.InitializePublicClientAppAsync()).Result;

    }

    protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();

    protected override void OnLaunched(LaunchActivatedEventArgs args)
    {
        base.OnLaunched(args);

        var app = SignInMaui.App.Current;
        PlatformConfig.Instance.ParentWindow = ((MauiWinUIWindow)app.Windows[0].Handler.PlatformView).WindowHandle;
    }
}

V kódu nakonfigurujete identifikátor URI přesměrování pro aplikaci a inicializujete knihovnu MSAL a pak nastavíte nadřazené okno aplikace. Kromě toho přepíšete metodu OnLaunched pro zpracování události spuštění a načtení nadřazeného popisovače okna.

Přidání nastavení aplikace

Nastavení povolit oddělení dat, která konfigurují chování aplikace od kódu, což umožňuje měnit chování bez opětovného sestavení aplikace. ConfigurationManager Poskytuje MauiAppBuilder konfiguraci nastavení v naší aplikaci .NET MAUI. Pojďme přidat appsettings.json soubor jako .EmbeddedResource

Chcete-li vytvořit appsettings.json, postupujte takto:

V podokně Průzkumník řešení sady Visual Studio klikněte pravým tlačítkem na projekt> SignInMaui Přidat>novou položku....
Vyberte konfigurační soubor JSON pro Web>JavaScript. Pojmenujte soubor appsettings.json.
Vyberte Přidat.
Výběr appsettings.json
V podokně Vlastnosti nastavte akci sestavení na vložený prostředek.
V podokně Vlastnosti nastavte možnost Kopírovat do výstupního adresáře tak, aby se vždy zkopírovala.

appsettings.json Obsah souboru nahraďte následujícím kódem:

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

V poli appsettings.jsonnajděte zástupný symbol:
1. Enter_the_Tenant_Subdomain_Here a nahraďte ji subdoménou adresáře (tenanta). Pokud je například primární doména vašeho tenanta contoso.onmicrosoft.com, použijte contoso. Pokud nemáte název tenanta, přečtěte si, jak si přečíst podrobnosti o tenantovi.
2. Enter_the_Application_Id_Here a nahraďte ho ID aplikace (klienta), kterou jste zaregistrovali dříve.

Spuštění a testování desktopové aplikace .NET MAUI

Aplikace .NET MAUI jsou navržené tak, aby běžely na několika operačních systémech a zařízeních. Budete muset vybrat cíl, kterým chcete otestovat a ladit aplikaci.

Nastavte cíl ladění na panelu nástrojů sady Visual Studio na zařízení, pomocí kterého chcete ladit a testovat. Následující kroky ukazují nastavení cíle ladění na Systém Windows:

Vyberte rozevírací seznam Cíl ladění.
Vybrat architekturu
Vyberte net7.0-windows...

Spusťte aplikaci stisknutím klávesy F5 nebo vyberte tlačítko přehrát v horní části sady Visual Studio.

Teď můžete otestovat ukázkovou desktopovou aplikaci .NET MAUI. Po spuštění aplikace se automaticky zobrazí okno desktopové aplikace:
V zobrazeném okně plochy vyberte tlačítko Přihlásit se. Otevře se okno prohlížeče a zobrazí se výzva k přihlášení.

Během procesu přihlášení se zobrazí výzva k udělení různých oprávnění (aby aplikace mohla přistupovat k vašim datům). Po úspěšném přihlášení a vyjádření souhlasu se na obrazovce aplikace zobrazí hlavní stránka.

Další krok

Kurz: Přidání rolí aplikací do aplikace .NET MAUI a jejich příjem v tokenu ID

Sdílet prostřednictvím

Požadavky

Přidat hlavní stránku zobrazení

Zpracování události OnSignInClicked

Přidat stránku zobrazení deklarací identity

Zpracování dat ClaimsView

Úprava prostředí aplikace

Přidání kódu specifického pro platformu

Přidání nastavení aplikace

Spuštění a testování desktopové aplikace .NET MAUI

Další krok

Váš názor

Váš názor

Další materiály

Sdílet prostřednictvím

Požadavky

Přidání kódu pro přihlášení a odhlášení

Přidat hlavní stránku zobrazení

Zpracování události OnSignInClicked

Přidat stránku zobrazení deklarací identity

Zpracování dat ClaimsView

Úprava prostředí aplikace

Přidání kódu specifického pro platformu

Přidání nastavení aplikace

Spuštění a testování desktopové aplikace .NET MAUI

Další krok

Váš názor

Váš názor

Další materiály