Руководство. Создание SPA JavaScript vanilla для проверки подлинности во внешнем клиенте

Статья
04/09/2024

Это руководство является частью 2 серии, демонстрирующей создание одностраничного приложения Vanilla JavaScript (JS) и подготовки его к проверке подлинности с помощью Центра администрирования Microsoft Entra. В части 1 этой серии вы зарегистрировали приложение и настроили потоки пользователей во внешнем клиенте. В этом руководстве показано, как создать spa Vanilla JavaScript с помощью npm и создать файлы, необходимые для проверки подлинности и авторизации.

В этом руководстве;

Создание проекта Vanilla JavaScript в Visual Studio Code
Установка необходимых пакетов
Добавление кода в server.js для создания сервера

Необходимые компоненты

Руководство. Подготовка внешнего клиента к проверке подлинности пользователей в spa Vanilla JavaScript.
Хотя можно использовать любую интегрированную среду разработки (IDE), поддерживающую приложения Vanilla JavaScript, для этого руководства рекомендуется использовать Visual Studio Code . Его можно скачать на странице "Загрузки ".
Node.js.

Создание проекта JavaScript vanilla и установка зависимостей

Откройте Visual Studio Code, выберите "Открыть папку">.... Перейдите к папке и выберите расположение, в котором нужно создать проект.
Откройте новый терминал, выбрав терминал>"Новый терминал".
Выполните следующую команду, чтобы создать проект Vanilla JavaScript:
```
npm init -y
```

Создайте дополнительные папки и файлы для достижения следующей структуры проекта:

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

Установка зависимостей приложения

В терминале выполните следующую команду, чтобы установить необходимые зависимости для проекта:
```
npm install express morgan @azure/msal-browser
```

Изменение файла server.js

Express — это платформа веб-приложений для Node.js. Он используется для создания сервера, на котором размещается приложение. Морган — это ПО промежуточного слоя, которое регистрирует HTTP-запросы в консоль. Файл сервера используется для размещения этих зависимостей и содержит маршруты для приложения. Проверка подлинности и авторизация обрабатываются библиотекой проверки подлинности Майкрософт для JavaScript (MSAL.js).

Добавьте следующий фрагмент кода в файл 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}!`);
});

В этом коде переменная приложения инициализируется с помощью экспресс-модуля и экспресс используется для обслуживания общедоступных активов. MSAL-browser служит статическим ресурсом и используется для запуска потока проверки подлинности.

Следующий шаг

Часть 3. Обработка потоков проверки подлинности в spa Vanilla JavaScript

Поделиться через