Руководство. Добавление входа и выхода надстройки в веб-приложение Node.js

Мақала
08/27/2024

Это руководство является последней частью серии, демонстрирующей создание веб-приложения Node.js и подготовку его к проверке подлинности с помощью Центра администрирования Microsoft Entra. В части 2 этой серии вы создали веб-приложение Node.js и организовали все необходимые файлы. В этом руководстве вы добавите вход, зарегистрируйтесь и выйдите в веб-приложение Node.js. Чтобы упростить добавление проверки подлинности в веб-приложение Node.js, для узла используется библиотека проверки подлинности Майкрософт (MSAL). Поток входа использует протокол проверки подлинности OpenID Connect (OIDC), который безопасно входит в систему пользователей.

В этом руководстве вы выполните следующие действия.

Добавление логики входа и выхода
Просмотр утверждений маркера идентификатора
Запустите приложение и проверьте возможности входа и выхода.

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

Вы выполнили действия, описанные в руководстве. Подготовка веб-приложения Node.js для проверки подлинности.

Создание объекта конфигурации MSAL

В редакторе кода откройте файл authConfig.js , а затем добавьте следующий код:

require('dotenv').config();

const TENANT_SUBDOMAIN = process.env.TENANT_SUBDOMAIN || 'Enter_the_Tenant_Subdomain_Here';
const REDIRECT_URI = process.env.REDIRECT_URI || 'http://localhost:3000/auth/redirect';
const POST_LOGOUT_REDIRECT_URI = process.env.POST_LOGOUT_REDIRECT_URI || 'http://localhost:3000';

/**
 * Configuration object to be passed to MSAL instance on creation.
 * For a full list of MSAL Node configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-node/docs/configuration.md
 */
const msalConfig = {
    auth: {
        clientId: process.env.CLIENT_ID || 'Enter_the_Application_Id_Here', // 'Application (client) ID' of app registration in Azure portal - this value is a GUID
        authority: process.env.AUTHORITY || `https://${TENANT_SUBDOMAIN}.ciamlogin.com/`, // replace "Enter_the_Tenant_Subdomain_Here" with your tenant name
        clientSecret: process.env.CLIENT_SECRET || 'Enter_the_Client_Secret_Here', // Client secret generated from the app registration in Azure portal
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                console.log(message);
            },
            piiLoggingEnabled: false,
            logLevel: 'Info',
        },
    },
};

module.exports = {
    msalConfig,
    REDIRECT_URI,
    POST_LOGOUT_REDIRECT_URI,
    TENANT_SUBDOMAIN
};

Объект msalConfig содержит набор параметров конфигурации, используемых для настройки поведения потоков проверки подлинности.

В файле authConfig.js замените:

Enter_the_Application_Id_Here с идентификатором приложения (клиента) зарегистрированного ранее приложения.
Enter_the_Tenant_Subdomain_Here и замените его поддоменом каталога (клиента). Например, если основной домен клиента — это contoso.onmicrosoft.com, используйте contoso. Если у вас нет имени клиента, узнайте, как прочитать сведения о клиенте.
Enter_the_Client_Secret_Here значение секрета приложения, скопированное ранее.

Если вы используете ENV-файл для хранения сведений о конфигурации:

В редакторе кода откройте env-файл , а затем добавьте следующий код.

    CLIENT_ID=Enter_the_Application_Id_Here
    TENANT_SUBDOMAIN=Enter_the_Tenant_Subdomain_Here
    CLIENT_SECRET=Enter_the_Client_Secret_Here
    REDIRECT_URI=http://localhost:3000/auth/redirect
    POST_LOGOUT_REDIRECT_URI=http://localhost:3000

Замените Enter_the_Application_Id_HereEnter_the_Tenant_Subdomain_Here заполнители, Enter_the_Client_Secret_Here как описано ранее.

Вы экспортируете msalConfigREDIRECT_URITENANT_SUBDOMAIN переменные и POST_LOGOUT_REDIRECT_URI переменные в authConfig.js-файле, что делает их доступными везде, где требуется файл.

Использование личного домена URL-адреса (необязательно)

Используйте личный домен для полной фирменной символики URL-адреса проверки подлинности. С точки зрения пользователя пользователи остаются в домене во время проверки подлинности, а не перенаправляются на ciamlogin.com доменное имя.

Чтобы использовать личный домен, выполните следующие действия.

