Oktatóanyag: Felhasználók bejelentkezése a .NET MAUI-alkalmazásba külső bérlő használatával

Cikk
07/01/2024

Ez az oktatóanyag egy sorozat utolsó része, amely bemutatja, hogyan adhat hozzá bejelentkezési és bejelentkezési kódot a .NET többplatformos alkalmazás felhasználói felületének (.NET MAUI) felületéhez, és hogyan futtathatja az alkalmazást a Windows platformon. A sorozat 2. részében létrehozott egy .NET MAUI-rendszerhéj-alkalmazást, MSAL SDK-támogatást adott hozzá MSAL-segédosztályokon keresztül, telepítette a szükséges kódtárakat, és tartalmazott egy képerőforrást. Ez az utolsó lépés bemutatja, hogyan adhat hozzá bejelentkezési és bejelentkezési kódot a .NET MAUI-felülethez, és hogyan futtathatja az alkalmazást a Windows platformon.

Ebben az oktatóanyagban az alábbiakkal fog megismerkedni:

Adjon hozzá bejelentkezési és bejelentkezési kódot.
Módosítsa az alkalmazáshéjat.
Adjon hozzá platformspecifikus kódot.
Alkalmazásbeállítások hozzáadása.
Futtassa és tesztelje a .NET MAUI-rendszerhéjalkalmazást.

Előfeltételek

Oktatóanyag: .NET MAUI-alkalmazás regisztrálása és konfigurálása külső bérlőben

A .NET MAUI-alkalmazások felhasználói felülete (UI) olyan objektumokból áll, amelyek az egyes célplatformok natív vezérlőire képeznek le. A .NET MAUI-alkalmazások felhasználói felületének létrehozásához használt fő vezérlőcsoportok a lapok, elrendezések és nézetek.

Főnézet hozzáadása lap

A következő lépések úgy rendszerezik a kódot, hogy a main view kód definiálva legyen.

Törölje a MainPage.xaml fájlt és MainPage.xaml.cs a projektből, már nincs rájuk szükség. A Megoldáskezelő panelen keresse meg a MainPage.xaml bejegyzést, kattintson rá a jobb gombbal, és válassza a Törlés lehetőséget.
Kattintson a jobb gombbal a SignInMaui projektre, és válassza az Új mappa hozzáadása>lehetőséget. Nevezze el a mappa nézeteit.
Kattintson a jobb gombbal a Nézetek elemre.
Válassza az Új elem hozzáadása>...lehetőséget.
Válassza a .NET MAUI lehetőséget a sablonlistában.
Válassza ki a .NET MAUI ContentPage (XAML) sablont. Nevezze el a MainView.xaml fájlt.
Válassza a Hozzáadás lehetőséget.

A MainView.xaml fájl egy új dokumentumlapon nyílik meg, amely megjeleníti az oldal felhasználói felületét képviselő összes XAML-korrektúrát. Cserélje le az XAML-korrektúrát a következő korrektúrára:

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

Mentse a fájlt.

Bontsuk le az oldalon elhelyezett XAML-vezérlők főbb részeit:
- <ContentPage> A MainView osztály gyökérobjektuma.
- <VerticalStackLayout> a ContentPage gyermekobjektuma. Ez az elrendezésvezérlő függőlegesen, egymás után rendezi a gyermekeket.
- <Image> megjelenít egy képet, ebben az esetben a korábban letöltött Azureactive_directory.png_ használatával.
- <Label> vezérlők megjelenítendő szöveg.
- <Button> a felhasználó lenyomhatja, ami az eseményt Clicked okozza. Az eseményre Clicked válaszul kódot futtathat.
- Clicked="OnSignInClicked" a Clicked gomb eseménye az OnSignInClicked eseménykezelőhöz van rendelve, amely a kód mögötti fájlban lesz definiálva. Ezt a kódot a következő lépésben fogja létrehozni.

Az OnSignInClicked esemény kezelése

A következő lépés a gomb eseményéhez Clicked tartozó kód hozzáadása.

A Visual Studio Megoldáskezelő paneljén bontsa ki a MainView.xaml fájlt a kód mögötti fájl MainView.xaml.cs megjelenítéséhez. Nyissa meg a MainView.xaml.cs , és cserélje le a fájl tartalmát a következő kódra:

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

    }
}

