Condividi tramite

Accesso degli utenti a un'applicazione a pagina singola Angular di esempio

  • Articolo

Questa guida pratica usa un'applicazione a pagina singola Angular di esempio per illustrare come aggiungere utenti di autenticazione a un'applicazione a pagina singola. L'applicazione a pagina singola consente agli utenti di accedere e disconnettersi usando il tenant esterno. L'esempio usa Microsoft Authentication Library per JavaScript (MSAL.js) per gestire l'autenticazione.

Prerequisiti

Registrare l'applicazione a pagina singola nell'interfaccia di amministrazione di Microsoft Entra

Per consentire all'applicazione eseguire l'accesso degli utenti con Microsoft Entra, Microsoft Entra per ID esterno deve essere a conoscenza dell'applicazione creata. 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.

I passaggi seguenti illustrano come registrare l'app nell'interfaccia di amministrazione di Microsoft Entra:

  1. Accedere all'interfaccia di amministrazione di Microsoft Entra almeno come Sviluppatore di applicazioni.

  2. 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.

  3. Passare a Identità>Applicazioni>Registrazioni app.

  4. Seleziona + Nuova registrazione.

  5. Nella pagina Registra un'applicazione che viene visualizzata:

    1. Immettere un Nome di applicazione significativo da mostrare agli utenti dell'app, ad esempio ciam-client-app.
    2. In Tipi di account supportati selezionare Account solo in questa directory organizzativa.

  6. Selezionare Registra.

  7. Il riquadro Panoramica dell'applicazione viene visualizzato al termine della registrazione. Registrare l'ID applicazione (client) da usare nel codice sorgente dell'applicazione.

Per specificare il tipo di app per la registrazione dell'app, seguire questa procedura:

  1. In Gestisci, selezionare Autenticazione
  2. Nella pagina Configurazioni della piattaforma selezionare Aggiungi una piattaforma, quindi selezionare l'opzione Applicazione a pagina singola.
  3. Per gli URI di reindirizzamento immettere http://localhost:4200/.
  4. Selezionare Configura per salvare le modifiche.

  1. Nella pagina Registrazioni app selezionare l'applicazione creata, ad esempio ciam-client-app, per aprire la relativa pagina di Panoramica.

  2. In Gestisci selezionare Autorizzazioni API. Dall'elenco Autorizzazioni configurate è stata assegnata l'autorizzazione User.Read all'applicazione. Poiché il tenant è un tenant esterno, gli utenti consumer stessi non possono tuttavia fornire il consenso a questa autorizzazione. L'amministratore deve fornire il consenso a questa autorizzazione per conto di tutti gli utenti nel tenant:

    1. Selezionare Concedi consenso amministratore per <nome del tenant>, quindi selezionare Sì.
    2. Selezionare Aggiorna, quindi verificare che Concesso per <nome del tenant> venga visualizzato in Stato per entrambi gli ambiti.

Creare un flusso utente

Seguire questa procedura per creare un flusso utente che un cliente può usare per accedere o registrarsi a un'applicazione.

  1. Accedere all'interfaccia di amministrazione di Microsoft Entra almeno come Amministratore del flusso utente con ID esterno.

  2. 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.

  3. Passare a Identità>Identità esterne>Flussi utente.

  4. Selezionare + Nuovo flusso utente.

  5. Nella pagina Crea:

    1. Immettere un Nome per il flusso utente, ad esempio SignInSignUpSample.

    2. 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 e-mail.

      Nota

      I provider di identità aggiuntivi verranno elencati qui solo dopo la configurazione della federazione corrispondente. Ad esempio, se si configura la federazione con Google o Facebook, sarà possibile selezionare tali provider di identità aggiuntivi qui.

    3. In Account di posta elettronica è possibile selezionare una delle due opzioni. Per questa esercitazione selezionare Indirizzo e-mail con password.

      • Indirizzo e-mail con password: consente ai nuovi utenti di registrarsi e accedere usando un indirizzo e-mail come nome di accesso e una password come credenziale di primo fattore.
      • Passcode monouso per e-mail: consente ai nuovi utenti di registrarsi e accedere usando un indirizzo e-mail come nome di accesso e passcode monouso tramite e-mail come credenziale di primo fattore. Il passcode monouso per e-mail deve essere abilitato a livello di tenant (Tutti i provider di identità>Passcode monouso per e-mail) affinché questa opzione sia disponibile a livello di flusso utente.

    4. In Attributi utente scegliere gli attributi da raccogliere dall'utente al momento della registrazione. Selezionando Mostra altro, è possibile scegliere attributi e attestazioni per Paese/Area geografica, Nome visualizzato e Codice postale. Seleziona OK. Agli utenti vengono richiesti gli attributi solo quando si registrano per la prima volta.

  6. Seleziona Crea. Il nuovo flusso utente viene visualizzato nell'elenco Flussi utente. Se necessario, aggiornare la pagina.

