Condividi tramite

Esercitazione: aggiungere l'accesso e la disconnessione nell'applicazione Web Node.js

  • Articolo

Questa esercitazione costituisce la parte finale 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 2 di questa serie è stata creata un'app Web Node.js e sono stati preparati tutti i file necessari. In questa esercitazione, si aggiungeranno l'accesso, l'iscrizione e la disconnessione all'app Web Node.js. Per semplificare l'aggiunta dell'autenticazione all'app Web Node.js, usare Microsoft Authentication Library (MSAL) per Node. Il flusso di accesso usa il protocollo di autenticazione OpenID Connect (OIDC), che consente agli utenti di accedere in modo sicuro.

In questa esercitazione si apprenderà come:

  • Aggiungere la logica di accesso e di disconnessione
  • Visualizzare le attestazioni del token ID
  • Eseguire l'app e testare l'esperienza di accesso e di disconnessione.

Prerequisiti

Creare un oggetto di configurazione MSAL

Nell'editor di codice, aprire il file authConfig.js quindi aggiungere il codice seguente:

require('dotenv').config();

const TENANT_SUBDOMAIN = process.env.TENANT_SUBDOMAIN || 'Enter_the_Tenant_Subdomain_Here';
const REDIRECT_URI = process.env.REDIRECT_URI || 'http://localhost:3000/auth/redirect';
const POST_LOGOUT_REDIRECT_URI = process.env.POST_LOGOUT_REDIRECT_URI || 'http://localhost:3000';

/**
 * Configuration object to be passed to MSAL instance on creation.
 * For a full list of MSAL Node configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-node/docs/configuration.md
 */
const msalConfig = {
    auth: {
        clientId: process.env.CLIENT_ID || 'Enter_the_Application_Id_Here', // 'Application (client) ID' of app registration in Azure portal - this value is a GUID
        authority: process.env.AUTHORITY || `https://${TENANT_SUBDOMAIN}.ciamlogin.com/`, // replace "Enter_the_Tenant_Subdomain_Here" with your tenant name
        clientSecret: process.env.CLIENT_SECRET || 'Enter_the_Client_Secret_Here', // Client secret generated from the app registration in Azure portal
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                console.log(message);
            },
            piiLoggingEnabled: false,
            logLevel: 'Info',
        },
    },
};

module.exports = {
    msalConfig,
    REDIRECT_URI,
    POST_LOGOUT_REDIRECT_URI,
    TENANT_SUBDOMAIN
};

L'oggetto msalConfig contiene un set di opzioni di configurazione usate per personalizzare il comportamento dei flussi di autenticazione.

Nel file authConfig.js, sostituire:

  • Enter_the_Application_Id_Here con l'ID applicazione (client) dell'app registrata in precedenza.

  • Enter_the_Tenant_Subdomain_Here e sostituire con il sottodominio Directory (tenant). Ad esempio, se il dominio primario del tenant è contoso.onmicrosoft.com, usare contoso. Se non si dispone del nome del tenant, vedere come leggere i dettagli del tenant.

  • Enter_the_Client_Secret_Here con il valore del segreto dell'app copiato in precedenza.

Se si usa il file .env per archiviare le informazioni di configurazione:

  1. Nell'editor di codice, aprire il file .env, quindi aggiungere il codice seguente.

        CLIENT_ID=Enter_the_Application_Id_Here
    TENANT_SUBDOMAIN=Enter_the_Tenant_Subdomain_Here
    CLIENT_SECRET=Enter_the_Client_Secret_Here
    REDIRECT_URI=http://localhost:3000/auth/redirect
    POST_LOGOUT_REDIRECT_URI=http://localhost:3000

  2. Sostituire i segnaposto Enter_the_Application_Id_Here, Enter_the_Tenant_Subdomain_Here e Enter_the_Client_Secret_Here come illustrato in precedenza.

Esportare le variabili msalConfig, REDIRECT_URI, TENANT_SUBDOMAIN e POST_LOGOUT_REDIRECT_URI nel file authConfig.js, rendendole accessibili ovunque sia necessario il file.

Aggiungere route rapide

Le route Express forniscono gli endpoint che consentono di eseguire operazioni come l'accesso, disconnessione e visualizzare le attestazioni del token ID.

Punto di ingresso app

Nell'editor di codice, aprire il file routes/index.js e quindi aggiungere il codice seguente:

const express = require('express');
const router = express.Router();

router.get('/', function (req, res, next) {
    res.render('index', {
        title: 'MSAL Node & Express Web App',
        isAuthenticated: req.session.isAuthenticated,
        username: req.session.account?.username !== '' ? req.session.account?.username : req.session.account?.name,
    });
});    
module.exports = router;

La route / è il punto di ingresso dell'applicazione. Esegue il rendering della visualizzazione views/index.hbs creata in precedenza in Creare componenti dell'interfaccia utente dell'app. isAuthenticated è una variabile booleana che determina ciò che è presente nella visualizzazione.

Accesso e disconnessione

  1. Nell'editor di codice, aprire il file route/auth.js e aggiungervi il codice da auth.js.

  2. Nell'editor di codice, aprire il file controller/authController.js e aggiungervi il codice da authController.js.

  3. Nell'editor di codice, aprire il file di autenticazione/AuthProvider.js, quindi aggiungervi il codice da AuthProvider.js.

    Le route /signin, /signout e /redirect vengono definite nel file route/auth.js, ma si implementa la relativa logica nella classe auth/AuthProvider.js.

  • Il metodo login gestisce la route /signin:

    • Avvia il flusso di accesso attivando la prima fase del flusso del codice di autenticazione.

    • Inizializza un'istanza dell'applicazione client riservata usando l'oggetto di configurazione MSAL, msalConfig, creato in precedenza.

          const msalInstance = this.getMsalInstance(this.config.msalConfig);

      Il metodo getMsalInstance viene definito come:

          getMsalInstance(msalConfig) {
        return new msal.ConfidentialClientApplication(msalConfig);
    }

    • La prima parte del flusso del codice di autenticazione genera un URL di richiesta del codice di autorizzazione, quindi reindirizza a tale URL per ottenere il codice di autorizzazione. Questa prima fase viene implementata nel metodo redirectToAuthCodeUrl. Si noti come si usa il metodo getAuthCodeUrl di MSAL per generare l'URL del codice di autorizzazione:

      //...
