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

Руководство. Подготовка одностраничного приложения JavaScript для проверки подлинности

  • Статья

применяется к: зеленый круг с символом белой флажки. арендаторы рабочей силы зеленый круг с символом белой галочки. внешние клиенты (подробнее)

В этом руководстве вы создадите одностраничное приложение JavaScript и подготовите его к проверке подлинности с помощью платформы удостоверений Майкрософт. В этом руководстве показано, как создать SPA JavaScript с помощью npm, создать файлы, необходимые для проверки подлинности и авторизации, и добавить сведения о клиенте в исходный код. Приложение можно использовать для сотрудников в арендуемом рабочем пространстве или для клиентов, использующих внешний арендуемый ресурс.

В этом руководстве описано следующее:

  • Создание проекта JavaScript
  • Установка пакетов, необходимых для проверки подлинности
  • Создание структуры файлов и добавление кода в файл сервера
  • Добавьте данные арендатора в файл конфигурации проверки подлинности

Необходимые условия

  • Арендатор рабочих ресурсов. Вы можете использовать каталог по умолчанию или настроить нового арендатора.
  • Зарегистрируйте новое приложение в Центре администрирования Microsoft Entra с помощью следующей конфигурации. Дополнительные сведения см. в разделе Регистрация приложения.
    • Имя: identity-client-spa
    • Поддерживаемые типы учетных записей: учетные записи в этом каталоге организации (только один клиент).
    • конфигурация платформы: одностраничные приложения (SPA).
    • URI перенаправления: http://localhost:3000/.

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

  1. Откройте Visual Studio Code, выберите Файл>Открыть папку.... Перейдите в нужное место и выберите расположение, в котором будет создан проект.

  2. Откройте новый терминал, выбрав терминал>новый терминал.

  3. Выполните следующую команду, чтобы создать проект JavaScript:

    npm init -y

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

    └── public
    └── authConfig.js
    └── auth.js
    └── claimUtils.js
    └── index.html
    └── signout.html
    └── styles.css
    └── ui.js    
└── server.js
└── package.json

  5. В терминале выполните следующую команду, чтобы установить необходимые зависимости для проекта:

    npm install express morgan @azure/msal-browser

Добавление кода в файл сервера

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

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

module.exports = app;

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

Добавление сведений о клиенте в конфигурацию MSAL

Файл authConfig.js содержит параметры конфигурации для потока проверки подлинности и используется для настройки MSAL.js с необходимыми параметрами для проверки подлинности.

  1. Откройте public/authConfig.js и добавьте следующий код:

    /**
* Configuration object to be passed to MSAL instance on creation. 
* For a full list of MSAL.js configuration parameters, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
*/
const msalConfig = {
    auth: {
        // WORKFORCE TENANT
        authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here", //  Replace the placeholder with your tenant info
        redirectUri: '/', // You must register this URI on App Registration. Defaults to window.location.href e.g. http://localhost:3000/
        navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request location before processing the auth code response.
    },
    cache: {
        cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO.
        storeAuthStateInCookie: false, // set this to true if you have to support IE
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case msal.LogLevel.Error:
                        console.error(message);
                        return;
                    case msal.LogLevel.Info:
                        console.info(message);
                        return;
                    case msal.LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case msal.LogLevel.Warning:
                        console.warn(message);
                        return;
                }
            },
        },
    },
};

/**
* Scopes you add here will be prompted for user consent during sign-in.
* By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
* For more information about OIDC scopes, visit: 
* https://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
*/
const loginRequest = {
    scopes: ["User.Read"],
};

/**
* An optional silentRequest object can be used to achieve silent SSO
* between applications by providing a "login_hint" property.
*/

// const silentRequest = {
//   scopes: ["openid", "profile"],
//   loginHint: "example@domain.net"
// };

// exporting config object for jest
if (typeof exports !== 'undefined') {
    module.exports = {
        msalConfig: msalConfig,
        loginRequest: loginRequest,
    };
    module.exports = {
        msalConfig: msalConfig,
        loginRequest: loginRequest,
    };
}

  2. Замените следующие значения значениями из Центра администрирования Microsoft Entra:

    • Найдите значение Enter_the_Application_Id_Here и замените его идентификатором приложения (clientId) приложения, зарегистрированного в Центре администрирования Microsoft Entra.
    • Найдите значение Enter_the_Tenant_Info_Here и замените его идентификатором арендатора арендатора рабочей группы, созданного в Центре администрирования Microsoft Entra.

  3. Сохраните файл.

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

обрабатывать потоки проверки подлинности в SPA JavaScript