Sdílet prostřednictvím

Kurz: Příprava jednostrákové aplikace JavaScriptu na ověřování

  • Článek

platí pro: zelený kruh se symbolem bílého zaškrtnutí. pracovní nájemci zelený kruh se symbolem bílého zaškrtnutí. externí nájemci (další informace)

V tomto kurzu vytvoříte jednostránkovou aplikaci JavaScriptu (SPA) a připravíte ji na ověřování pomocí platformy Microsoft Identity Platform. Tento kurz ukazuje, jak vytvořit JavaScript SPA pomocí npm, vytvořit soubory potřebné k ověřování a autorizaci a přidat podrobnosti o tenantovi do zdrojového kódu. Aplikaci je možné použít pro zaměstnance v tenantovi pracovních sil nebo pro zákazníky, kteří používají externího tenanta.

V tomto kurzu:

  • Vytvoření nového projektu JavaScriptu
  • Instalace balíčků vyžadovaných pro ověřování
  • Vytvoření struktury souborů a přidání kódu do souboru serveru
  • Přidejte podrobnosti o tenantovi do konfiguračního souboru ověřování

Požadavky

  • Tenant pracovní síly. Můžete použít výchozí adresář nebo nastavit nového tenanta.
  • Zaregistrujte novou aplikaci v Centru pro správu Microsoft Entra s následující konfigurací. Další informace najdete v tématu Registrace aplikace.
    • název : identity-client-spa
    • podporované typy účtů: Účty v tomto adresáři organizace (jenom jeden tenant).
    • konfigurace platformy: Jednostránková aplikace (SPA).
    • URI přesměrování: http://localhost:3000/.

Vytvoření projektu JavaScriptu a instalace závislostí

  1. Otevřete Visual Studio Code, vyberte Soubor>Otevřít složku.... Přejděte a vyberte umístění, ve kterém chcete projekt vytvořit.

  2. Otevřete nový terminál tak, že vyberete Terminal>New Terminal.

  3. Spuštěním následujícího příkazu vytvořte nový projekt JavaScriptu:

    npm init -y

  4. Vytvořte další složky a soubory, abyste dosáhli následující struktury projektu:

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

  5. V termináluspusťte následující příkaz, který nainstaluje požadované závislosti pro projekt:

    npm install express morgan @azure/msal-browser

Přidání kódu do souboru serveru

Express je architektura webových aplikací pro Node.js. Slouží k vytvoření serveru, který je hostitelem aplikace. Morgan je middleware, který loguje požadavky HTTP do konzole. Soubor serveru slouží k hostování těchto závislostí a obsahuje trasy pro aplikaci. Ověřování a autorizace zpracovává knihovna Microsoft Authentication Library pro JavaScript (MSAL.js).

  1. Do souboru server.js přidejte následující kód:

    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;

V tomto kódu je proměnná aplikace inicializována pomocí modulu express, který slouží k poskytování veřejných aktiv. msAL-browser slouží jako statický prostředek a slouží k zahájení toku ověřování.

Přidání podrobností o tenantovi do konfigurace MSAL

Soubor authConfig.js obsahuje nastavení konfigurace pro tok ověřování a slouží ke konfiguraci MSAL.js s požadovanými nastaveními pro ověřování.

  1. Otevřete public/authConfig.js a přidejte následující kód:

    const msalConfig = {
    auth: {

        clientId: "Enter_the_Application_Id_Here", // This is the ONLY mandatory field that you need to supply
        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: [],
};

/**
* 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"
// };

  2. Nahraďte následující hodnoty hodnotami z Centra pro správu Entra:

    • Najděte hodnotu Enter_the_Application_Id_Here a nahraďte ji ID aplikace (clientId) aplikace, kterou jste zaregistrovali v Centru pro správu Microsoft Entra.
    • Najděte hodnotu Enter_the_Tenant_Info_Here a nahraďte ji ID tenanta , konkrétně ID pracovního tenanta, který jste vytvořili v Centru pro správu Microsoft Entra.

  3. Uložte soubor.

Další krok

Řešení autentizačních toků v JavaScript SPA