Esercitazione: Creare un'app .NET MAUI

Questa esercitazione è la seconda parte di una serie che mostra come creare un'app shell .NET Multi-Platform App UI (.NET MAUI). Nella prima parte di questa serie è stata registrata un'applicazione e sono stati configurati i flussi utente nel tenant esterno. Questa esercitazione mostra come creare un'app shell .NET MAUI, aggiungere un helper client MSAL (Microsoft Authentication Library) personalizzato per inizializzare MSAL SDK, installare le librerie necessarie e includere una risorsa immagine.

In questa esercitazione si apprenderà come:

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

Prerequisiti

• Esercitazione: Registrare e configurare un'app .NET MAUI in un tenant esterno
• .NET 7.0 SDK
• Visual Studio 2022 con il carico di lavoro MAUI installato:
  • Istruzioni per Windows
  • Istruzioni per macOS

Creare l'app .NET MAUI

1. Nella finestra iniziale di Visual Studio 2022, selezionare Crea un nuovo progetto.
2. Nella finestra Crea un nuovo progetto, selezionare MAUI nell'elenco a discesa “Tutti i tipi di progetto”, selezionare il modello App .NET MAUI, quindi selezionare Avanti.
3. Nella finestra Configura il nuovo progetto è necessario impostare Nome progetto su SignInMaui. Aggiornare il nome della soluzione impostandolo su sign-in-maui, quindi selezionare Avanti.
4. Nella finestra Informazioni aggiuntive, scegliere .NET 7.0 e selezionare Crea.

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

Aggiungere il supporto di MSAL SDK usando le classi helper 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 è possibile scaricare 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 ottiene e imposta gli ambiti 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 mostra come usare la registrazione 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 di finestra.

Importante

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

Spostare i file MSALClient con Visual Studio

1. Nel riquadro Esplora soluzioni, fare clic con il pulsante destro del mouse sul progetto SignInMaui, quindi selezionare Aggiungi>Nuova cartella. Assegnare alla cartella il nome MSALClient.
2. Fare clic con il pulsante destro del mouse sulla cartella MSALClient e selezionare Aggiungi>Elemento esistente....
3. Passare alla cartella che contiene i file MSALClient scaricati in precedenza.
4. Selezionare tutti i file MSALClient, quindi selezionare Aggiungi

Installare i pacchetti necessari

È necessario installare i pacchetti seguenti:

• Microsoft.Identity.Client: questo pacchetto contiene i file binari di Microsoft Authentication Library for .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 for .NET (MSAL.NET).

Gestione pacchetti NuGet

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

1. Selezionare Strumenti>Gestione pacchetti NuGet>Gestisci pacchetti NuGet per la soluzione.
2. Nella scheda Sfoglia cercare Microsoft.Identity.Client.
3. Selezionare Microsoft.Identity.Client nell'elenco.
4. Selezionare SignInMaui nel riquadro con l’elenco 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 viene scaricata un'immagine che verrà usata nell’app per migliorare il modo in cui gli utenti interagiscono con essa.

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 contiene la cartella Immagini.
2. Fare clic con il pulsante destro del mouse su Immagini, quindi selezionare Aggiungi>Elemento esistente....
3. Passare alla cartella che contiene le immagini scaricate.
4. Modificare il filtro passando dal filtro del tipo di file a File di immagine.
5. Selezionare l'immagine scaricata.
6. Selezionare Aggiungi.

Passaggio successivo

Parte 3: Concedere l’accesso utente nell'app shell .NET MAUI usando un tenant esterno