Leggere in inglese

Condividi tramite

Guida introduttiva: Effettuare l'accesso degli utenti in un'app web di esempio

  • Articolo
Scegliere un tipo di tenant

In questa guida introduttiva, si utilizza un'app web di esempio per illustrare come far accedere gli utenti e chiamare l'API Microsoft Graph nel tenant del tuo ambiente lavorativo. L'app di esempio usa Microsoft Authentication Library per gestire l'autenticazione.

Prima di iniziare, usa il selettore Scegliere un tipo di tenant nella parte superiore di questa pagina per selezionare il tipo di tenant. Microsoft Entra ID offre due configurazioni di tenant, forza lavoro e esterna. Una configurazione del tenant di forza lavoro è destinata ai dipendenti, alle app interne e ad altre risorse organizzative. Un tenant esterno è destinato alle app rivolte ai clienti.

Prerequisiti

Registrare l'app Web

Per consentire all'applicazione di accedere agli utenti, è necessario che Microsoft Entra ID sia 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.

Per completare la registrazione, specificare un nome dell'applicazione e specificare i tipi di account supportati. Dopo la registrazione, l'applicazione panoramica riquadro visualizza gli identificatori necessari nel codice sorgente dell'applicazione.

  1. Accedere all'interfaccia di amministrazione di Microsoft Entra.

  2. Se si ha accesso a più tenant, utilizzare l'icona impostazioni nel menu in alto per passare al tenant in cui si desidera registrare l'applicazione, a partire dal menu Directory + sottoscrizioni.

  3. Passare a Identity>Applications>App registrations, selezionare Nuova registrazione.

  4. Immettere un Nome per l'applicazione, ad esempio identity-client-web-app.

  5. Per Tipi di account supportati, selezionare Account in questa directory organizzativa solo. Per informazioni sui diversi tipi di account, selezionare l'opzione Aiutami a scegliere.

  6. Selezionare Registra.

    Screenshot che mostra come immettere un nome e selezionare il tipo di account nell'interfaccia di amministrazione di Microsoft Entra.

  7. Al termine della registrazione, viene visualizzato il riquadro Panoramica dell'applicazione. Registrare l'ID Directory (tenant) e l'ID Applicazione (cliente) da usare nel codice sorgente dell'applicazione.

    Screenshot che mostra i valori dell'identificatore nella pagina di panoramica dell'interfaccia di amministrazione di Microsoft Entra.

    Nota

    I tipi di account supportati possono essere modificati facendo riferimento a Modificare gli account supportati da un'applicazione.

Aggiungere URL e piattaforma

Una piattaforma specifica il tipo di applicazione che si vuole integrare. Un URI di reindirizzamento è il percorso in cui il server di autenticazione di Identity Platform invia l'utente dopo aver autorizzato e concesso i token di sicurezza.

Per accedere a un utente, l'applicazione deve inviare una richiesta di accesso con un URI di reindirizzamento specificato come parametro e deve corrispondere a uno degli URI di reindirizzamento aggiunti nella registrazione dell'app.

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

  1. Nella sezione Gestisci, seleziona Autenticazione.
  2. Nella pagina configurazioni della piattaforma selezionare Aggiungi una piattaformae quindi selezionare 'opzione Web.
  3. Per gli URI di reindirizzamento , immetterehttp://localhost:3000/auth/redirect.
  4. In URL di disconnessione del canale frontaleimmettere https://localhost:5001/signout-callback-oidc per effettuare la disconnessione.
  5. Selezionare Configura per salvare le modifiche.

Aggiungere un segreto client o un certificato dell'app

