Zelfstudie: Een Vanilla JavaScript-SPA maken voor verificatie in een externe tenant
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.