Zelfstudie: Een Vanilla JavaScript-SPA maken voor verificatie in een externe tenant

Artikel
04/11/2024

Deze zelfstudie is deel 2 van een reeks die laat zien hoe u een Vanilla JavaScript-toepassing (JS) met één pagina (SPA) bouwt en voorbereidt op verificatie met behulp van het Microsoft Entra-beheercentrum. In deel 1 van deze reeks hebt u een toepassing geregistreerd en gebruikersstromen geconfigureerd in uw externe tenant. Deze zelfstudie laat zien hoe u een Vanilla JavaScript-BEVEILIGD-WACHTWOORDVERIFICATIE maakt en npm bestanden maakt die nodig zijn voor verificatie en autorisatie.

In deze zelfstudie;

Een Vanilla JavaScript-project maken in Visual Studio Code
De vereiste pakketten installeren
Code toevoegen aan server.js om een server te maken

Vereisten

Zelfstudie: Bereid uw externe tenant voor om gebruikers te verifiëren in een Vanilla JavaScript-BEVEILIGD-WACHTWOORDVERIFICATIE.
Hoewel elke IDE (Integrated Development Environment) die Ondersteuning biedt voor Vanilla JavaScript-toepassingen kan worden gebruikt, wordt Visual Studio Code aanbevolen voor deze handleiding. Het kan worden gedownload vanaf de pagina Downloads .
Node.js.

Een nieuw Vanilla JavaScript-project maken en afhankelijkheden installeren

Open Visual Studio Code, selecteer Map>openen.... Navigeer naar en selecteer de locatie waar u uw project wilt maken.
Open een nieuwe terminal door Terminal>New Terminal te selecteren.
Voer de volgende opdracht uit om een nieuw Vanilla JavaScript-project te maken:
```
npm init -y
```

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

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

App-afhankelijkheden installeren

Voer in de Terminal de volgende opdracht uit om de vereiste afhankelijkheden voor het project te installeren:
```
npm install express morgan @azure/msal-browser
```

Het server.js-bestand bewerken

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 die HTTP-aanvragen naar de console registreert. Het serverbestand wordt gebruikt om deze afhankelijkheden te hosten en bevat de routes voor de toepassing. Verificatie en autorisatie worden verwerkt door de Microsoft Authentication Library voor JavaScript (MSAL.js).

Voeg het volgende codefragment toe aan het bestand server.js :

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 deze code wordt de app-variabele geïnitialiseerd met de express-module en wordt express gebruikt om de openbare assets te bedienen. MSAL-browser wordt geleverd als een statische asset en wordt gebruikt om de verificatiestroom te initiëren.

Volgende stap

Deel 3: Verificatiestromen afhandelen in een Vanilla JavaScript-BEVEILIGD-WACHTWOORDVERIFICATIE

Share via