Självstudie: Förbereda en enkelsidig Vanilla JavaScript-app för autentisering i en kundklientorganisation

Artikel
09/22/2023

I föregående artikel registrerade du ett program och konfigurerade användarflöden i ditt Microsoft Entra-ID för kundens klientorganisation. Den här artikeln visar hur du skapar en Vanilla JavaScript-app (JS) med ensidesapp (SPA) och konfigurerar den för att logga in och logga ut användare med din kundklientorganisation.

I den här självstudien;

Skapa ett Vanilla JavaScript-projekt i Visual Studio Code
Installera de paket som krävs
Lägga till kod iserver.js för att skapa en server

Förutsättningar

Slutförande av förutsättningarna och stegen i Förbereda din kundklientorganisation för att autentisera en Vanilla JavaScript-enkelsidig app.
Även om alla integrerade utvecklingsmiljöer (IDE) som stöder Vanilla JS-program kan användas, rekommenderas Visual Studio Code för den här guiden. Den kan laddas ned från sidan Nedladdningar .
Node.js.

Skapa ett nytt Vanilla JS-projekt och installera beroenden

Öppna Visual Studio Code och välj Arkiv>Öppna mapp.... Gå till och välj den plats där du vill skapa projektet.
Öppna en ny terminal genom att välja Terminal>Ny terminal.
Kör följande kommando för att skapa ett nytt Vanilla JS-projekt:
```
npm init -y
```

Skapa ytterligare mappar och filer för att uppnå följande projektstruktur:

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

Installera appberoenden

I terminalen kör du följande kommando för att installera de nödvändiga beroendena för projektet:
```
npm install express morgan @azure/msal-browser
```

Redigera denserver.js filen

Express är ett webbprogramramverk för Node.js. Den används för att skapa en server som är värd för programmet. Morgan är mellanprogrammet som loggar HTTP-begäranden till konsolen. Serverfilen används som värd för dessa beroenden och innehåller vägarna för programmet. Autentisering och auktorisering hanteras av Microsoft Authentication Library for JavaScript (MSAL.js).

Lägg till följande kodfragment i server.js-filen :

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}!`);
});

I den här koden initieras appvariabeln med expressmodulen och express används för att hantera de offentliga tillgångarna. MSAL-browser hanteras som en statisk tillgång och används för att initiera autentiseringsflödet.

Nästa steg

Konfigurera SPA för autentisering

Dela via