Az MainView osztály egy tartalomlap, amely az alkalmazás fő nézetének megjelenítéséért felelős. A konstruktorban lekéri a gyorsítótárazott felhasználói fiókot a MSALClientHelper PublicClientSingleton példányból, és engedélyezi a bejelentkezési gombot, ha nem található gyorsítótárazott felhasználói fiók.

Amikor a bejelentkezési gombra kattint, meghívja a AcquireTokenSilentAsync metódust, hogy csendesen szerezzen be egy jogkivonatot, és a metódussal navigál a claimsview Shell.Current.GoToAsync lapra. Emellett a OnBackButtonPressed metódus felül van bírálva, hogy igaz értéket ad vissza, ami azt jelzi, hogy a vissza gomb le van tiltva ehhez a nézethez.

Jogcímnézet hozzáadása lap

A következő lépések úgy rendszerezik a kódot, hogy ClaimsView az oldal definiálva legyen. A lapon megjelennek az azonosító jogkivonatban található felhasználói jogcímek.

A Visual Studio Megoldáskezelő paneljén kattintson a jobb gombbal a Nézetek elemre.
Válassza az Új elem hozzáadása>...lehetőséget.
Válassza a .NET MAUI lehetőséget a sablonlistában.
Válassza ki a .NET MAUI ContentPage (XAML) sablont. Nevezze el a ClaimsView.xaml fájlt.
Válassza a Hozzáadás lehetőséget.

A ClaimsView.xaml fájl egy új dokumentumlapon nyílik meg, amely megjeleníti a lap felhasználói felületét képviselő összes XAML-jelölőt. Cserélje le az XAML-korrektúrát a következő korrektúrára:

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

Ez az XAML-jelölőkód egy .NET MAUI-alkalmazásban lévő jogcímnézet felhasználói felületének elrendezését jelöli. Első lépésként adja meg a ContentPage címet, és tiltsa le a vissza gomb viselkedését.

VerticalStackLayoutA nézetben több Label elem is statikus szöveget jelenít meg, majd egy ListView elnevezett, az azonosító jogkivonatban található jogcímek megjelenítésére hívott IdTokenClaims gyűjteményhez kötődő névClaims. Az egyes jogcímek egy-egy ViewCell DataTemplate használatával jelennek meg, és egy rácson belül középre kerülnek Label .

Végül az elrendezés alján található egy Sign Out gomb, amely kattintáskor aktiválja az SignOutButton_Clicked eseménykezelőt.

A ClaimsView-adatok kezelése

A következő lépés az adatok kezeléséhez ClaimsView szükséges kód hozzáadása.

A Visual Studio Megoldáskezelő paneljén bontsa ki a ClaimsView.xaml fájlt a kód mögötti fájl ClaimsView.xaml.cs megjelenítéséhez. Nyissa meg a ClaimsView.xaml.cs , és cserélje le a fájl tartalmát a következő kódra:
```
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");
    }
}
```
A ClaimsView.xaml.cs kód egy .NET MAUI-alkalmazásban lévő jogcímnézet mögötti kódját jelöli. Először importálja a szükséges névtereket, majd definiálja az osztályt, amely kiterjeszti ContentPageazokatClaimsView. A IdTokenClaims tulajdonság a sztringek számbavétele, kezdetben egyetlen sztringre van állítva, amely azt jelzi, hogy nem található jogcím.

A ClaimsView konstruktor beállítja a kötési környezetet az aktuális példányra, inicializálja a nézet összetevőit, és aszinkron módon meghívja a SetViewDataAsync metódust. A SetViewDataAsync metódus csendesen megkísérli lekérni a jogkivonatot, lekéri a jogcímeket a hitelesítési eredményből, és beállítja a IdTokenClaims tulajdonságot, hogy megjelenítse őket a ListView névvel ellátott Claimshelyen. Ha ilyen MsalUiRequiredException történik, amely azt jelzi, hogy a hitelesítéshez felhasználói beavatkozásra van szükség, az alkalmazás a jogcímek nézetére navigál.

