Esercitazione: Preparare un'applicazione Web Node.js per l'autenticazione

Articolo
06/19/2024

Questa esercitazione è la parte 2 di una serie che illustra la creazione di un'app Web Node.js e la preparazione per l'autenticazione tramite l'interfaccia di amministrazione di Microsoft Entra. Nella parte 1 di questa serie è stata registrata un'applicazione e sono stati configurati i flussi utente nel tenant esterno. In questa esercitazione si crea un progetto Node.js(Express) e si organizzano tutte le cartelle e i file necessari. Si abilita l'accesso all'applicazione che si prepara qui. Le visualizzazioni di questa applicazione Web Node.js(Express) usano le barre dei gestori.

In questa esercitazione si apprenderà come;

Creare un progetto Web Node.js
Installare le dipendenze
Aggiungere visualizzazioni app e componenti dell'interfaccia utente

Prerequisiti

Esercitazione: preparare il tenant esterno per l'accesso degli utenti in una Web app Node.js
Anche se è possibile usare qualsiasi ambiente di sviluppo integrato (IDE) che supporta le applicazioni React, questa esercitazione usa Visual Studio Code.
Node.js.
Visual Studio Code o un altro editor di codice.

Creare il progetto Node.js

In un percorso preferito nel computer creare una cartella per ospitare l'applicazione del nodo, ad esempio ciam-sign-in-node-express-web-app.
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 Node.js:
```
npm init -y
```
Il comando init -y crea un file package.json predefinito per il progetto Node.js.

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 dell'app

Per installare l'identità richiesta e Node.js pacchetti npm correlati, eseguire il comando seguente nel terminale

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

Creare componenti dell'interfaccia utente dell'app

Nell'editor di codice aprire il file views/index.hbs e 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 ed /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.

Nell'editor di codice aprire il file views/id.hbs e 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>

Questa visualizzazione viene usata per visualizzare le attestazioni del token ID restituite da Microsoft Entra External ID all'app dopo l'accesso dell'utente.

Nell'editor di codice aprire il file views/error.hbs e 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.

Nell'editor di codice aprire il file views/layout.hbs e 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.

Nell'editor di codice aprire pubblici/stylesheet/style.css, file, quindi aggiungere il codice seguente:

    body {
      padding: 50px;
      font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
    }

    a {
      color: #00B7FF;
    }

Passaggio successivo

Parte 3: Aggiungere l'accesso e disconnettersi nell'applicazione Web Node.js

Condividi tramite