Выполните действия, описанные в разделе "Включение пользовательских доменов URL-адресов" для приложений во внешних клиентах , чтобы включить личный ДОМЕН URL-адресов для внешнего клиента.
В файле authConfig.js найдите затем auth объект, а затем:
1. Измените значение authority свойства https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Hereна . Замените Enter_the_Custom_Domain_Here домен личного URL-адреса и Enter_the_Tenant_ID_Here идентификатором клиента. Если у вас нет идентификатора клиента, узнайте, как прочитать сведения о клиенте.
2. Добавьте knownAuthorities свойство со значением [Enter_the_Custom_Domain_Here].

После внесения изменений в файл authConfig.js, если ваш личный URL-адрес login.contoso.com, а идентификатор клиента — aaaabbbb-0000-cccc-1111-dd222eeee, файл должен выглядеть следующим фрагментом кода:

//...
const msalConfig = {
    auth: {
        authority: process.env.AUTHORITY || 'https://login.contoso.com/aaaabbbb-0000-cccc-1111-dddd2222eeee', 
        knownAuthorities: ["login.contoso.com"],
        //Other properties
    },
    //...
};

Добавление экспресс-маршрутов

Маршруты Express предоставляют конечные точки, позволяющие выполнять такие операции, как вход, выход и просмотр утверждений маркера идентификатора.

Точка входа приложения

В редакторе кода откройте файл маршрутов или index.js , а затем добавьте следующий код:

const express = require('express');
const router = express.Router();

router.get('/', function (req, res, next) {
    res.render('index', {
        title: 'MSAL Node & Express Web App',
        isAuthenticated: req.session.isAuthenticated,
        username: req.session.account?.username !== '' ? req.session.account?.username : req.session.account?.name,
    });
});    
module.exports = router;

Маршрут / — это точка входа в приложение. Он отображает представление views/index.hbs , созданное ранее в компонентах пользовательского интерфейса приложения сборки. isAuthenticated — логическая переменная, которая определяет, что вы видите в представлении.

В редакторе кода откройте файл маршрутов или auth.js , а затем добавьте код из auth.js в него.
В редакторе кода откройте файл контроллера или authController.js , а затем добавьте код из authController.js в него.
В редакторе кода откройте файл проверки подлинности или AuthProvider.js , а затем добавьте код из AuthProvider.js в него.

Маршруты /signinопределяются /redirect в файле маршрутов или auth.js, но вы реализуете свою логику в классе auth/AuthProvider.js. /signout

Метод login обрабатывает /signin маршрут:
- Он инициирует поток входа, активируя первый этап потока кода проверки подлинности.
- Он инициализирует экземпляр конфиденциального клиентского приложения с помощью объекта конфигурации MSAL, msalConfigсозданного ранее.
```
    const msalInstance = this.getMsalInstance(this.config.msalConfig);
```
  Метод getMsalInstance определяется следующим образом:
```
    getMsalInstance(msalConfig) {
        return new msal.ConfidentialClientApplication(msalConfig);
    }
```
- Первый этап потока кода проверки подлинности создает URL-адрес запроса кода авторизации, а затем перенаправляется на этот URL-адрес, чтобы получить код авторизации. Этот первый этап реализуется в методе redirectToAuthCodeUrl . Обратите внимание, как мы используем метод getAuthCodeUrl MSALs для создания URL-адреса кода авторизации:
```
//...
const authCodeUrlResponse = await msalInstance.getAuthCodeUrl(req.session.authCodeUrlRequest);
//...
```
  Затем мы перенаправляем URL-адрес кода авторизации.
