Freigeben über

Lernprogramm: Vorbereiten einer JavaScript-Einzelseiten-App für die Authentifizierung

Gilt für:Grüner Kreis mit weißem Häkchen. Mitarbeitermandanten Grüner Kreis mit weißem Häkchen. Externe Mandanten (weitere Informationen)

In diesem Lernprogramm erstellen Sie eine JavaScript-Einzelseitenanwendung (Single Page Application, SPA) und bereiten sie mit der Microsoft Identity Platform auf die Authentifizierung vor. In diesem Lernprogramm wird veranschaulicht, wie Sie mithilfe von npm ein JavaScript-SPA erstellen, die Dateien für die Authentifizierung und Autorisierung anlegen und im Quellcode Ihre Mandantendetails hinzufügen. Die Anwendung kann für Mitarbeitende in einem Mitarbeitermandanten oder für Kunden mit einem externen Mandanten verwendet werden.

In diesem Tutorial haben Sie Folgendes durchgeführt:

  • Erstellen eines neuen JavaScript-Projekts
  • Installieren von Paketen, die für die Authentifizierung erforderlich sind
  • Erstellen Der Dateistruktur und Hinzufügen von Code zur Serverdatei
  • Fügen Sie Ihre Mandantendetails zur Authentifizierungskonfigurationsdatei hinzu

Voraussetzungen

  • Ein Mandant für Mitarbeitende. Sie können Ihr Standardverzeichnis verwenden oder einen neuen Mandanten einrichten.
  • Registrieren Sie eine neue App im Microsoft Entra Admin Center, die nur für Konten in diesem Organisationsverzeichnis konfiguriert ist. Weitere Informationen finden Sie unter Registrieren einer Anwendung . Notieren Sie die folgenden Werte auf der Anwendungsübersichtsseite für die spätere Verwendung:
    • Anwendungs-ID (Client)
    • Verzeichnis-ID (Mandant)
  • Fügen Sie die folgenden Umleitungs-URIs mithilfe der Konfiguration der Plattform für die Einzelseitenanwendung hinzu. Weitere Informationen finden Sie unter Hinzufügen eines Umleitungs-URI in Ihrer Anwendung .
    • Umleitungs-URI: http://localhost:3000/.

Erstellen eines JavaScript-Projekts und Installieren von Abhängigkeiten

  1. Melden Sie sich beim Microsoft Entra Admin Center als globaler Administrator an.

  2. Öffnen Sie Visual Studio Code, und wählen Sie Datei>Ordner öffnen... aus. Navigieren Sie zu dem Speicherort, an dem Ihr Projekt erstellt werden soll, und wählen Sie diesen aus.

  3. Öffnen Sie ein neues Terminal, indem Sie Terminal>Neues Terminal auswählen.

  4. Führen Sie den folgenden Befehl aus, um ein neues JavaScript-Projekt zu erstellen:

    npm init -y

  5. Erstellen Sie weitere Ordner und Dateien, um die folgende Projektstruktur zu erstellen:

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

  6. Führen Sie im Terminal den folgenden Befehl aus, um die erforderlichen Abhängigkeiten für das Projekt zu installieren:

    npm install express morgan @azure/msal-browser

Hinzufügen von Code zur Serverdatei

Express ist ein Webanwendungsframework für Node.js. Es wird verwendet, um einen Server zu erstellen, der die Anwendung hostet. Morgan ist die Middleware, die HTTP-Anforderungen an die Konsole protokolliert. Die Serverdatei wird zum Hosten dieser Abhängigkeiten verwendet und enthält die Routen für die Anwendung. Authentifizierung und Autorisierung werden von der Microsoft Authentication Library für JavaScript (MSAL.js) verarbeitet.

  1. Fügen Sie der dateiserver.js den folgenden Code hinzu:

    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 diesem Code wird die App-Variable mit dem Expressmodul initialisiert, um die öffentlichen Objekte zu bedienen. MSAL-browser wird als statisches Objekt bereitgestellt und zum Initiieren des Authentifizierungsflows verwendet.

Hinzufügen von Mandantendetails zur MSAL-Konfiguration

Die authConfig.js Datei enthält die Konfigurationseinstellungen für den Authentifizierungsfluss und wird verwendet, um MSAL.js mit den erforderlichen Einstellungen für die Authentifizierung zu konfigurieren.

  1. Öffnen Sie öffentliche/authConfig.js , und fügen Sie den folgenden Code hinzu:

    /**
* 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. Ersetzen Sie die folgenden Werte durch die Werte aus dem Microsoft Entra Admin Center:

    • Suchen Sie den Enter_the_Application_Id_Here Wert, und ersetzen Sie ihn durch die Anwendungs-ID (clientId) der App, die Sie im Microsoft Entra Admin Center registriert haben.
    • Suchen Sie den Enter_the_Tenant_Info_Here-Wert, und ersetzen Sie ihn durch die Mandanten-ID des Mitarbeitermandanten, den Sie im Microsoft Entra Admin Center erstellt haben.

  3. Speichern Sie die Datei.

Nächster Schritt

Behandeln von Authentifizierungsflüssen in einem JavaScript SPA