Samouczek: logowanie użytkowników w aplikacji .NET MAUI przy użyciu dzierżawy zewnętrznej

Artykuł
06/29/2024

Ten samouczek jest ostatnią częścią serii, która pokazuje, jak dodać kod logowania i wylogowania w powłoce interfejsu użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI) i uruchomić aplikację na platformie Windows. W części 2 tej serii utworzono aplikację powłoki .NET MAUI, dodano obsługę zestawu MSAL SDK za pośrednictwem klas pomocnika bibliotek MSAL, zainstalowanych wymaganych bibliotek i dołączono zasób obrazu. W tym ostatnim kroku pokazano, jak dodać kod logowania i wylogowania w powłoce .NET MAUI i uruchomić aplikację na platformie Windows.

Z tego samouczka dowiesz się, jak wykonywać następujące czynności:

Dodaj kod logowania i wylogowania.
Zmodyfikuj powłokę aplikacji.
Dodaj kod specyficzny dla platformy.
Dodaj ustawienia aplikacji.
Uruchom i przetestuj aplikację powłoki .NET MAUI.

Wymagania wstępne

Samouczek: rejestrowanie i konfigurowanie aplikacji .NET MAUI w dzierżawie zewnętrznej

Interfejs użytkownika aplikacji .NET MAUI jest skonstruowany z obiektów mapowanych na natywne kontrolki każdej platformy docelowej. Główne grupy kontrolek używane do tworzenia interfejsu użytkownika aplikacji .NET MAUI to strony, układy i widoki.

Dodawanie strony widoku głównego

Następne kroki spowodują zorganizowanie kodu w taki sposób, aby został main view zdefiniowany.

Usuń plik MainPage.xaml i MainPage.xaml.cs z projektu, ale nie są już potrzebne. W okienku Eksplorator rozwiązań znajdź wpis MainPage.xaml, kliknij go prawym przyciskiem myszy i wybierz polecenie Usuń.
Kliknij prawym przyciskiem myszy projekt SignInMaui i wybierz polecenie Dodaj>nowy folder. Nadaj folderowi nazwę Widoki.
Kliknij prawym przyciskiem myszy widoki.
Wybierz pozycję Dodaj>nowy element....
Wybierz pozycję .NET MAUI na liście szablonów.
Wybierz szablon .NET MAUI ContentPage (XAML). Nadaj plikowi nazwę MainView.xaml.
Wybierz Dodaj.

Plik MainView.xaml zostanie otwarty na nowej karcie dokumentu, wyświetlając wszystkie znaczniki XAML reprezentujące interfejs użytkownika strony. Zastąp znacznik XAML następującym znacznikiem:

<?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 Entra External ID"
             >
    <Shell.BackButtonBehavior>
        <BackButtonBehavior IsVisible="False" IsEnabled="False" />
    </Shell.BackButtonBehavior>

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

            <Image
                Source="external_id.png"
                SemanticProperties.Description="External ID"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label 
                Text="CIAM"
                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>

Zapisz plik.

Podzielmy kluczowe części kontrolek XAML umieszczonych na stronie:
- <ContentPage> jest obiektem głównym klasy MainView.
- <VerticalStackLayout> jest obiektem podrzędnym elementu ContentPage. Ta kontrolka układu rozmieszcza elementy podrzędne w pionie, jeden po drugim.
- <Image> wyświetla obraz, w tym przypadku używa pobranego wcześniej active_directory.png azure.
- <Label> kontrolki wyświetlają tekst.
- <Button> użytkownik może naciskać, co powoduje wywołanie Clicked zdarzenia. Kod można uruchomić w odpowiedzi na Clicked zdarzenie.
- Clicked="OnSignInClicked"Clicked zdarzenie przycisku jest przypisywane do OnSignInClicked programu obsługi zdarzeń, który zostanie zdefiniowany w pliku za pomocą kodu. Ten kod zostanie utworzony w następnym kroku.

Obsługa zdarzenia OnSignInClicked

Następnym krokiem jest dodanie kodu zdarzenia przycisku Clicked .

W okienku Eksplorator rozwiązań programu Visual Studio rozwiń plik MainView.xaml, aby wyświetlić MainView.xaml.cs pliku za kodem. Otwórz MainView.xaml.cs i zastąp zawartość pliku następującym kodem:

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

    }
}

