Esercitazione: Creare un'applicazione a pagina singola JavaScript Vanilla per l'autenticazione in un tenant esterno

Articolo
06/21/2024

Questa esercitazione è la seconda parte di una serie che illustra la creazione di un'applicazione a pagina singola (SPA) Vanilla JavaScript (JS) e la preparazione per l'autenticazione tramite l'interfaccia di amministrazione di Microsoft Entra. Nella prima parte di questa serie è stata registrata un'applicazione e sono stati configurati flussi utente nel proprio tenant esterno. Questa esercitazione illustra come creare un'applicazione a pagina singola JavaScript Vanilla usando npm e creare i file necessari per l'autenticazione e l'autorizzazione.

Contenuto dell'esercitazione:

Creare un progetto JavaScript Vanilla in Visual Studio Code
Installare i pacchetti necessari
Aggiungere codice a server.js per creare un server

Prerequisiti

Esercitazione: Preparare il proprio tenant esterno per autenticare gli utenti in un'applicazione a pagina singola JavaScript Vanilla.
Anche se è possibile usare qualsiasi ambiente di sviluppo integrato (IDE) che supporti applicazioni JavaScript Vanilla, Visual Studio Code è consigliato per questa guida. Può essere scaricato dalla pagina Download.
Node.js.

Creare un nuovo progetto JavaScript Vanilla e installare le dipendenze

In Visual Studio Code, selezionare File>Apri cartella.... Passare a e selezionare il percorso in cui creare il progetto.
Aprire un nuovo terminale selezionando Terminale>Nuovo terminale.
Eseguire il comando seguente per creare un nuovo progetto JavaScript Vanilla:
```
npm init -y
```

Creare ulteriori cartelle e file per ottenere la struttura di progetto seguente:

    └── public
        └── authConfig.js
        └── authPopup.js
        └── authRedirect.js
        └── claimUtils.js
        └── index.html
        └── signout.html
        └── styles.css
        └── ui.js    
    └── server.js

Installare le dipendenze dell'app

Nel Terminale, eseguire il comando seguente per installare le dipendenze necessarie per il progetto:
```
npm install express morgan @azure/msal-browser
```

Modificare il file server.js

Express è un framework applicazione Web per Node.js. Viene usato per creare un server che ospita l'applicazione. Morgan è il middleware che registra le richieste HTTP alla console. Il file del server viene usato per ospitare queste dipendenze e contiene il percorso per l'applicazione. L'autenticazione e l'autorizzazione vengono gestite da Microsoft Authentication Library per JavaScript (MSAL.js).

Aggiungere il frammento di codice seguente al file server.js:

const express = require('express');
const morgan = require('morgan');
const path = require('path');

const DEFAULT_PORT = process.env.PORT || 3000;

// initialize express.
const app = express();

// Configure morgan module to log all requests.
app.use(morgan('dev'));

// serve public assets.
app.use(express.static('public'));

// serve msal-browser module
app.use(express.static(path.join(__dirname, "node_modules/@azure/msal-browser/lib")));

// set up a route for signout.html
app.get('/signout', (req, res) => {
    res.sendFile(path.join(__dirname + '/public/signout.html'));
});

// set up a route for redirect.html
app.get('/redirect', (req, res) => {
    res.sendFile(path.join(__dirname + '/public/redirect.html'));
});

// set up a route for index.html
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(DEFAULT_PORT, () => {
    console.log(`Sample app listening on port ${DEFAULT_PORT}!`);
});

In questo codice, la variabile dell'app viene inizializzata con il modulo express ed express viene usato per gestire gli asset pubblici. MSAL-browser funge come asset statico e viene usato per avviare il flusso di autenticazione.

Passaggio successivo

Parte 3: Gestire flussi di autenticazione in un'applicazione a pagina singola JavaScript Vanilla

Condividi tramite