Kurz: Příprava jednostránkové javascriptové aplikace Vanilla na ověřování v tenantovi zákazníka

Článek
09/22/2023

V předchozím článku jste zaregistrovali aplikaci a nakonfigurovali toky uživatelů ve svém ID Microsoft Entra pro tenanta zákazníka. V tomto článku se dozvíte, jak vytvořit jednostránkovou aplikaci (SPA) vanilla JavaScript (JS) a nakonfigurovat ji tak, aby se přihlašovaly a odhlašovaly uživatele pomocí tenanta zákazníka.

V tomto kurzu;

Vytvoření projektu Vanilla JavaScript v editoru Visual Studio Code
Instalace požadovaných balíčků
Přidání kódu do server.js pro vytvoření serveru

Požadavky

Splnění požadavků a kroků v tématu Příprava tenanta zákazníka na ověření jednostránkové aplikace Vanilla JavaScript.
I když je možné použít jakékoli integrované vývojové prostředí (IDE), které podporuje aplikace Vanilla JS, doporučuje se pro tuto příručku Visual Studio Code . Můžete si ho stáhnout ze stránky Stažené soubory .
Node.js.

Vytvoření nového projektu Vanilla JS a instalace závislostí

Otevřete Visual Studio Code a vyberte Soubor>Otevřít složku.... Přejděte do umístění, ve kterém chcete projekt vytvořit, a vyberte ho.
Otevřete nový terminál výběrem možnosti Nový terminál>.
Spuštěním následujícího příkazu vytvořte nový projekt Vanilla JS:
```
npm init -y
```

Vytvořte další složky a soubory, abyste dosáhli následující struktury projektu:

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

Instalace závislostí aplikací

V terminálu spusťte následující příkaz, který nainstaluje požadované závislosti pro projekt:
```
npm install express morgan @azure/msal-browser
```

Úprava souboruserver.js

Express je architektura webové aplikace pro Node.js. Slouží k vytvoření serveru, který hostuje aplikaci. Morgan je middleware, který protokoluje požadavky HTTP do konzoly. Soubor serveru slouží k hostování těchto závislostí a obsahuje trasy pro aplikaci. Ověřování a autorizaci zajišťuje knihovna Microsoft Authentication Library pro JavaScript (MSAL.js).

Do souboruserver.js přidejte následující fragment kódu:

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

V tomto kódu se proměnná aplikace inicializuje pomocí modulu express a express se používá k poskytování veřejných prostředků. Prohlížeč MSAL slouží jako statický prostředek a používá se k inicializaci toku ověřování.

Další kroky

Konfigurace SPA pro ověřování

Share via