Sdílet prostřednictvím

Kurz: Příprava jednostráňové aplikace JavaScriptu pro ověřování

Platí pro: Zelený kruh se symbolem bílé značky zaškrtnutí, který označuje následující obsah platí pro tenanty pracovních sil. Tenanti pracovních sil zelený kruh se symbolem bílé značky zaškrtnutí, který označuje následující obsah platí pro externí tenanty. Externí tenanti (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 ve firemním tenantovi nebo pro zákazníky používající externí účet.

V tomto kurzu se naučíte

  • 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, která je nakonfigurovaná jenom pro účty v tomto organizačním adresáři. Další podrobnosti najdete v tématu Registrace aplikace . Na stránce Přehled aplikace si poznamenejte následující hodnoty pro pozdější použití:
    • ID aplikace (klienta)
    • ID adresáře (klienta)
  • Přidejte následující identifikátory URI přesměrování pomocí konfigurace jednostrákové aplikační platformy. Další podrobnosti najdete v tématu Jak přidat URI pro přesměrování ve vaší aplikaci.
    • URI přesměrování: http://localhost:3000/.

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

  1. Přihlaste se do Centra pro správu Microsoft Entra jako globální správce.

  2. 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.

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

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

    npm init -y

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

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

  6. 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:

    /**
* 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. Nahraďte následující hodnoty hodnotami z Centra pro správu Microsoft 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

  • Last updated on