Klasa MainView jest stroną zawartości odpowiedzialną za wyświetlanie głównego widoku aplikacji. W konstruktorze pobiera buforowane konto użytkownika przy użyciu MSALClientHelper PublicClientSingleton z wystąpienia i włącza przycisk logowania, jeśli nie znaleziono buforowanego konta użytkownika.

Po kliknięciu przycisku logowania wywołuje AcquireTokenSilentAsync metodę w celu uzyskania tokenu w trybie dyskretnym i przechodzi do claimsview strony przy użyciu Shell.Current.GoToAsync metody . OnBackButtonPressed Ponadto metoda jest zastępowana w celu zwrócenia wartości true, co oznacza, że przycisk Wstecz jest wyłączony dla tego widoku.

Dodawanie strony widoku oświadczeń

Następne kroki spowodują zorganizowanie kodu w taki sposób, aby ClaimsView strona została zdefiniowana. Na stronie zostaną wyświetlone oświadczenia użytkownika znalezione w tokenie identyfikatora.

W okienku Eksplorator rozwiązań programu Visual Studio kliknij prawym przyciskiem myszy pozycję Widoki.
Wybierz pozycję Dodaj>nowy element....
Wybierz pozycję .NET MAUI na liście szablonów.
Wybierz szablon .NET MAUI ContentPage (XAML). Nadaj plikowi nazwę ClaimsView.xaml.
Wybierz Dodaj.

Plik ClaimsView.xaml zostanie otwarty na nowej karcie dokumentu, wyświetlając wszystkie znaczniki XAML reprezentujące interfejs użytkownika strony. Zastąp znacznik XAML następującym znacznikiem:

<?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="CIAM"
            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>

Ten kod znaczników XAML reprezentuje układ interfejsu użytkownika dla widoku oświadczenia w aplikacji .NET MAUI. Zaczyna się od zdefiniowania z ContentPage tytułem i wyłączenia zachowania przycisku Wstecz.

VerticalStackLayoutWewnątrz elementu znajduje się kilka Label elementów wyświetlających tekst statyczny, a następnie ListView nazwa, która wiąże się z kolekcją o nazwie IdTokenClaims Claims w celu wyświetlenia oświadczeń znalezionych w tokenie identyfikatora. Każde oświadczenie jest renderowane w obiekcie ViewCell za pomocą DataTemplate elementu i wyświetlane jako wyśrodkowane Label w siatce.

Na koniec znajduje się Sign Out przycisk wyśrodkowany w dolnej części układu, który wyzwala SignOutButton_Clicked procedurę obsługi zdarzeń po kliknięciu.

Obsługa danych ClaimsView

Następnym krokiem jest dodanie kodu do obsługi ClaimsView danych.

W okienku Eksplorator rozwiązań programu Visual Studio rozwiń plik ClaimsView.xaml, aby wyświetlić ClaimsView.xaml.cs pliku za kodem. Otwórz ClaimsView.xaml.cs i zastąp zawartość pliku następującym kodem:
```
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");
    }
}
```
Kod ClaimsView.xaml.cs reprezentuje kod w widoku oświadczeń w aplikacji .NET MAUI. Rozpoczyna się od zaimportowania niezbędnych przestrzeni nazw i zdefiniowania klasy, która rozszerza klasę ClaimsView ContentPage. Właściwość IdTokenClaims jest wyliczaną ciągami, początkowo ustawioną na pojedynczy ciąg wskazujący, że nie znaleziono oświadczeń.

Konstruktor ClaimsView ustawia kontekst powiązania na bieżące wystąpienie, inicjuje składniki widoku i wywołuje metodę SetViewDataAsync asynchronicznie. Metoda SetViewDataAsync próbuje uzyskać token dyskretnie, pobiera oświadczenia z wyniku uwierzytelniania i ustawia IdTokenClaims właściwość, aby wyświetlić je w ListView nazwie Claims. Jeśli wystąpi błąd MsalUiRequiredException , wskazując, że interakcja użytkownika jest wymagana do uwierzytelniania, aplikacja przechodzi do widoku oświadczeń.

