Condividi tramite

Esercitazione: Preparare un'applicazione a pagina singola JavaScript per l'autenticazione

  • Articolo

si applica a: cerchio verde con una spunta bianca. clienti della forza lavoro cerchio verde con una spunta bianca. clienti esterni (ulteriori informazioni)

In questa esercitazione si creerà un'applicazione a pagina singola JavaScript e la si preparerà per l'autenticazione usando Microsoft Identity Platform. Questa esercitazione illustra come creare un'applicazione a pagina singola JavaScript usando npm, creare i file necessari per l'autenticazione e l'autorizzazione e aggiungere i dettagli del tuo tenant al codice sorgente. L'applicazione può essere usata per i dipendenti in un tenant della forza lavoro o per i clienti che usano un tenant esterno.

In questa esercitazione si apprenderà come:

  • Creare un nuovo progetto JavaScript
  • Installare i pacchetti necessari per l'autenticazione
  • Creare la struttura dei file e aggiungere codice al file del server
  • Aggiungere i dettagli del tenant al file di configurazione dell'autenticazione

Prerequisiti

  • Inquilino della forza lavoro. È possibile usare la directory predefinita o configurare un nuovo tenant.
  • Registrare una nuova app nell'interfaccia di amministrazione di Microsoft Entra con la configurazione seguente. Per altre informazioni, vedere Registrare un'applicazione.
    • Nome: identity-client-spa
    • Tipi di account supportati: Account in questa sola directory organizzativa (tenant singolo).
    • Configurazione della piattaforma: applicazione a pagina singola (SPA).
    • URI di reindirizzamento: http://localhost:3000/.

Creare un progetto JavaScript e installare le dipendenze

  1. Aprire Visual Studio Code, selezionare File>Apri cartella.... Passare a e selezionare il percorso in cui creare il progetto.

  2. Aprire un nuovo terminale selezionando Terminale>Nuovo terminale.

  3. Eseguire il comando seguente per creare un nuovo progetto JavaScript:

    npm init -y

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

    └── public
    └── authConfig.js
    └── auth.js
    └── claimUtils.js
    └── index.html
    └── signout.html
    └── styles.css
    └── ui.js    
└── server.js
└── package.json

  5. Nel Terminaleeseguire il comando seguente per installare le dipendenze necessarie per il progetto:

    npm install express morgan @azure/msal-browser

Aggiungere codice al file del server

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 le route per l'applicazione. L'autenticazione e l'autorizzazione vengono gestite dall'Microsoft Authentication Library per JavaScript (MSAL.js).

  1. Aggiungere il 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}!`);
});

module.exports = app;

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

Aggiunta dei dettagli del locatario alla configurazione di MSAL

Il file authConfig.js contiene le impostazioni di configurazione per il flusso di autenticazione e viene usato per configurare MSAL.js con le impostazioni necessarie per l'autenticazione.

  1. Aprire pubblico/authConfig.js e aggiungere il codice seguente:

    /**
* Configuration object to be passed to MSAL instance on creation. 
* For a full list of MSAL.js configuration parameters, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
*/
const msalConfig = {
    auth: {
        // WORKFORCE TENANT
        authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here", //  Replace the placeholder with your tenant info
        redirectUri: '/', // You must register this URI on App Registration. Defaults to window.location.href e.g. http://localhost:3000/
        navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request location before processing the auth code response.
    },
    cache: {
        cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO.
        storeAuthStateInCookie: false, // set this to true if you have to support IE
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case msal.LogLevel.Error:
                        console.error(message);
                        return;
                    case msal.LogLevel.Info:
                        console.info(message);
                        return;
                    case msal.LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case msal.LogLevel.Warning:
                        console.warn(message);
                        return;
                }
            },
        },
    },
};

/**
* Scopes you add here will be prompted for user consent during sign-in.
* By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
* For more information about OIDC scopes, visit: 
* https://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
*/
const loginRequest = {
    scopes: ["User.Read"],
};

/**
* An optional silentRequest object can be used to achieve silent SSO
* between applications by providing a "login_hint" property.
*/

// const silentRequest = {
//   scopes: ["openid", "profile"],
//   loginHint: "example@domain.net"
// };

// exporting config object for jest
if (typeof exports !== 'undefined') {
    module.exports = {
        msalConfig: msalConfig,
        loginRequest: loginRequest,
    };
    module.exports = {
        msalConfig: msalConfig,
        loginRequest: loginRequest,
    };
}

  2. Sostituire i valori seguenti con i valori dell'interfaccia di amministrazione di Microsoft Entra:

    • Trova il valore Enter_the_Application_Id_Here e sostituiscilo con l'ID dell'applicazione (clientId) dell'app registrata nell'interfaccia di amministrazione di Microsoft Entra.
    • Trovare il valore Enter_the_Tenant_Info_Here e sostituirlo con l'ID tenant del tenant di forza lavoro che hai creato nel centro di amministrazione di Microsoft Entra.

  3. Salvare il file.

Passaggio successivo

Gestire i flussi di autenticazione in una SPA JavaScript