Delen via

Zelfstudie: Een JavaScript-toepassing met één pagina voorbereiden voor verificatie

  • Artikel

Van toepassing op: Groene cirkel met een wit vinkje. Werknemers-huurders Groene cirkel met een wit vinkje. Externe huurders (meer informatie)

In deze zelfstudie bouwt u een JavaScript-toepassing met één pagina (SPA) en bereidt u deze voor op verificatie met behulp van het Microsoft Identity Platform. Deze zelfstudie laat zien hoe u een JavaScript SPA maakt met behulp van npm, bestanden maakt die nodig zijn voor authenticatie en autorisatie, en uw tenantgegevens toevoegt aan de broncode. De toepassing kan worden gebruikt voor werknemers in een personeelstenant of voor klanten die een externe tenant gebruiken.

In deze zelfstudie gaat u het volgende doen:

  • Een nieuw JavaScript-project maken
  • Pakketten installeren die vereist zijn voor verificatie
  • Maak de bestandsstructuur en voeg code toe aan het serverbestand
  • Voeg uw tenantgegevens toe aan het configuratiebestand voor verificatie

Voorwaarden

  • Een personeelstenant. U kunt uw Default Directory- gebruiken of een nieuwe tenant instellen.
  • Registreer een nieuwe app in het Microsoft Entra-beheercentrum met de volgende configuratie. Zie Een toepassing registrerenvoor meer informatie.
    • Naam: identity-client-spa
    • Ondersteunde accounttypen: alleen accounts in deze organisatiemap (één tenant).
    • Platformconfiguratie: Single-page application (SPA).
    • Redirect-URI: http://localhost:3000/.

Een JavaScript-project maken en afhankelijkheden installeren

  1. Open Visual Studio Code, selecteer Bestand>Map openen.... Navigeer naar en selecteer de locatie waar u uw project wilt maken.

  2. Open een nieuwe terminal door Terminal>New Terminalte selecteren.

  3. Voer de volgende opdracht uit om een nieuw JavaScript-project te maken:

    npm init -y

  4. Maak extra mappen en bestanden om de volgende projectstructuur te bereiken:

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

  5. Voer in de Terminalde volgende opdracht uit om de vereiste afhankelijkheden voor het project te installeren:

    npm install express morgan @azure/msal-browser

Code toevoegen aan het serverbestand

Express- is een webtoepassingsframework voor Node.js. Deze wordt gebruikt om een server te maken die als host fungeert voor de toepassing. Morgan is de middleware waarmee HTTP-aanvragen naar de console worden opgeslagen. Het serverbestand wordt gebruikt om deze afhankelijkheden te hosten en bevat de routes voor de toepassing. Verificatie en autorisatie worden afgehandeld door de Microsoft Authentication Library voor JavaScript (MSAL.js).

  1. Voeg de volgende code toe aan het server.js-bestand:

    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 deze code wordt de -app-variabele geïnitialiseerd, en de express-module wordt gebruikt om de publieke middelen te bedienen. MSAL-browser wordt geleverd als een statisch middel en wordt gebruikt om de authenticatiestroom te initiëren.

Uw tenantgegevens toevoegen aan de MSAL-configuratie

Het bestand authConfig.js bevat de configuratie-instellingen voor de verificatiestroom en wordt gebruikt om MSAL.js te configureren met de vereiste instellingen voor verificatie.

  1. Open openbare/authConfig.js en voeg de volgende code toe:

    /**
* 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. Vervang de volgende waarden door de waarden uit het Microsoft Entra-beheercentrum:

    • Zoek de Enter_the_Application_Id_Here waarde en vervang deze door de Application ID (clientId) van de app die u hebt geregistreerd in het Microsoft Entra-beheercentrum.
    • Zoek de Enter_the_Tenant_Info_Here-waarde en vervang deze door de Tenant-id van de werknemerstenant die u hebt gemaakt in het Microsoft Entra-beheercentrum.

  3. Sla het bestand op.

Volgende stap

Authenticatiestromen afhandelen in een JavaScript SPA