const authCodeUrlResponse = await msalInstance.getAuthCodeUrl(req.session.authCodeUrlRequest);
//...

      Viene quindi eseguito il reindirizzamento all'URL del codice di autorizzazione stesso.

      //...
res.redirect(authCodeUrlResponse);
//...

  • Il metodo handleRedirect gestisce la route /redirect:

    • Impostare questo URL come URI di reindirizzamento per l'app Web nell'interfaccia di amministrazione di Microsoft Entra vista in precedenza in Registrare l'app Web.

    • Questo endpoint implementa la seconda parte del flusso del codice di autenticazione usato. Usa il codice di autorizzazione per richiedere un token ID usando il metodo acquireTokenByCode di MSAL.

      //...
const tokenResponse = await msalInstance.acquireTokenByCode(authCodeRequest, req.body);
//...

    • Dopo aver ricevuto una risposta, è possibile creare una sessione Express e archiviare le informazioni desiderate. È necessario includere isAuthenticated e impostarlo su true:

      //...        
req.session.idToken = tokenResponse.idToken;
req.session.account = tokenResponse.account;
req.session.isAuthenticated = true;
//...

  • Il metodo logout gestisce la route /signout:

    async logout(req, res, next) {
    /**
     * Construct a logout URI and redirect the user to end the
        * session with Azure AD. For more information, visit:
        * https://docs.microsoft.com/azure/active-directory/develop/v2-protocols-oidc#send-a-sign-out-request
        */
    const logoutUri = `${this.config.msalConfig.auth.authority}${TENANT_SUBDOMAIN}.onmicrosoft.com/oauth2/v2.0/logout?post_logout_redirect_uri=${this.config.postLogoutRedirectUri}`;

    req.session.destroy(() => {
        res.redirect(logoutUri);
    });
}

    • Avvia la richiesta di disconnessione.

    • Quando si vuole disconnettere l'utente dall'applicazione, non è sufficiente terminare la sessione dell'utente. È necessario reindirizzare l'utente all'logoutUri. In caso contrario, l'utente potrebbe essere in grado di ripetere l'autenticazione senza immettere le credenziali. Se il nome del tenant è contoso, il logoutUri è simile a https://contoso.ciamlogin.com/contoso.onmicrosoft.com/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000.

Visualizzare le attestazioni del token ID

Nell'editor di codice, aprire il file routes/users.js e quindi aggiungere il codice seguente:

const express = require('express');
const router = express.Router();

// custom middleware to check auth state
function isAuthenticated(req, res, next) {
    if (!req.session.isAuthenticated) {
        return res.redirect('/auth/signin'); // redirect to sign-in route
    }

    next();
};

router.get('/id',
    isAuthenticated, // check if user is authenticated
    async function (req, res, next) {
        res.render('id', { idTokenClaims: req.session.account.idTokenClaims });
    }
);        
module.exports = router;

Se l'utente è autenticato, la route /id visualizza le attestazioni del token ID usando la visualizzazione views/id.hbs. Questa visualizzazione è stata aggiunta in precedenza in Creare componenti dell'interfaccia utente dell'app.

Per estrarre un'attestazione di token ID specifica, ad esempio nome specificato:

const givenName = req.session.account.idTokenClaims.given_name

Finalizzare l'app Web

  1. Nell'editor di codice, aprire il file app.js e aggiungervi il codice da app.js.

  2. Nell'editor di codice, aprire il file server.js e aggiungervi il codice da server.js.

  3. Nell'editor di codice, aprire il file package.json, quindi aggiornare la proprietà scripts in:

    "scripts": {
"start": "node server.js"
}

Eseguire e testare l'app Web

  1. Nel terminale, assicurarsi di essere nella cartella del progetto che contiene l'app Web ad esempio ciam-sign-in-node-express-web-app.

  2. Nel terminale eseguire il comando seguente:

    npm start

  3. Aprire il browser, quindi passare a http://localhost:3000. Verrà visualizzata una pagina simile a quella raffigurata nello screenshot seguente:

    Screenshot dell'accesso a un'app Web Node.

  4. Al termine del caricamento della pagina, selezionare il collegamento Accedi. Viene richiesto di accedere.

  5. Nella pagina di accesso, digitare l'Indirizzo e-mail, selezionare Avanti, digitare la Password, quindi selezionare Accedi. Se non si dispone di un account, selezionare Nessun account? Creane un collegamento per avviare il flusso di iscrizione.

  6. Se si sceglie l'opzione per iscriversi, dopo aver inserito l'indirizzo e-mail, il passcode monouso, la nuova password e altri dettagli dell'account, completare l'intero flusso di iscrizione. Viene visualizzata una pagina simile a quella raffigurata nello screenshot seguente. Se si sceglie l'opzione di accesso, viene visualizzata una pagina simile.

    Screenshot delle attestazioni del token ID di visualizzazione.

  7. Selezionare Disconnetti per disconnettere l'utente dall'app Web oppure selezionare Visualizza attestazioni token ID per visualizzare tutte le attestazioni del token ID.

Vedi anche