A OnBackButtonPressed metódus felülbírálja a vissza gomb viselkedését, hogy mindig igaz legyen, megakadályozva, hogy a felhasználó visszatérjen ebből a nézetből. Az SignOutButton_Clicked eseménykezelő kijelentkezteti a felhasználót a PublicClientSingleton példány használatával, és a befejezés után navigál a main view.

Az alkalmazáshéj módosítása

Az AppShell osztály meghatározza az alkalmazás vizuális hierarchiáját, az alkalmazás felhasználói felületének létrehozásához használt XAML-jelölőt. Frissítse a AppShell , hogy tudassa vele a Views.

Kattintson duplán a AppShell.xaml fájlra a Megoldáskezelő panelen az XAML-szerkesztő megnyitásához. Cserélje le az XAML-korrektúrát a következő kódra:

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

Az XAML-kód egy osztályt AppShell határoz meg, amely letiltja a szórólap viselkedését, és a fő tartalmat egyShellContent, az osztályra MainView mutató címmel Home és tartalomsablonnal rendelkező elemre állítja.

A Visual Studio Megoldáskezelő paneljén bontsa ki az AppShell.xaml fájlt a kód mögötti AppShell.xaml.cs megjelenítéséhez. Nyissa meg a AppShell.xaml.cs , és cserélje le a fájl tartalmát a következő kódra:
```
// 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));
    }
}
```
A fájlt úgy frissíti, AppShell.xaml.cs hogy tartalmazza a szükséges útvonalregisztrációkat az és ClaimsViewa MainView . A metódus meghívásával InitializeComponent() biztosítja az osztály inicializálását AppShell . A RegisterRoute() metódus társítja az és claimsview az útvonalakat a mainview megfelelő nézettípusokkal, MainView és ClaimsView.

Platformspecifikus kód hozzáadása

A .NET MAUI-alkalmazásprojektek egy Platform mappát tartalmaznak, amelyben minden gyermekmappa egy olyan platformot jelöl, amelyet a .NET MAUI meg tud célozni. Ha alkalmazásspecifikus viselkedést szeretne biztosítani az alapértelmezett alkalmazásosztály kiegészítéséhez, módosítsa Platforms/Windows/App.xaml.cs.

Cserélje le a fájl tartalmát a következő kódra:

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

A kódban konfigurálja az alkalmazás átirányítási URI-ját, inicializálja az MSAL-t, majd beállítja az alkalmazás szülőablakát. Felülbírálhatja az indítási OnLaunched esemény kezelésére és a szülőablak leírójának lekérésére vonatkozó metódust is.

Alkalmazásbeállítások hozzáadása

A beállítások lehetővé teszik az alkalmazások viselkedését a kódból konfiguráló adatok elkülönítését, így a viselkedés az alkalmazás újraépítése nélkül módosítható. Ez MauiAppBuilder biztosítja ConfigurationManager a beállítások konfigurálását a .NET MAUI-alkalmazásban. Vegyük fel a appsettings.json fájlt EmbeddedResource.

A létrehozáshoz appsettings.jsonkövesse az alábbi lépéseket:

A Visual Studio Megoldáskezelő paneljén kattintson a jobb gombbal a SignInMaui projekt >Új elem hozzáadása... elemére>.
Válassza a Webes>JavaScript JSON-konfigurációs fájl lehetőséget. A fájl neve legyen appsettings.json.
Válassza a Hozzáadás lehetőséget.
Appsettings.json kiválasztása
A Tulajdonságok panelen állítsa be a buildelési műveletet beágyazott erőforrásra.
A Tulajdonságok panelen állítsa a Másolás kimeneti könyvtárra a Másolás mindig parancsot.

Cserélje le a fájl tartalmát appsettings.json a következő kódra:

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

Keresse meg a appsettings.jsonhelyőrzőt a következő helyen:
1. Enter_the_Tenant_Subdomain_Here és cserélje le a Címtár (bérlő) altartományra. Ha például a bérlő elsődleges tartománya, contoso.onmicrosoft.comhasználja a következőt contoso: Ha nem rendelkezik a bérlő nevével, olvassa el a bérlő adatait.
2. Enter_the_Application_Id_Here és cserélje le a korábban regisztrált alkalmazás (ügyfél) azonosítójára.

