Condividi tramite

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

  • Articolo

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

  • Un account Azure con una sottoscrizione attiva. Se non ne hai già uno, Crea un account gratuitamente.
  • 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 di applicazioni cloud
  • Inquilino della forza lavoro. Puoi utilizzare la directory predefinita oppure configurare un nuovo tenant.
  • Visual Studio Code o un altro editor di codice.
  • Registrare una nuova app nell'interfaccia di amministrazione di Microsoft Entra con la configurazione seguente. Per delle altre informazioni, vedere la sezione Registrazione di un'applicazione.
    • Nome: identity-client-web-app
    • Tipi di account supportati: Account solo in questa directory organizzativa (tenant singolo)
    • Piattaforma di configurazione: Web
    • URI di reindirizzamento: http://localhost:3000/auth/redirect
    • URL di disconnessione front-channel: https://localhost:5001/signout-callback-oidc
  • Node.js

Aggiungere un certificato o 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 & 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, aprire il file App/.env, e quindi 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 obliqua 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.

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

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

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 sotto Stato per l'autorizzazione.

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 consentire l'accesso degli utenti con l'app di esempio, è necessario aggiornare l'app 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 vuoi creare un'app simile all'esempio che hai eseguito, completa i passaggi nell'articolo Accedere agli utenti nella propria applicazione web Node.js.

Contenuto correlato