Per abilitare la reimpostazione della password self-service, seguire la procedura descritta nell'articolo Abilitare la reimpostazione della password self-service.

Associare l'applicazione a pagina singola al flusso utente

Anche se molte applicazioni possono essere associate al flusso utente, una singola applicazione può essere associata a un solo flusso utente. Un flusso utente consente la configurazione dell'esperienza utente per applicazioni specifiche. Ad esempio, è possibile configurare un flusso utente che richiede agli utenti di accedere o registrarsi con l'indirizzo e-mail.

  1. Nel menu della barra laterale selezionare Identità.

  2. Selezionare Identità esterne, quindi Flussi utente.

  3. Nella pagina Flussi utente selezionare il Nome del flusso utente creato in precedenza, ad esempio SignInSignUpSample.

  4. In Usa selezionare Applicazioni.

  5. Seleziona Aggiungi applicazione.

  6. Selezionare l'applicazione dall'elenco, ad esempio ciam-client-app, o usare la casella di ricerca per trovare l'applicazione e quindi selezionarla.

  7. Scegli Seleziona.

Clonare o scaricare un'applicazione a pagina singola di esempio

Per ottenere l'applicazione di esempio, è possibile clonarla da GitHub o scaricarla come file ZIP.

  • Per clonare l'esempio, aprire un prompt dei comandi e passare alla posizione in cui si vuole creare il progetto e immettere il comando seguente:

    git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

  • Scaricare l'esempio. Estrarlo in un percorso di file in cui la lunghezza del nome è inferiore a 260 caratteri.

Installare le dipendenze del progetto

  1. Aprire una finestra del terminale nella directory radice del progetto di esempio e immettere il frammento di codice seguente per passare alla cartella del progetto:

    cd 1-Authentication\2-sign-in-angular\SPA

  2. Installare le dipendenze del progetto:

    npm install

Configurare l'applicazione a pagina singola di esempio

  1. Aprire SPA/src/app/auth-config.ts e sostituire quanto segue con i valori ottenuti dall'interfaccia di amministrazione di Microsoft Entra:

    • Enter_the_Application_Id_Here e sostituirlo con l'ID applicazione (client) dell’app registrata precedentemente.
    • Enter_the_Tenant_Subdomain_Here e sostituirlo con il sottodominio della directory (tenant). Ad esempio, se il dominio primario del tenant è contoso.onmicrosoft.com, usare contoso. Se non si ha il nome del tenant, vedere come leggere i dettagli del tenant.

  2. Salvare il file.

Eseguire il progetto ed eseguire l'accesso

Sono stati aggiunti tutti i frammenti di codice necessari, quindi l'applicazione può ora essere chiamata e testata in un Web browser.

  1. Aprire un nuovo terminale selezionando Terminale>Nuovo terminale.

  2. Usare il comando seguente per avviare il server Web.

    cd 1-Authentication\2-sign-in-angular\SPA
npm start

  3. Aprire un Web browser e passare a http://localhost:4200/.

  4. Accedere con un account registrato nel tenant esterno.

  5. Dopo l'accesso, il nome visualizzato viene mostrato accanto al pulsante Disconnetti.

Contenuto correlato