Tutorial: Erstellen einer Vanilla JavaScript-SPA für die Authentifizierung in einem externen Mandanten

Artikel
04/12/2024

Dieses Tutorial ist Teil 2 einer Reihe, in der das Erstellen einer Single-Page-Webanwendung (Single-Page Application, SPA) in Vanilla JavaScript (JS) und ihre Vorbereitung für die Authentifizierung mithilfe des Microsoft Entra Admin Centers veranschaulicht wird. In Teil 1 dieser Reihe haben Sie eine Anwendung registriert und Benutzerflows in Ihrem externen Mandanten konfiguriert. In diesem Tutorial wird veranschaulicht, wie Sie mithilfe von npm eine Vanilla JavaScript-SPA erstellen. Zudem wird das Erstellen von Dateien veranschaulicht, die für die Authentifizierung und Autorisierung erforderlich sind.

In diesem Tutorial:

Erstellen eines Vanilla-JavaScript-Projekts in Visual Studio Code
Installieren erforderlicher Pakete
Hinzufügen von Code zur Datei server.js zum Erstellen eines Servers

Voraussetzungen

Tutorial: Vorbereiten Ihres externen Mandanten für die Authentifizierung von Benutzern in einer Vanilla JavaScript-SPA.
Sie können jede integrierte Entwicklungsumgebung verwenden, die Vanilla JavaScript-Anwendungen unterstützt. Für diese Anleitung wird Visual Studio Code empfohlen. Sie können sie auf der Seite Downloads herunterladen.
Node.js.

Erstellen eines neuen Vanilla JavaScript-Projekts und Installieren von Abhängigkeiten

Ö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.
Öffnen Sie ein neues Terminal, indem Sie Terminal>Neues Terminal auswählen.
Führen Sie den folgenden Befehl aus, um ein neues Vanilla JavaScript-Projekt zu erstellen:
```
npm init -y
```

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

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

Installieren der App-Abhängigkeiten

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
```

Bearbeiten der Datei server.js

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.

Fügen Sie der Datei server.js den folgenden Codeschnipsel 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}!`);
});

In diesem Code wird die Variable app mit dem Modul express initialisiert. Das Modul express wird verwendet, um die öffentlichen Ressourcen zu bedienen. MSAL-browser wird als statisches Objekt bereitgestellt und zum Initiieren des Authentifizierungsflows verwendet.

Nächster Schritt

Teil 3: Verarbeiten von Authentifizierungsflows in einer Vanilla JavaScript-SPA

Share via