Consentire agli utenti di accedere a un'applicazione javaScript di esempio a pagina singola

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

Prerequisiti

• Anche se è possibile usare qualsiasi IDE che supporta applicazioni vanilla JS, Visual Studio Code è consigliato per questa guida. Può essere scaricato dalla pagina Download .
• Node.js.
• Microsoft Entra ID per il tenant dei clienti. Se non è già disponibile, iscriversi per ottenere una versione di valutazione gratuita.

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

Per consentire all'applicazione di accedere agli utenti con Microsoft Entra, Microsoft Entra ID per i clienti deve essere informato 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 il filtro Directory e sottoscrizioni nel menu in alto per passare al tenant del cliente.

3. Passare aApplicazioni>di identità>Registrazioni app.

4. Selezionare + Nuova registrazione.

5. Nella pagina Registra un'applicazione visualizzata;

   1. Immettere un nome di applicazione significativo visualizzato 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 e quindi selezionare l'opzione SPA .
3. Per gli URI di reindirizzamento immettere http://localhost:3000/redirect
4. Selezionare Configura per salvare le modifiche.
5. Tornare alla pagina Configurazioni della piattaforma , nella nuova applicazione a pagina singola visualizzata selezionare Aggiungi URI e quindi immettere http://localhost:3000/
6. Selezionare Salva per salvare le modifiche e assicurarsi che siano elencati entrambi gli URI.

Concedere le autorizzazioni delle API

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

2. In Gestisci selezionare Autorizzazioni API.

3. In Autorizzazioni configurate selezionare Aggiungi un'autorizzazione.

4. Selezionare la scheda API Microsoft .

5. Nella sezione API Microsoft di uso comune selezionare Microsoft Graph.

6. Selezionare l'opzione Autorizzazioni delegate .

7. Nella sezione Seleziona autorizzazioni cercare e selezionare sia openid che offline_access autorizzazioni.

8. Selezionare il pulsante Aggiungi autorizzazioni.

9. A questo punto, le autorizzazioni sono state assegnate correttamente. Tuttavia, poiché il tenant è un tenant di un cliente, gli utenti consumer stessi non possono fornire il consenso a queste autorizzazioni. L'amministratore deve fornire il consenso a queste autorizzazioni per conto di tutti gli utenti nel tenant:

   1. Selezionare Concedi consenso amministratore per <il nome> del tenant e quindi selezionare Sì.
   2. Selezionare Aggiorna, quindi verificare che Concesso per <il nome> del tenant sia 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 iscriversi 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 il filtro Directory e sottoscrizioni nel menu in alto per passare al tenant del cliente.

3. Passare a Identità>>esterneFlussi 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 Email Account. Questo provider di identità consente agli utenti di accedere o iscriversi usando il proprio indirizzo di posta elettronica.

      Nota

      I provider di identità aggiuntivi verranno elencati qui solo dopo aver configurato la federazione con essi. Ad esempio, se si configura la federazione con Google o Facebook, sarà possibile selezionare i provider di identità aggiuntivi qui.

   3. In Email account è possibile selezionare una delle due opzioni. Per questa esercitazione selezionare Email con password.

      • Email con password: consente ai nuovi utenti di iscriversi e accedere usando un indirizzo di posta elettronica come nome di accesso e una password come prima credenziale fattore.

      • Email passcode monouso: consente ai nuovi utenti di iscriversi e accedere usando un indirizzo di posta elettronica come nome di accesso e passcode monouso come prima credenziale del fattore.

        Nota

        Email passcode monouso deve essere abilitato a livello di tenant (Tutti i provider di> identità Email passcode monouso) affinché questa opzione sia disponibile a livello di flusso utente.

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

6. Selezionare 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 solo a un 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 iscriversi con un numero di telefono o un indirizzo di posta elettronica.

1. Nel menu della barra laterale selezionare Identità.

2. Selezionare Identità esterne e 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. Selezionare Aggiungi applicazione.

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

7. Scegliere Seleziona.

Clonare o scaricare l'applicazione a pagina singola di esempio

Per ottenere l'applicazione a pagina singola di esempio, è possibile scegliere una delle opzioni seguenti:

• Clonare il repository usando Git:

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

• Scaricare l'esempio

Se si sceglie di scaricare il file, estrarre il .zip file dell'app di esempio in una cartella in cui la lunghezza totale del percorso è di 260 o meno 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\0-sign-in-vanillajs\App
   

2. Installare le dipendenze del progetto:

       npm install
   

Configurare l'applicazione a pagina singola di esempio

1. Aprire authConfig.js.
2. Trovare Enter_the_Tenant_Name_Here e sostituirlo con il nome del tenant.
3. In Autorità trovare Enter_the_Tenant_Subdomain_Here e sostituirlo con il sottodominio del tenant. Ad esempio, se il dominio primario del tenant è caseyjensen@onmicrosoft.com, il valore da immettere è casyjensen.
4. Salvare il file.

Eseguire il progetto e accedere

1. Aprire un nuovo terminale ed eseguire il comando seguente per avviare il server Web express.

   npm start
   

2. Aprire un Web browser e passare a http://localhost:3000/.

3. Accedere con un account registrato al tenant del cliente.

4. Dopo aver eseguito l'accesso al nome visualizzato, viene visualizzato accanto al pulsante Disconnessione , come illustrato nello screenshot seguente.

5. La spa visualizzerà ora un pulsante che indica Le informazioni sul profilo di richiesta. Selezionarlo per visualizzare i dati del profilo.

   

Disconnettersi dall'applicazione

1. Per disconnettersi dall'applicazione, selezionare Disconnettersi nella barra di spostamento.
2. Viene visualizzata una finestra che chiede quale account disconnettersi.
3. Al termine dell'disconnesso, viene visualizzata una finestra finale che indica di chiudere tutte le finestre del browser.

Passaggi successivi

Abilitare la reimpostazione self-service delle password