Samouczek: tworzenie aplikacji Vanilla JavaScript SPA na potrzeby uwierzytelniania w dzierżawie zewnętrznej

Artykuł
04/10/2024

Ten samouczek jest częścią 2 serii, która demonstruje tworzenie aplikacji jednostronicowej (SPA) Vanilla JavaScript (JS) i przygotowanie jej do uwierzytelniania przy użyciu centrum administracyjnego firmy Microsoft Entra. W części 1 tej serii zarejestrowano aplikację i skonfigurowano przepływy użytkowników w dzierżawie zewnętrznej. W tym samouczku pokazano, jak utworzyć vanilla JavaScript SPA przy użyciu i npm utworzyć pliki potrzebne do uwierzytelniania i autoryzacji.

W tym samouczku;

Tworzenie projektu Vanilla JavaScript w programie Visual Studio Code
Instalowanie wymaganych pakietów
Dodawanie kodu do server.js w celu utworzenia serwera

Wymagania wstępne

Samouczek: przygotowanie dzierżawy zewnętrznej do uwierzytelniania użytkowników w vanilla JavaScript SPA.
Mimo że można używać dowolnego zintegrowanego środowiska projektowego (IDE), które obsługuje aplikacje Vanilla JavaScript, program Visual Studio Code jest zalecany w tym przewodniku. Można go pobrać ze strony Pliki do pobrania .
Node.js.

Tworzenie nowego projektu Vanilla JavaScript i instalowanie zależności

Otwórz program Visual Studio Code, wybierz pozycję Plik>Otwórz folder.... Przejdź do i wybierz lokalizację, w której chcesz utworzyć projekt.
Otwórz nowy terminal, wybierając pozycję Terminal>Nowy terminal.
Uruchom następujące polecenie, aby utworzyć nowy projekt Vanilla JavaScript:
```
npm init -y
```

Utwórz dodatkowe foldery i pliki, aby uzyskać następującą strukturę projektu:

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

Instalowanie zależności aplikacji

W terminalu uruchom następujące polecenie, aby zainstalować wymagane zależności dla projektu:
```
npm install express morgan @azure/msal-browser
```

Edytowanie pliku server.js

Express to platforma aplikacji internetowej dla Node.js. Służy do tworzenia serwera, który hostuje aplikację. Morgan to oprogramowanie pośredniczące, które rejestruje żądania HTTP do konsoli. Plik serwera jest używany do hostowania tych zależności i zawiera trasy dla aplikacji. Uwierzytelnianie i autoryzacja są obsługiwane przez bibliotekę uwierzytelniania firmy Microsoft dla języka JavaScript (MSAL.js).

Dodaj następujący fragment kodu do pliku 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}!`);
});

W tym kodzie zmienna aplikacji jest inicjowana za pomocą modułu ekspresowego, a wyrażenie jest używane do obsługi zasobów publicznych. Przeglądarka MSAL jest obsługiwana jako element zawartości statycznej i służy do inicjowania przepływu uwierzytelniania.

Następny krok

Część 3. Obsługa przepływów uwierzytelniania w vanilla JavaScript SPA

Udostępnij za pośrednictwem