Självstudie: Skapa ett Vanilla JavaScript SPA för autentisering i en extern klientorganisation

Artikel
04/09/2024

Den här självstudien är del 2 i en serie som visar hur du skapar ett Vanilla JavaScript-program (JS) på en sida (SPA) och förbereder det för autentisering med hjälp av administrationscentret för Microsoft Entra. I del 1 av den här serien registrerade du ett program och konfigurerade användarflöden i din externa klientorganisation. Den här självstudien visar hur du skapar ett Vanilla JavaScript SPA med hjälp av npm och skapar filer som behövs för autentisering och auktorisering.

I den här självstudien;

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

Förutsättningar

Självstudie: Förbered din externa klientorganisation för att autentisera användare i ett Vanilla JavaScript SPA.
Även om alla integrerade utvecklingsmiljöer (IDE) som stöder Vanilla JavaScript-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 JavaScript-projekt och installera beroenden

Öppna Visual Studio Code, välj Arkiv>Öppna mapp.... Navigera till och välj den plats där projektet ska skapas.
Öppna en ny terminal genom att välja Terminal>Ny terminal.
Kör följande kommando för att skapa ett nytt Vanilla JavaScript-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 nödvändiga beroenden för projektet:
```
npm install express morgan @azure/msal-browser
```

Redigera filen server.js

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

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.

Gå vidare

Del 3: Hantera autentiseringsflöden i ett Vanilla JavaScript SPA

Dela via