Egyéni URL-tartomány használata (nem kötelező)

Használjon egyéni tartományt a hitelesítési URL-cím teljes márkajelzéséhez. Felhasználói szempontból a felhasználók a hitelesítési folyamat során a tartományon maradnak, ahelyett, hogy ciamlogin.com tartománynévre irányítanák át őket.

Egyéni tartomány használatához kövesse az alábbi lépéseket:

Az egyéni URL-tartományok engedélyezése külső bérlőkben lévő alkalmazások számára című témakörben leírt lépésekkel engedélyezheti az egyéni URL-tartományt a külső bérlő számára.
Nyissa meg appsettings.json fájlt:
1. Frissítse a tulajdonság értékét a Authority következőre https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here: . Cserélje le Enter_the_Custom_Domain_Here az egyéni URL-tartományra és Enter_the_Tenant_ID_Here a bérlőazonosítóra. Ha nem rendelkezik a bérlőazonosítójával, olvassa el a bérlő adatait.
2. Adjon hozzá knownAuthorities tulajdonságot [Enter_the_Custom_Domain_Here] értékkel.

Miután végrehajtotta a appsettings.json fájl módosításait, ha az egyéni URL-tartomány login.contoso.com, és a bérlőazonosítója aaaabbbb-0000-cccc-1111-ddddd2222eeee, akkor a fájlnak az alábbi kódrészlethez hasonlóan kell kinéznie:

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

A .NET MAUI asztali alkalmazás futtatása és tesztelése

A .NET MAUI-alkalmazások több operációs rendszeren és eszközön való futtatásra lettek tervezve. Ki kell választania, hogy melyik célhoz szeretné tesztelni és hibakereséssel használni az alkalmazást.

Állítsa a Hibakeresési célértéket a Visual Studio eszköztárán arra az eszközre, amellyel hibakeresést és tesztelést szeretne végezni. Az alábbi lépések bemutatják a hibakeresési cél Windowsra való beállítását:

Válassza a Cél hibakeresése legördülő lista lehetőséget.
Keretrendszer kiválasztása
Válassza ki a net7.0-windows...

Futtassa az alkalmazást az F5 billentyű lenyomásával, vagy válassza a Lejátszás gombot a Visual Studio tetején.

Most már tesztelheti a minta .NET MAUI asztali alkalmazást. Az alkalmazás futtatása után az asztali alkalmazás ablaka automatikusan megjelenik:
A megjelenő asztali ablakban válassza a Bejelentkezés gombot. Megnyílik egy böngészőablak, és a rendszer kérni fogja a bejelentkezést.

A bejelentkezési folyamat során a rendszer különböző engedélyek megadását kéri (hogy az alkalmazás hozzáférhessen az adataihoz). Sikeres bejelentkezés és hozzájárulás esetén az alkalmazás képernyőjén megjelenik a főoldal.

Következő lépés

Oktatóanyag: Alkalmazásszerepkörök hozzáadása a .NET MAUI-alkalmazáshoz, és azok fogadása az azonosító jogkivonatában

Megosztás a következőn keresztül:

Előfeltételek

Főnézet hozzáadása lap

Az OnSignInClicked esemény kezelése

Jogcímnézet hozzáadása lap

A ClaimsView-adatok kezelése

Az alkalmazáshéj módosítása

Platformspecifikus kód hozzáadása

Alkalmazásbeállítások hozzáadása

Egyéni URL-tartomány használata (nem kötelező)

A .NET MAUI asztali alkalmazás futtatása és tesztelése

Következő lépés

Visszajelzés

További források

Megosztás a következőn keresztül:

Előfeltételek

Bejelentkezési és bejelentkezési kód hozzáadása

Főnézet hozzáadása lap

Az OnSignInClicked esemény kezelése

Jogcímnézet hozzáadása lap

A ClaimsView-adatok kezelése

Az alkalmazáshéj módosítása

Platformspecifikus kód hozzáadása

Alkalmazásbeállítások hozzáadása

Egyéni URL-tartomány használata (nem kötelező)

A .NET MAUI asztali alkalmazás futtatása és tesztelése

Következő lépés

Visszajelzés

További források