Esercitazione: Creare un'app shell .NET MAUI

Si applica a: tenant della forza lavoro tenant esterni (ulteriori informazioni)

Questa esercitazione è la parte 1 di una serie che illustra come creare un'app shell dell'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) e prepararla per l'autenticazione usando l'interfaccia di amministrazione di Microsoft Entra. In questa esercitazione si aggiungerà un helper client di Microsoft Authentication Library (MSAL) personalizzato per inizializzare MSAL SDK, installare le librerie necessarie e includere una risorsa immagine.

In questa esercitazione, farai:

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

Prerequisiti

• Registrare una nuova applicazione Web client nel centro di amministrazione di Microsoft Entra, configurata per gli account in qualsiasi directory organizzativa e per gli account Microsoft personali. Per altri dettagli, vedere Registrare un'applicazione . Registrare i valori seguenti dalla pagina Panoramica dell'applicazione per usarli in un secondo momento:
  • ID applicazione (cliente)
  • ID della directory (cliente)
• Aggiungere gli URI di reindirizzamento seguenti usando la configurazione della piattaforma delle applicazioni per dispositivi mobili e desktop . Per altri dettagli, vedere Come aggiungere un URI di reindirizzamento nell'applicazione .
  • URI di reindirizzamento: msal{client_id}://auth dove {client_id} è l'ID applicazione (client) dell'app.
• .NET SDK
• Visual Studio 2022 con il workload MAUI installato:
  • istruzioni per l'installazione di Visual Studio

Creare un'app shell .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 .NET MAUI App e selezionare Avanti.
3. Nella finestra Configura il nuovo progetto, il Nome progetto deve essere impostato su SignInMaui. Aggiornare il nome della soluzione in sign-in-maui e selezionare Avanti.
4. Nella finestra Informazioni aggiuntive scegliere .NET SDK più recente 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 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 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 dimostra come utilizzare il logging 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, poiché 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 e selezionare Aggiungi>Nuova cartella. Denominare la cartella MSALClient.
2. Fare clic con il pulsante destro del mouse sulla cartella MSALClient, quindi selezionare Aggiungi>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 Gestione pacchetti NuGet per installare il pacchetto Microsoft.Identity.Client in Visual Studio, seguire questa procedura:

1. Seleziona Strumenti >Gestore 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 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 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 rivela 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 per tipo di file a File di immagine.
5. Selezionare l'immagine scaricata.
6. Selezionare Aggiungi.

Passaggio successivo

Parte 3: Guida: Accesso degli utenti in un'app shell di .NET MAUI utilizzando un tenant esterno