Esercitazione: Creare un'app shell .NET MAUI

Questa guida è la parte 2 di una serie che illustra come creare un'app shell per l'interfaccia utente multipiattaforma di .NET (MAUI) e prepararla per l'autenticazione utilizzando il centro di amministrazione di Microsoft Entra. Nella parte 1 di questa serie, hai registrato un'applicazione e hai configurato i flussi degli utenti nel tenant esterno. In questa esercitazione, aggiungerai un helper client personalizzato per la Microsoft Authentication Library (MSAL) per inizializzare il SDK MSAL, installare le librerie necessarie e includere una risorsa immagine.

In questo tutorial, imparerai a

• Creare un'app .NET MAUI shell.
• Aggiungere il supporto di MSAL SDK usando le classi di supporto MSAL.
• Installare i pacchetti necessari.
• Aggiungere una risorsa immagine.

Prerequisiti

• Esercitazione: Registrare e configurare un'app per dispositivi mobili .NET MAUI in un tenant esterno
• .NET SDK
• Visual Studio 2022 con il workload MAUI installato:
  • istruzioni per l'installazione di Visual Studio

Creare un'app shell MAUI .NET

1. Nella finestra iniziale di Visual Studio 2022 selezionare Crea un nuovo progetto.
2. Nella finestra Crea un nuovo progetto, selezionare MAUI nel menu a discesa di Tutti i tipi di progetto, selezionare il modello App .NET MAUI e selezionare Avanti.
3. Nella finestra Configura il nuovo progetto, Nome progetto va impostato su SignInMaui. Aggiorna il nome della soluzione in sign-in-maui e seleziona Avanti.
4. Nella finestra delle Informazioni aggiuntive, selezionare l'ultima versione del .NET SDK e selezionare Crea.

Attendere che il progetto venga creato e che vengano ripristinate le relative dipendenze.

Aggiungere il supporto dell'SDK MSAL usando le classi di supporto MSAL

Il client MSAL consente agli sviluppatori di acquisire token di sicurezza da un tenant esterno per autenticare e accedere alle API Web protette. In questa sezione si scaricano i file che costituiscono MSALClient.

Scaricare i file seguenti in una cartella nel computer:

• AzureAdConfig.cs: questo file ottiene e imposta gli identificatori univoci dell'app Microsoft Entra dal file di configurazione dell'app.
• DownStreamApiConfig.cs: questo file definisce e imposta gli scopi per la chiamata a Microsoft Graph.
• DownstreamApiHelper.cs: questo file gestisce le eccezioni che si verificano quando si chiama l'API downstream.
• Exception.cs: questo file offre alcuni metodi di estensione correlati alla generazione e alla gestione delle eccezioni.
• IdentityLogger.cs: Questo file gestisce e mostra come usare la registrazione di MSAL.NET.
• MSALClientHelper.cs: questo file contiene metodi per inizializzare MSAL SDK.
• PlatformConfig.cs: questo file contiene metodi per gestire una piattaforma specifica. Ad esempio, Windows.
• PublicClientSingleton.cs: questo file contiene un'implementazione singleton per eseguire il wrapping delle classi MSALClient e associate per supportare il modello di inizializzazione statica per le piattaforme.
• WindowsHelper.cs: questo file contiene metodi per recuperare l'handle della finestra.

Importante

Non ignorare il download dei file MSALClient, sono necessari per completare questa esercitazione.

Spostare i file MSALClient utilizzando Visual Studio

1. Nel riquadro Solution Explorer, fare clic con il pulsante destro del mouse sul progetto SignInMaui e selezionare Aggiungi>Nuova Cartella. Denominare la cartella MSALClient.
2. Fare clic con il pulsante destro del mouse sulla cartella MSALClient, selezionare Aggiungere >Elemento esistente....
3. Passare alla cartella contenente i file MSALClient scaricati in precedenza.
4. Selezionare tutti i file MSALClient scaricati, quindi selezionare Aggiungi

Installare i pacchetti necessari

È necessario installare i pacchetti seguenti:

• Microsoft.Identity.Client: questo pacchetto contiene i file binari della Libreria di autenticazione Microsoft per .NET (MSAL.NET).
• Microsoft.Extensions.Configuration.Json: questo pacchetto contiene l'implementazione del provider di configurazione JSON per Microsoft.Extensions.Configuration.
• Microsoft.Extensions.Configuration.Binder: questo pacchetto contiene funzionalità per associare un oggetto ai dati nei provider di configurazione per Microsoft.Extensions.Configuration.
• Microsoft.Extensions.Configuration.Abstractions: questo pacchetto contiene astrazioni della configurazione basata su coppie chiave-valore.
• Microsoft.Identity.Client.Extensions.Msal: questo pacchetto contiene estensioni a Microsoft Authentication Library per .NET (MSAL.NET).

Gestione pacchetti NuGet

Per usare il Gestore pacchetti NuGet per installare il pacchetto Microsoft.Identity.Client in Visual Studio, seguire questa procedura:

1. Selezionare Tools>Gestore pacchetti NuGet>Gestisci pacchetti NuGet per la soluzione....
2. Dalla scheda Sfoglia , cercare Microsoft.Identity.Client.
3. Selezionare Microsoft.Identity.Client nell'elenco.
4. Selezionare SignInMaui nel riquadro della lista Progetto.
5. Selezionare Installa.
6. Se viene richiesto di verificare l'installazione, selezionare OK.

Ripetere il processo per installare i pacchetti necessari rimanenti.

Aggiungere una risorsa immagine

In questa sezione si scarica un'immagine usata nell'app per migliorare il modo in cui gli utenti interagiscono con esso.

Scaricare l'immagine seguente:

• Icona : Microsoft Entra ID - Questa immagine viene usata come icona nella pagina principale.

Spostare l'immagine con Visual Studio

1. Nel riquadro Esplora soluzioni di Visual Studio espandere la cartella risorse , che visualizza la cartella immagini .
2. Fare clic con il tasto destro su Immagini e selezionare Aggiungi>Elemento Esistente....
3. Passare alla cartella contenente le immagini scaricate.
4. Modificare il filtro sul tipo di file in File di immagini.
5. Selezionare l'immagine scaricata.
6. Selezionare Aggiungi.

Passaggio successivo

Parte 3: Tutorial: Effettuare l'accesso degli utenti nell'app shell .NET MAUI usando un tenant esterno