Creare un segreto client per l'applicazione registrata. L'applicazione usa il segreto client per dimostrare la propria identità quando richiede token:

  1. Nella pagina registrazioni dell'app selezionare l'applicazione creata ( ad esempio segreto client dell'app Web) per aprire la relativa pagina Panoramica.
  2. In Gestisci, selezionare Certificati & Segreti>Segreti del client>Nuovo segreto client.
  3. Nella casella Descrizione immettere una descrizione per il segreto client, ad esempio segreto client dell'app Web).
  4. In Scade, selezionare la durata per cui il segreto rimane valido, in base alle regole di sicurezza dell'organizzazione, e quindi selezionare Aggiungi.
  5. Registra il valore del segreto. Questo valore viene usato per la configurazione in un passaggio successivo. Il valore del segreto non sarà mai più visualizzabile né recuperabile in alcun modo possibile, dopo che si esce da Certificati e segreti. Assicurarsi di registrarlo.

Quando si creano le credenziali per un'applicazione client riservata:

  • Microsoft consiglia di usare un certificato anziché un segreto client prima di spostare l'applicazione in un ambiente di produzione. Per altre informazioni su come usare un certificato, vedere le istruzioni in credenziali del certificato di autenticazione delle applicazioni di Microsoft Identity Platform.

  • A scopo di test, è possibile creare un certificato autofirmato e configurare le app per l'autenticazione. Tuttavia, nell'ambiente di produzione, è consigliabile acquistare un certificato firmato da un'autorità di certificazione nota, quindi usare Azure Key Vault per gestire l'accesso e la durata dei certificati.

Clonare o scaricare un'applicazione Web di esempio

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

  • Scaricare il file .zip, quindi estrarlo in un percorso di file in cui la lunghezza del nome è inferiore a 260 caratteri o clonare il repository:

  • 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-node.git

Configurare l'app Web di esempio

Per consentire l'accesso degli utenti con l'app di esempio, è necessario aggiornare l'app con i dettagli della tua app e del tenant:

Nella cartella ms-identity-node-main, aprire il file .env nella cartella App. Sostituire i segnaposto seguenti:

Variabile Descrizione Esempi
Enter_the_Cloud_Instance_Id_Here Istanza cloud di Azure in cui è registrata l'applicazione https://login.microsoftonline.com/ (includere la barra obliqua finale)
Enter_the_Tenant_Info_here ID tenant o dominio primario contoso.microsoft.com o aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here ID client dell'applicazione registrata 00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Client_Secret_Here Segreto client dell'applicazione registrata A1b-C2d_E3f.H4i,J5k?L6m!N7o-P8q_R9s.T0u
Enter_the_Graph_Endpoint_Here Istanza cloud dell'API Microsoft Graph chiamata dall'app https://graph.microsoft.com/ (includere la barra finale)
Enter_the_Express_Session_Secret_Here Stringa casuale di caratteri usata per firmare il cookie di sessione Express A1b-C2d_E3f.H4...

Dopo aver apportato modifiche, il file dovrebbe essere simile al frammento di codice seguente:

CLOUD_INSTANCE=https://login.microsoftonline.com/
TENANT_ID=aaaabbbb-0000-cccc-1111-dddd2222eeee
CLIENT_ID=00001111-aaaa-2222-bbbb-3333cccc4444
CLIENT_SECRET=A1b-C2d_E3f.H4...

REDIRECT_URI=http://localhost:3000/auth/redirect
POST_LOGOUT_REDIRECT_URI=http://localhost:3000

GRAPH_API_ENDPOINT=https://graph.microsoft.com/

EXPRESS_SESSION_SECRET=6DP6v09eLiW7f1E65B8k

Eseguire e testare un'app Web di esempio

Hai configurato la tua app di esempio. Puoi avviarlo e testarlo.

  1. Per avviare il server, eseguire i comandi seguenti dall'interno della directory del progetto:

    cd App
npm install
npm start

  2. Passare a http://localhost:3000/.

  3. Selezionare Accedi per avviare il processo di accesso.

La prima volta che si accede, viene richiesto di fornire il consenso per consentire all'applicazione di accedere e accedere al profilo. Dopo aver eseguito l'accesso, si verrà reindirizzati alla home page dell'applicazione.

Funzionamento dell'app

L'esempio ospita un server Web in localhost, porta 3000. Quando un Web browser accede a questo indirizzo, l'app esegue il rendering della home page. Quando l'utente seleziona Accedi, l'app reindirizza il browser alla schermata di accesso di Microsoft Entra, tramite l'URL generato dalla libreria di nodi MSAL. Dopo il consenso dell'utente, il browser reindirizza l'utente alla home page dell'applicazione, insieme a un ID e un token di accesso.

Contenuto correlato

In questa guida introduttiva si usa un'app Web di esempio per illustrare come accedere agli utenti nel tenant esterno. L'app di esempio usa Microsoft Authentication Library per gestire l'autenticazione.

Per iniziare, usare il selettore Scegliere un tipo di cliente nella parte superiore di questa pagina per selezionare il tipo di cliente. Microsoft Entra ID offre due configurazioni tenant, forza lavoro e esterna. Una configurazione del tenant della forza lavoro è destinata ai vostri dipendenti, alle applicazioni interne e ad altre risorse dell'organizzazione. Un tenant esterno è destinato alle app rivolte ai clienti.

Prerequisiti

Registrare l'app Web

Per consentire alla tua applicazione di effettuare l'accesso agli utenti con Microsoft Entra, Microsoft Entra External ID deve essere consapevole dell'applicazione che crei. 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 un Application Developer.

  2. Se hai accesso a più tenant, usa l'icona Impostazioni nel menu in alto per passare al tuo tenant esterno dal menu Directory + sottoscrizioni.

  3. Passare a Identity>Applications>Registrazioni delle app.

  4. Selezionare + Nuova registrazione.

  5. Nella pagina Registrare un'applicazione visualizzata;

    1. Immettere un nome applicativo significativo Nome visualizzato agli utenti dell'app, ad esempio ciam-client-app.
    2. In Tipi di account supportatiselezionare account in questa directory organizzativa solo.

  6. Seleziona 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.

Aggiungere URL e piattaforma

Una piattaforma specifica il tipo di applicazione che si vuole integrare. Un URI di reindirizzamento è il percorso in cui il server di autenticazione di Identity Platform invia l'utente dopo aver autorizzato e concesso i token di sicurezza.

Per accedere a un utente, l'applicazione deve inviare una richiesta di accesso con un URI di reindirizzamento specificato come parametro e deve corrispondere a uno degli URI di reindirizzamento aggiunti nella registrazione dell'app.

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 piattaformae quindi selezionare 'opzione Web.
  3. Per gli URI di reindirizzamento , immettere http://localhost:3000/auth/redirect.
  4. Selezionare Configura per salvare le modifiche.

Aggiungere un segreto del client dell'app

Creare un segreto client per l'applicazione registrata. L'applicazione usa il segreto client per dimostrare la propria identità quando richiede token:

  1. Nella pagina registrazioni dell'app selezionare l'applicazione creata ( ad esempio segreto client dell'app Web) per aprire la relativa pagina Panoramica.
  2. In Gestisci, selezionare Certificati e segreti &>Segreti client>Nuovo segreto client.
  3. Nella casella Descrizione immettere una descrizione per il segreto client, ad esempio segreto client dell'app Web).
  4. In Scade, seleziona una durata per la quale il segreto è valido (in base alle regole di sicurezza dell'organizzazione) e quindi seleziona Aggiungi.
  5. Registra il valore del segreto. Questo valore viene usato per la configurazione in un passaggio successivo. Il valore del segreto non verrà visualizzato di nuovo e non sarà recuperabile in alcun modo, dopo aver lasciato la sezione Certificati e segreti. Assicurarsi di registrarlo.

Quando si creano le credenziali per un'applicazione client riservata:

  • Microsoft consiglia di usare un certificato anziché un segreto client prima di spostare l'applicazione in un ambiente di produzione. Per altre informazioni su come usare un certificato, vedere le istruzioni in credenziali del certificato di autenticazione delle applicazioni di Microsoft Identity Platform.

  • A scopo di test, è possibile creare un certificato autofirmato e configurare le app per l'autenticazione. Tuttavia, nell'ambiente di produzione, è consigliabile acquistare un certificato firmato da un'autorità di certificazione nota, quindi utilizzare Azure Key Vault per gestire l'accesso e la durata dei certificati.

Dopo aver registrato l'applicazione, viene assegnata l'autorizzazione User.Read. Tuttavia, poiché il tenant è un tenant esterno, gli utenti del cliente stessi non possono fornire il consenso a questa autorizzazione. L'amministratore del tenant deve fornire il consenso a questa autorizzazione per conto di tutti gli utenti nel tenant:

  1. Nella pagina registrazioni app, selezionare l'app che hai creato (ad esempio ciam-client-app) per aprire la relativa pagina Panoramica.

  2. In Gestisciselezionare autorizzazioni API .

    1. Selezionare Concedi consenso amministratore per <nome del tenant>e quindi selezionare Sì.
    2. Selezionare Aggiorna, quindi verificare che Concesso per <il nome del tenant> venga visualizzato in Stato per l'autorizzazione.

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. Accedi al centro di amministrazione di Microsoft Entra come amministratore del flusso utente con ID esterno , oppure con un ruolo superiore.

  2. Se si ha accesso a più tenant, usare l'icona Impostazioni nel menu in alto per passare al tenant esterno dal menu Directory + sottoscrizioni.

  3. Sfoglia fino a Identità>Identità esterne>Flussi utente.

  4. Seleziona + Nuovo flusso utente.

  5. Nella pagina Crea :

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

    2. Nell'elenco provider di identità selezionare Account di posta elettronica. 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, Facebook, Apple o un provider di identità OIDC , sarà possibile selezionare tali provider di identità aggiuntivi qui.

    3. In account di posta elettronicaè possibile selezionare una delle due opzioni. Per questa esercitazione, seleziona Email con la password.

      • Messaggio 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 primo fattore di autenticazione.
      • Codice di accesso unico via email: Consente ai nuovi utenti di registrarsi e accedere utilizzando un indirizzo email come nome di accesso e un codice di accesso unico via email come prima credenziale del fattore. Il passcode monouso della posta elettronica deve essere abilitato a livello di tenant (tutti i provider di identità>passcode monouso di posta elettronica) per rendere disponibile questa opzione a livello di flusso utente.

    4. In Attributi utentescegliere gli attributi da raccogliere dall'utente al momento dell'iscrizione. Selezionando Mostra altri, è possibile scegliere attributi e attestazioni per paese/area geografica, nome visualizzatoe 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 appare 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 Web 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. Anche se molte applicazioni possono essere associate al flusso utente, una singola applicazione può essere associata solo a un flusso utente.

  1. Nel menu della barra laterale selezionare Identity.

  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 Utilizza, selezionare Applicazioni.

  5. Selezionare 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. Scegliere Selezionare.

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 i passaggi descritti in Testare il flusso utente di iscrizione e accesso.

Clonare o scaricare un'applicazione Web 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

  • In alternativa, scaricare il file di esempio .zip, quindi 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 della console e passare alla directory che contiene l'app di esempio Node.js:

    cd 1-Authentication\5-sign-in-express\App

  2. Eseguire i comandi seguenti per installare le dipendenze dell'app:

    npm install

Configurare l'app Web di esempio

Per permettere agli utenti di accedere utilizzando l'app di esempio, è necessario aggiornarla con i dettagli della tua app e del tenant:

  1. Nell'editor di codice, apri il file di\authConfig.js app.

  2. Trova il segnaposto:

    • Enter_the_Application_Id_Here e sostituirlo con l'ID applicazione (client) dell'app registrata in precedenza.
    • Enter_the_Tenant_Subdomain_Here e sostituirlo con il sottodominio Directory (tenant). Ad esempio, se il dominio primario del tenant è contoso.onmicrosoft.com, usare contoso. Se non hai il nome del "tenant", scopri come leggere i dettagli del "tenant".
    • Enter_the_Client_Secret_Here e sostituirlo con il codice segreto dell'app che hai copiato in precedenza.

Eseguire e testare un'app Web di esempio

È ora possibile testare l'app Web di esempio Node.js. È necessario avviare il server Node.js e accedervi tramite il browser in http://localhost:3000.

  1. Nel terminale eseguire il comando seguente:

    npm start

  2. Aprire il browser, quindi passare a http://localhost:3000. La pagina dovrebbe essere simile alla schermata seguente:

    Screenshot dell'accesso a un'applicazione web Node.

  3. Al termine del caricamento della pagina, selezionare Accedi quando richiesto.

  4. Nella pagina di accesso digitare l'indirizzo di posta elettronica , selezionare Avanti, digitare Password, quindi selezionare Accedi. Se non si ha un account, selezionare Nessun account? Creare un collegamento, che avvia il flusso di iscrizione.

  5. Se si sceglie l'opzione di iscrizione, dopo aver compilato il messaggio di posta elettronica, il passcode monouso, la nuova password e altri dettagli dell'account, si completa l'intero flusso di iscrizione. Viene visualizzata una pagina simile allo screenshot seguente. Se si sceglie l'opzione di accesso, viene visualizzata una pagina simile.

    Screenshot delle attestazioni del token ID di visualizzazione.

  6. Selezionare Disconnettersi per disconnettere l'utente dall'app Web oppure selezionare Visualizzare le attestazioni del token ID per visualizzare le attestazioni del token ID restituite da Microsoft Entra.

Come funziona

Quando gli utenti selezionano il collegamento Accedi, l'app avvia una richiesta di autenticazione e reindirizza gli utenti all'ID esterno di Microsoft Entra. Nella pagina di accesso o iscrizione visualizzata, dopo che un utente ha eseguito l'accesso o creato un account, Microsoft Entra External ID restituisce un token ID all'app. L'app convalida il token ID, legge le attestazioni e restituisce una pagina sicura agli utenti.

Quando gli utenti selezionano il collegamento Disconnetti, l'app cancella la sessione, quindi reindirizza l'utente all'endpoint di disconnessione dell'ID esterno di Microsoft Entra per notificare che l'utente si è disconnesso.

Se si vuole creare un'app simile all'esempio eseguito, completare i passaggi descritti in Accedere agli utenti nel proprio articolo Node.js'applicazione Web.

Contenuto correlato