Metoda OnBackButtonPressed zastępuje zachowanie przycisku Wstecz, aby zawsze zwracać wartość true, uniemożliwiając użytkownikowi powrót z tego widoku. Program SignOutButton_Clicked obsługi zdarzeń podpisuje użytkownika przy użyciu wystąpienia, a po zakończeniu PublicClientSingleton przechodzi do obiektu main view.

Modyfikowanie powłoki aplikacji

Klasa AppShell definiuje hierarchię wizualną aplikacji, znacznik XAML używany podczas tworzenia interfejsu użytkownika aplikacji. Zaktualizuj element , AppShell aby poinformować go o obiekcie Views.

AppShell.xaml Kliknij dwukrotnie plik w okienku Eksplorator rozwiązań, aby otworzyć edytor XAML. Zastąp znacznik XAML następującym kodem:

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

Kod XAML definiuje klasę AppShell , która wyłącza zachowanie wysuwane i ustawia główną zawartość na ShellContent element z tytułem Home i szablonem zawartości wskazującym klasę MainView .

W okienku Eksplorator rozwiązań programu Visual Studio rozwiń plik AppShell.xaml, aby wyświetlić AppShell.xaml.cs pliku za kodem. Otwórz AppShell.xaml.cs i zastąp zawartość pliku następującym kodem:
```
// 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));
    }
}
```
Plik zostanie zaktualizowany AppShell.xaml.cs w celu uwzględnienia niezbędnych rejestracji tras dla obiektów MainView i ClaimsView. Wywołując metodę InitializeComponent() , należy upewnić się, że inicjowanie AppShell klasy. Metoda RegisterRoute() kojarzy trasy i claimsview z odpowiednimi typami widoków MainView i ClaimsView.mainview

Dodawanie kodu specyficznego dla platformy

Projekt aplikacji .NET MAUI zawiera folder Platformy z każdym folderem podrzędnym reprezentującym platformę docelową programu .NET MAUI. Aby zapewnić zachowanie specyficzne dla aplikacji w celu uzupełnienia domyślnej klasy aplikacji, należy zmodyfikować Platforms/Windows/App.xaml.cselement .

Zastąp zawartość pliku następującym kodem:

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

W kodzie należy skonfigurować identyfikator URI przekierowania dla aplikacji i zainicjować bibliotekę MSAL, a następnie ustawić okno nadrzędne dla aplikacji. Ponadto należy zastąpić metodę OnLaunched do obsługi zdarzenia uruchamiania i pobrać dojście okna nadrzędnego.

Dodawanie ustawień aplikacji

Ustawienia umożliwiają rozdzielenie danych, które konfigurują zachowanie aplikacji z kodu, co pozwala na zmianę zachowania bez ponownego kompilowania aplikacji. ConfigurationManager Zapewnia MauiAppBuilder konfigurowanie ustawień w naszej aplikacji .NET MAUI. Dodajmy appsettings.json plik jako EmbeddedResource.

Aby utworzyć program appsettings.json, wykonaj następujące kroki:

W okienku Eksplorator rozwiązań programu Visual Studio kliknij prawym przyciskiem myszy projekt> SignInMaui Dodaj>nowy element....
Wybierz pozycję Web JavaScript JSON Configuration File (Plik konfiguracji web>JavaScript JSON). Nazwij plik appsettings.json.
Wybierz Dodaj.
Wybierz appsettings.json
W okienku Właściwości ustaw wartość Akcja kompilacji na Zasób osadzony.
W okienku Właściwości ustaw opcję Kopiuj na Katalog wyjściowy, aby zawsze kopiować.

Zastąp zawartość appsettings.json pliku następującym kodem:

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

W pliku appsettings.jsonznajdź symbol zastępczy:
1. Enter_the_Tenant_Subdomain_Here i zastąp ją poddomeną Katalog (dzierżawa). Jeśli na przykład domena podstawowa dzierżawy to contoso.onmicrosoft.com, użyj polecenia contoso. Jeśli nie masz swojej nazwy dzierżawy, dowiedz się, jak odczytywać szczegóły dzierżawy.
2. Enter_the_Application_Id_Here zastąp ją identyfikatorem aplikacji (klienta) zarejestrowanej wcześniej aplikacji.