```
//...
res.redirect(authCodeUrlResponse);
//...
```
Метод handleRedirect обрабатывает /redirect маршрут:
- Этот URL-адрес задается в качестве URI перенаправления для веб-приложения в Центре администрирования Microsoft Entra ранее в разделе "Регистрация веб-приложения".
- Эта конечная точка реализует второй этап потока кода проверки подлинности. Он использует код авторизации для запроса маркера идентификатора с помощью метода получения MsALTokenByCode .
```
//...
const tokenResponse = await msalInstance.acquireTokenByCode(authCodeRequest, req.body);
//...
```
- Получив ответ, вы можете создать сеанс Express и сохранить в нем все необходимые сведения. Необходимо включить isAuthenticated и задать для него trueследующие значения:
```
//...        
req.session.idToken = tokenResponse.idToken;
req.session.account = tokenResponse.account;
req.session.isAuthenticated = true;
//...
```
Метод logout обрабатывает /signout маршрут:
```
async logout(req, res, next) {
    /**
     * Construct a logout URI and redirect the user to end the
        * session with Azure AD. For more information, visit:
        * https://docs.microsoft.com/azure/active-directory/develop/v2-protocols-oidc#send-a-sign-out-request
        */
    const logoutUri = `${this.config.msalConfig.auth.authority}${TENANT_SUBDOMAIN}.onmicrosoft.com/oauth2/v2.0/logout?post_logout_redirect_uri=${this.config.postLogoutRedirectUri}`;

    req.session.destroy(() => {
        res.redirect(logoutUri);
    });
}
```
- Он инициирует запрос на выход.
- Если вы хотите выйти из приложения, это недостаточно для завершения сеанса пользователя. Необходимо перенаправить пользователя в logoutUri. В противном случае пользователь может повторно выполнить проверку подлинности в приложениях без повторного ввода учетных данных. Если имя клиента — contoso, то logoutUri выглядит следующим образом https://contoso.ciamlogin.com/contoso.onmicrosoft.com/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000.

Просмотр утверждений маркера идентификатора

В редакторе кода откройте файл маршрутов или users.js , а затем добавьте следующий код:

const express = require('express');
const router = express.Router();

// custom middleware to check auth state
function isAuthenticated(req, res, next) {
    if (!req.session.isAuthenticated) {
        return res.redirect('/auth/signin'); // redirect to sign-in route
    }

    next();
};

router.get('/id',
    isAuthenticated, // check if user is authenticated
    async function (req, res, next) {
        res.render('id', { idTokenClaims: req.session.account.idTokenClaims });
    }
);        
module.exports = router;

Если пользователь прошел проверку подлинности, /id маршрут отображает утверждения маркера идентификатора с помощью представления views/id.hbs . Это представление было добавлено ранее в компонентах пользовательского интерфейса приложения сборки.

Чтобы извлечь определенное утверждение маркера идентификатора, например заданное имя:

const givenName = req.session.account.idTokenClaims.given_name

Завершение работы веб-приложения

В редакторе кода откройте файл app.js , а затем добавьте в него код из app.js .
В редакторе кода откройте файл server.js , а затем добавьте в него код из server.js .
В редакторе кода откройте файл package.json , а затем обновите свойство следующим scripts образом:
```
"scripts": {
"start": "node server.js"
}
```

Запуск и тестирование веб-приложения

В терминале убедитесь, что вы находитесь в папке проекта, содержащей веб-приложение, например ciam-sign-in-node-express-web-app.
В терминале выполните приведенную ниже команду.
```
npm start
```
Откройте браузер, а затем перейдите в http://localhost:3000раздел . Вы увидите страницу, аналогичную следующему снимку экрана:
После завершения загрузки страницы выберите ссылку для входа . Вам будет предложено выполнить вход.
На странице входа введите адрес электронной почты, нажмите кнопку "Далее", введите пароль, а затем нажмите кнопку "Войти". Если у вас нет учетной записи, выберите "Нет учетной записи"? Создайте одну ссылку, которая запускает поток регистрации.
Если вы выберете вариант регистрации, после заполнения электронного письма одноразовый секретный код, новый пароль и дополнительные сведения о учетной записи, вы завершите весь поток регистрации. Вы увидите страницу, аналогичную следующему снимку экрана. Вы увидите аналогичную страницу при выборе параметра входа.
Выберите "Выйти ", чтобы выйти из веб-приложения или выбрать утверждения маркера идентификатора представления, чтобы просмотреть все утверждения маркера идентификатора.

Бөлісу құралы:

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

Создание объекта конфигурации MSAL

Использование личного домена URL-адреса (необязательно)

Добавление экспресс-маршрутов

Точка входа приложения

Просмотр утверждений маркера идентификатора

Завершение работы веб-приложения

Запуск и тестирование веб-приложения

См. также

Кері байланыс

Қосымша ресурстар

Бөлісу құралы:

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

Создание объекта конфигурации MSAL

Использование личного домена URL-адреса (необязательно)

Добавление экспресс-маршрутов

Точка входа приложения

Функции входа и выхода

Просмотр утверждений маркера идентификатора

Завершение работы веб-приложения

Запуск и тестирование веб-приложения

См. также

Кері байланыс

Қосымша ресурстар