Dela via

Självstudie: Förbereda en Enkelsidig JavaScript-app för autentisering

Gäller för: grön cirkel med en vit bockmarkeringssymbol. Workforce-hyresgäster grön cirkel med en vit bockmarkeringssymbol. externa hyresgäster (läs mer)

I den här självstudien ska du skapa ett JavaScript-program på en sida (SPA) och förbereda det för autentisering med hjälp av Microsofts identitetsplattform. Den här självstudien visar hur du skapar ett JavaScript SPA med hjälp av npm, skapar filer som behövs för autentisering och auktorisering samt lägger till hyresgästinformation i källkoden. Programmet kan användas för anställda i en klientorganisation eller för kunder som använder en extern klientorganisation.

I den här handledningen får du

  • Skapa ett nytt JavaScript-projekt
  • Installera paket som krävs för autentisering
  • Skapa filstrukturen och lägg till kod i serverfilen
  • Lägg till klientinformationen i konfigurationsfilen för autentisering

Förutsättningar

Skapa ett JavaScript-projekt och installera beroenden

  1. Logga in på administrationscentret för Microsoft Entra som global administratör.

  2. Öppna Visual Studio Code, välj Fil>Öppna mapp.... Navigera till och välj den plats där projektet ska skapas.

  3. Öppna en ny terminal genom att välja Terminal>New Terminal.

  4. Kör följande kommando för att skapa ett nytt JavaScript-projekt:

    npm init -y

  5. Skapa ytterligare mappar och filer för att uppnå följande projektstruktur:

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

  6. I Terminalkör du följande kommando för att installera nödvändiga beroenden för projektet:

    npm install express morgan @azure/msal-browser

Lägga till kod i serverfilen

Express är ett webbprogramramverk för Node.js. Den används för att skapa en server som är värd för programmet. Morgan är mellanprogrammet som loggar HTTP-begäranden till konsolen. Serverfilen används som värd för dessa beroenden och innehåller vägarna för programmet. Autentisering och auktorisering hanteras av Microsoft Authentication Library för JavaScript (MSAL.js).

  1. Lägg till följande kod i filen 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;

I den här koden initieras variabeln app med modulen express, som används för att hantera de offentliga tillgångarna. MSAL-webbläsare hanteras som en statisk tillgång och används för att initiera autentiseringsflödet.

Lägga till klientinformation i MSAL-konfigurationen

Filen authConfig.js innehåller konfigurationsinställningarna för autentiseringsflödet och används för att konfigurera MSAL.js med nödvändiga inställningar för autentisering.

  1. Öppna offentliga/authConfig.js och lägg till följande kod:

    /**
* 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: {
        clientId: "Enter_the_Application_Id_Here",
        // 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,
    };
}

  2. Ersätt följande värden med värdena från administrationscentret för Microsoft Entra:

    • Leta reda på värdet Enter_the_Application_Id_Here och ersätt det med Application ID (clientId) för appen som du registrerade i administrationscentret för Microsoft Entra.
    • Leta reda på värdet Enter_the_Tenant_Info_Here och ersätt det med klientorganisations-ID för den arbetsstyrka som du skapade i administrationscentret för Microsoft Entra.

  3. Spara filen.

Nästa steg

Hantera autentiseringsflöden i en JavaScript SPA-