Użyj niestandardowej domeny adresu URL (opcjonalnie)

Użyj domeny niestandardowej, aby w pełni oznaczyć adres URL uwierzytelniania. Z perspektywy użytkownika użytkownicy pozostają w domenie podczas procesu uwierzytelniania, a nie przekierowywani do ciamlogin.com nazwy domeny.

Wykonaj następujące kroki, aby użyć domeny niestandardowej:

Wykonaj kroki opisane w temacie Włączanie niestandardowych domen url dla aplikacji w dzierżawach zewnętrznych, aby włączyć niestandardową domenę adresu URL dla dzierżawy zewnętrznej.
Otwórz plik appsettings.json :
1. Zaktualizuj wartość Authority właściwości na https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here. Zastąp Enter_the_Custom_Domain_Here ciąg domeną niestandardowego adresu URL i Enter_the_Tenant_ID_Here identyfikatorem dzierżawy. Jeśli nie masz identyfikatora dzierżawy, dowiedz się, jak odczytywać szczegóły dzierżawy.
2. Dodaj knownAuthorities właściwość o wartości [Enter_the_Custom_Domain_Here].

Po wprowadzeniu zmian w pliku appsettings.json , jeśli domena niestandardowego adresu URL jest login.contoso.com, a identyfikator dzierżawy to aaaabbbb-0000-cccc-1111-dddd2222eeeee, plik powinien wyglądać podobnie do następującego fragmentu kodu:

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

Uruchamianie i testowanie aplikacji klasycznej .NET MAUI

Aplikacje .NET MAUI są przeznaczone do uruchamiania na wielu systemach operacyjnych i urządzeniach. Musisz wybrać docelowy element docelowy, za pomocą którego chcesz przetestować i debugować aplikację.

Ustaw element docelowy debugowania na pasku narzędzi programu Visual Studio na urządzenie, za pomocą którego chcesz debugować i testować. W poniższych krokach pokazano ustawienie elementu docelowego debugowania na system Windows:

Wybierz pozycję Debuguj docelową listę rozwijaną.
Wybieranie struktury
Wybierz pozycję net7.0-windows...

Uruchom aplikację, naciskając F5 lub wybierając przycisk odtwarzania w górnej części programu Visual Studio.

Teraz możesz przetestować przykładową aplikację klasyczną .NET MAUI. Po uruchomieniu aplikacji zostanie automatycznie wyświetlone okno aplikacji klasycznej:
W wyświetlonym oknie pulpitu wybierz przycisk Zaloguj . Zostanie otwarte okno przeglądarki z monitem o zalogowanie się.

Podczas procesu logowania zostanie wyświetlony monit o przyznanie różnych uprawnień (aby zezwolić aplikacji na dostęp do danych). Po pomyślnym zalogowaniu się i wyrażeniu zgody na ekranie aplikacji zostanie wyświetlona strona główna.

Następny krok

Samouczek: dodawanie ról aplikacji do aplikacji .NET MAUI i odbieranie ich w tokenie identyfikatora

Udostępnij za pośrednictwem

Wymagania wstępne

Dodawanie strony widoku głównego

Obsługa zdarzenia OnSignInClicked

Dodawanie strony widoku oświadczeń

Obsługa danych ClaimsView

Modyfikowanie powłoki aplikacji

Dodawanie kodu specyficznego dla platformy

Dodawanie ustawień aplikacji

Użyj niestandardowej domeny adresu URL (opcjonalnie)

Uruchamianie i testowanie aplikacji klasycznej .NET MAUI

Następny krok

Opinia

Dodatkowe zasoby

Udostępnij za pośrednictwem

Wymagania wstępne

Dodawanie kodu logowania i wylogowania

Dodawanie strony widoku głównego

Obsługa zdarzenia OnSignInClicked

Dodawanie strony widoku oświadczeń

Obsługa danych ClaimsView

Modyfikowanie powłoki aplikacji

Dodawanie kodu specyficznego dla platformy

Dodawanie ustawień aplikacji

Użyj niestandardowej domeny adresu URL (opcjonalnie)

Uruchamianie i testowanie aplikacji klasycznej .NET MAUI

Następny krok

Opinia

Dodatkowe zasoby