Esercitazione: Preparare il tenant esterno per autenticare gli utenti in un’app a pagina singola Angular
Questa serie di esercitazioni mostra come compilare un'applicazione a pagina singola e prepararla per l'autenticazione usando l'interfaccia di amministrazione di Microsoft Entra. Usare la Library Microsoft Authentication per JavaScript per autenticare l'app con il tenant esterno. Infine, eseguire l'applicazione e testare le esperienze di accesso e disconnessione.
Contenuto dell'esercitazione:
- Registrare un'applicazione a pagina singola nell'interfaccia di amministrazione di Microsoft Entra e registrare i relativi identificatori
- Definire la piattaforma e gli URL
- Concedere le autorizzazioni all'applicazione a pagina singola per accedere all'API Microsoft Graph
- Creare un flusso utente di informazioni di accesso e di disconnessione nell'interfaccia di amministrazione di Microsoft Entra.
- Associare l'applicazione a pagina singola al flusso utente
Prerequisiti
- Un tenant esterno. Per crearne uno, scegliere tra i metodi seguenti:
- (Scelta consigliata) Usare l'estensione Microsoft Entra per ID esterno per impostare un tenant esterno direttamente in Visual Studio Code.
- Creare un nuovo tenant esterno nell'interfaccia di amministrazione di Microsoft Entra.
- Questo account di Azure deve disporre delle autorizzazioni per gestire le applicazioni. Uno dei seguenti ruoli di Microsoft Entra include le autorizzazioni necessarie:
- Amministratore di applicazioni
- Sviluppatore di applicazioni
- Amministratore applicazione cloud
Registrare l’applicazione a pagina singola e gli identificatori del record
Affinché l'applicazione possa consentire l’accesso agli utenti con Microsoft Entra, l’ID esterno a Microsoft Entra deve sapere che è stata creata un’applicazione. La registrazione dell'app stabilisce una relazione di trust tra l'app e Microsoft Entra. Quando si registra un'applicazione, l'ID esterno genera un identificatore univoco noto come ID applicazione (client), un valore usato per identificare l'app durante la creazione di richieste di autenticazione.
La procedura seguente spiega come registrare l'app nell'Interfaccia di amministrazione di Microsoft Entra:
Accedere all’Interfaccia di amministrazione di Microsoft Entra almeno come sviluppatore di applicazioni.
Se si ha accesso a più tenant, usare l'icona Impostazioni
nel menu in alto per passare al tenant esterno dal menu Directory e sottoscrizioni.Passare a Identità>Applicazioni>Registrazioni app.
Seleziona + Nuova registrazione.
Nella pagina Registra un'applicazione che viene visualizzata:
- Immettere un nome significativo per l’applicazione da mostrare agli utenti dell'app, ad esempio ciam-client-app.
- In Tipi di account supportati selezionare Account solo in questa directory organizzativa.
Selezionare Registra.
Al termine della registrazione, viene visualizzato il riquadro Panoramica dell'applicazione. Registrare l'ID applicazione (client) da usare nel codice sorgente dell'applicazione.
Aggiungere un URL di reindirizzamento della piattaforma
Per specificare il tipo di app durante la registrazione dell'app seguire i passaggi seguenti:
- In Gestisci, selezionare Autenticazione
- Nella pagina Configurazioni della piattaforma selezionare Aggiungi una piattaforma, quindi selezionare Applicazione a pagina singola.
- Per gli URI di reindirizzamento immettere
http://localhost:4200/. - Selezionare Configura per salvare le modifiche.
Concedere il consenso amministratore
Nella pagina Registrazioni app, selezionare l'applicazione creata (ad esempio ciam-client-app) per aprire la relativa pagina Panoramica.
In Gestisci selezionare Autorizzazioni API. Nell'elenco Autorizzazioni configurate all'applicazione è stata assegnata l'autorizzazione User.Read. Tuttavia, poiché il tenant è esterno, gli utenti consumer non possono fornire il consenso a questa autorizzazione. L'amministratore deve fornire il consenso a questa autorizzazione per conto di tutti gli utenti nel tenant:
- Selezionare Concedi consenso amministratore per <nome del tenant>, quindi selezionare Sì.
- Selezionare Aggiorna, quindi verificare che Concesso per <nome del tenant> sia visualizzato in Stato per entrambi gli ambiti.
Creare un flusso utente
Accedere all'Interfaccia di amministrazione di Microsoft Entra almeno come ID esterno - Amministratore dei flussi utente.
Se si ha accesso a più tenant, usare l'icona Impostazioni
nel menu in alto per passare al tenant esterno dal menu Directory e sottoscrizioni.Passare a Identità>Identità esterne>Flussi utente.
Selezionare + Nuovo flusso utente.
Nella pagina Crea:
Immettere un nome per il flusso utente, ad esempio SignInSignUpSample.
Nell'elenco Provider di identità selezionare Account di posta elettronica. Questo provider di identità consente agli utenti di accedere o registrarsi usando il proprio indirizzo di posta elettronica.
In Account di posta elettronicaè possibile selezionare una delle due opzioni. Per questa esercitazione selezionare Indirizzo di posta elettronica con password.
Indirizzo di posta elettronica con password: consente ai nuovi utenti di registrarsi e accedere usando un indirizzo di posta elettronica come nome di accesso e una password come credenziale di primo fattore.
Passcode monouso tramite posta elettronica: consente ai nuovi utenti di registrarsi e accedere usando un indirizzo di posta elettronica come nome di accesso e un passcode monouso ricevuto tramite messaggio di posta elettronica come credenziale di primo fattore.
Nota
L’opzione Passcode monouso tramite messaggio di posta elettronica deve essere abilitata a livello di tenant (Tutti i provider di identità>Passcode monouso tramite posta elettronica), affinché sia disponibile a livello di flusso utente.
Seleziona Crea. Il nuovo flusso utente viene visualizzato nell'elenco Flussi utente. Se necessario, aggiornare la pagina.
Associare l'applicazione al flusso utente
Per consentire agli utenti del cliente di visualizzare l'esperienza di iscrizione o di accesso quando usano l'app, è necessario associare l'app a un flusso utente. Sebbene sia possibile associare molte applicazioni al flusso utente, è possibile associare un solo flusso utente a una singola applicazione.
Nel menu della barra laterale selezionare Identità.
Selezionare Identità esterne, quindi Flussi utente.
Nella pagina Flussi utente selezionare il nome del flusso utente creato in precedenza, ad esempio SignInSignUpSample.
In Usa selezionare Applicazioni.
Seleziona Aggiungi applicazione.
Selezionare l'applicazione dall'elenco, ad esempio ciam-client-app o usare la casella di ricerca per trovare l'applicazione e selezionarla.
Scegli Seleziona.
Dopo aver associato l'app a un flusso utente, è possibile testare il flusso utente simulando l'esperienza di iscrizione o di accesso di un utente con l'applicazione dall'interfaccia di amministrazione di Microsoft Entra. A tale scopo, usare la procedura descritta in Testare il flusso utente di iscrizione e di accesso.