Oktatóanyag: Vanilla JavaScript SPA létrehozása hitelesítéshez külső bérlőben

Ez az oktatóanyag egy sorozat 2. része, amely bemutatja a Vanilla JavaScript (JS) egyoldalas alkalmazás (SPA) készítését és a Microsoft Entra felügyeleti központ használatával történő hitelesítésre való előkészítését. A sorozat 1. részében regisztrált egy alkalmazást, és konfigurálta a felhasználói folyamatokat a külső bérlőben. Ez az oktatóanyag bemutatja, hogyan hozhat létre Vanilla JavaScript SPA-t a hitelesítéshez és engedélyezéshez szükséges fájlok használatával npm és létrehozásával.

Ebben az oktatóanyagban;

• Vanilla JavaScript-projekt létrehozása a Visual Studio Code-ban
• Szükséges csomagok telepítése
• Kód hozzáadása server.js kiszolgáló létrehozásához

Előfeltételek

• Oktatóanyag: A külső bérlő előkészítése a felhasználók hitelesítésére a Vanilla JavaScript SPA-ban.
• Bár a Vanilla JavaScript-alkalmazásokat támogató integrált fejlesztői környezetek (IDE) használhatók, a Visual Studio Code használata ajánlott ehhez az útmutatóhoz. A Letöltések oldalról tölthető le.
• Node.js.

Új Vanilla JavaScript-projekt létrehozása és függőségek telepítése

1. Nyissa meg a Visual Studio Code-ot, és válassza a Fájl>megnyitása mappa... lehetőséget. Keresse meg és válassza ki azt a helyet, ahol létre szeretné hozni a projektet.

2. Nyisson meg egy új terminált az Új terminál terminál> kiválasztásával.

3. Futtassa a következő parancsot egy új Vanilla JavaScript-projekt létrehozásához:

   npm init -y
   

4. Hozzon létre további mappákat és fájlokat a következő projektstruktúra eléréséhez:

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

Alkalmazásfüggőségek telepítése

1. A terminálban futtassa a következő parancsot a projekthez szükséges függőségek telepítéséhez:

   npm install express morgan @azure/msal-browser
   

A server.js fájl szerkesztése

Az Express egy webalkalmazás-keretrendszer Node.js. Az alkalmazást üzemeltető kiszolgáló létrehozásához használatos. Morgan az a köztes szoftver, amely HTTP-kéréseket naplóz a konzolon. A kiszolgálófájl ezen függőségek üzemeltetésére szolgál, és tartalmazza az alkalmazás útvonalait. A hitelesítést és az engedélyezést a Microsoft Authentication Library for JavaScript (MSAL.js) kezeli.

1. Adja hozzá a következő kódrészletet a server.js fájlhoz:

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

Ebben a kódban az alkalmazásváltozó inicializálva lesz az expressz modullal, az expressz pedig a nyilvános eszközök kiszolgálására szolgál. Az MSAL-browser statikus objektumként szolgál, és a hitelesítési folyamat elindítására szolgál.

Következő lépés

3. rész: Hitelesítési folyamatok kezelése Vanilla JavaScript SPA-ban