Samouczek: przygotowywanie aplikacji jednostronicowej Vanilla JavaScript do uwierzytelniania w dzierżawie klienta

2023-09-22

W poprzednim artykule zarejestrowano aplikację i skonfigurowano przepływy użytkowników w identyfikatorze Microsoft Entra dla dzierżawy klientów. W tym artykule pokazano, jak utworzyć jednostronicową aplikację Vanilla JavaScript (JS) i skonfigurować ją do logowania i wylogowania użytkowników z dzierżawą klienta.

W tym samouczku;

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

Wymagania wstępne

Ukończenie wymagań wstępnych i kroków opisanych w temacie Przygotowywanie dzierżawy klienta do uwierzytelniania aplikacji jednostronicowej Vanilla JavaScript.
Chociaż można używać dowolnego zintegrowanego środowiska projektowego (IDE), które obsługuje aplikacje Vanilla JS, Visual Studio Code jest zalecane w tym przewodniku. Można go pobrać ze strony Pliki do pobrania .
Node.js.

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

Otwórz 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 JS:
```
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 służy 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 ekspresowegoi jest używana do obsługi zasobów publicznych. Przeglądarka MSAL jest używana jako element zawartości statycznej i służy do inicjowania przepływu uwierzytelniania.

Następne kroki

Konfigurowanie SPA na potrzeby uwierzytelniania

Udostępnij za pośrednictwem