Esercitazione: Configurare un'app Web Node.js per l'autenticazione degli utenti tramite la piattaforma di identità Microsoft

si applica a: utenti della forza lavoro utenti esterni (ulteriori informazioni)

In questa esercitazione si apprenderà come creare un'app Web Node/Express.js che consente l'accesso degli utenti all'app rivolta ai clienti in un tenant esterno o del personale in un tenant della forza lavoro. L'esercitazione illustra anche come acquisire un token di accesso per chiamare l'API Microsoft Graph.

Questa esercitazione è la parte 1 di una serie in 3 parti.

In questa esercitazione imparerai a

• Configurare un progetto di Node.js
• Installare le dipendenze
• Aggiungere visualizzazioni app e componenti dell'interfaccia utente

Prerequisiti

• Se non l'hai già fatto, completa i passaggi descritti in Avvio rapido: Effettuare l'accesso utenti in un'applicazione web di esempio. Nell'esempio rapido, non è necessario clonare ed eseguire l'esempio di codice.
• Node.js.
• Visual Studio Code o un altro editor di codice.

Creare il progetto Node.js

1. In un percorso preferito nel tuo computer, crea una cartella per ospitare la tua applicazione Node, ad esempio ciam-sign-in-node-express-web-app.

2. Nel terminale modificare la directory nella cartella dell'app Web Node, ad esempio cd ciam-sign-in-node-express-web-app, quindi eseguire il comando seguente per creare un nuovo progetto di Node.js:

   npm init -y
   

   Il comando init -y crea un file di package.json predefinito per il progetto Node.js.

3. Creare cartelle e file aggiuntivi per ottenere la struttura di progetto seguente:

       ciam-sign-in-node-express-web-app/
       ├── server.js
       └── app.js
       └── authConfig.js
       └── package.json
       └── .env
       └── auth/
           └── AuthProvider.js
       └── controller/
           └── authController.js
       └── routes/
           └── auth.js
           └── index.js
           └── users.js
       └── views/
           └── layouts.hbs
           └── error.hbs
           └── id.hbs
           └── index.hbs   
       └── public/stylesheets/
           └── style.css
   

Installare le dipendenze delle app

Per installare nel terminale i pacchetti npm richiesti relativi all'identità e a Node.js, eseguite il comando seguente

npm install express dotenv hbs express-session axios cookie-parser http-errors morgan @azure/msal-node   

Creare componenti dell'interfaccia utente dell'app

1. Nell'editor di codice aprire file views/index.hbs, quindi aggiungere il codice seguente:

       <h1>{{title}}</h1>
       {{#if isAuthenticated }}
       <p>Hi {{username}}!</p>
       <a href="/users/id">View ID token claims</a>
       <br>
       <a href="/auth/signout">Sign out</a>
       {{else}}
       <p>Welcome to {{title}}</p>
       <a href="/auth/signin">Sign in</a>
       {{/if}}
   

   In questa visualizzazione, se l'utente è autenticato, mostriamo il nome utente e i collegamenti per visitare /auth/signout e /users/id endpoint. In caso contrario, l'utente deve visitare l'endpoint /auth/signin per accedere. Le route rapide per questi endpoint vengono definite più avanti in questo articolo.

2. Nell'editor di codice aprire file views/id.hbs, quindi aggiungere il codice seguente:

       <h1>Azure AD for customers</h1>
       <h3>ID Token</h3>
       <table>
           <tbody>
               {{#each idTokenClaims}}
               <tr>
                   <td>{{@key}}</td>
                   <td>{{this}}</td>
               </tr>
               {{/each}}
           </tbody>
       </table>
       <a href="/">Go back</a>
   

   Utilizziamo questa vista per mostrare le attestazioni del token ID che Microsoft Entra External ID restituisce a questa app dopo che un utente ha effettuato con successo l'accesso.

3. Nell'editor di codice aprire file views/error.hbs, quindi aggiungere il codice seguente:

       <h1>{{message}}</h1>
       <h2>{{error.status}}</h2>
       <pre>{{error.stack}}</pre>
   

   Questa visualizzazione viene usata per visualizzare eventuali errori che si verificano durante l'esecuzione dell'app.

4. Nell'editor di codice aprire file views/layout.hbs, quindi aggiungere il codice seguente:

       <!DOCTYPE html>
       <html>        
           <head>
               <title>{{title}}</title>
               <link rel='stylesheet' href='/stylesheets/style.css' />
           </head>            
           <body>
               {{{content}}}
           </body>        
       </html>
   

   Il file layout.hbs si trova nel file di layout. Contiene il codice HTML necessario per tutta la visualizzazione dell'applicazione.

5. Nell'editor di codice, apri il file public/stylesheets/style.css, poi aggiungi il seguente codice:

       body {
         padding: 50px;
         font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
       }
   
       a {
         color: #00B7FF;
       }
   

Passaggio successivo

Esercitazione: Implementare l'accesso nell'app Web Node.js/Express.js.