Инициализация MSAL

Прежде чем инициализировать MSAL Browser, сначала зарегистрируйте приложение в Центр администрирования Microsoft Entra, чтобы получить идентификатор приложения (клиента).

Шаблон CreatePCA

MSAL.js предоставляет шаблон CreatePCA, который позволяет выбрать тип PublicClientApplication для вашего приложения. Текущие параметры включают Standard и Nestable конфигурации. В будущем будут представлены дополнительные конфигурации.

Стандартная конфигурация

Если вы используете MSAL.js в одностраничном приложении, импортируйте msal-browser, чтобы создать экземпляр IPublicClientApplication с помощью createStandardPublicClientApplication. Эта функция создает экземпляр со стандартной PublicClientApplication конфигурацией.

import * as msal from "@azure/msal-browser";

const pca = msal.createStandardPublicClientApplication({
    auth: {
        clientId: "ENTER_CLIENT_ID",
        authority: "https://login.microsoftonline.com/ENTER_TENANT_ID",
    },
});

Конфигурация вложенных приложений

Если ваше приложение представляет собой вложенное приложение в iframe, которое делегирует аутентификацию SDK-концентратору (который является либо SPA, либо настольным приложением, работающим в рамках MetaOS), импортируйте msal-browser, чтобы создать экземпляр IPublicClientApplication с помощью createNestablePublicClientApplication. Эта функция создает экземпляр PublicClientApplication с конфигурацией NAA.

import * as msal from "@azure/msal-browser";

const nestablePca = msal.createNestablePublicClientApplication({
    auth: {
        clientId: "ENTER_CLIENT_ID",
        authority: "https://login.microsoftonline.com/ENTER_TENANT_ID",
    },
});

Important

Ознакомьтесь со следующими рекомендациями, прежде чем включить вложенную аутентификацию приложений:

createNestablePublicClientApplication использует createStandardPublicClientApplication в качестве резервного варианта, если вложенный мост приложения недоступен или концентратор не настроен для поддержки вложенной аутентификации приложения.
Если приложение не должно быть вложенным приложением, оно должно использоваться createStandardPublicClientApplication вместо этого.
Некоторые API поиска учетных записей не поддерживаются в приложениях NAA. Дополнительные сведения см. в разделе "Активные учетные записи".

Инициализация объекта PublicClientApplication

Чтобы использовать MSAL.js, необходимо создать экземпляр объекта PublicClientApplication. Необходимо указать client id (appId) вашей заявки.

Вариант 1

Создайте экземпляр PublicClientApplication и затем инициализируйте его. Функция initialize является асинхронной и должна завершиться до вызова других API MSAL.js.

import { PublicClientApplication } from "@azure/msal-browser";

const msalConfig = {
    auth: {
        clientId: 'your_client_id'
    }
};

const msalInstance = new PublicClientApplication(msalConfig);
await msalInstance.initialize();

Вариант 2

createPublicClientApplication Вызов статического метода, который возвращает инициализированный PublicClientApplication объект. Обратите внимание, что эта функция асинхронна.

import { PublicClientApplication } from "@azure/msal-browser";

const msalConfig = {
    auth: {
        clientId: 'your_client_id'
    }
};

const msalInstance = await PublicClientApplication.createPublicClientApplication(msalConfig);

(Необязательно) Настроить Authority

По умолчанию MSAL настроен на использование тенанта common, который используется для мультитенантных приложений и приложений, поддерживающих личные учетные записи (не B2C).

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.microsoftonline.com/common/'
    }
};

Если ваше приложение предназначено для одного арендатора, необходимо указать authority с идентификатором арендатора, как показано ниже:

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.microsoftonline.com/{your_tenant_id}'
    }
};

Если ваше приложение использует отдельный поставщик удостоверений, совместимый с OIDC, например "https://login.live.com" или IdentityServer, необходимо указать его в поле knownAuthorities и установить для protocolMode значение "OIDC".

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.live.com',
        knownAuthorities: ["login.live.com"],
    },
    system: {
        protocolMode: "OIDC",
    }
};

Note

Параметр конфигурации protocolMode, который указывает MSAL, нужно ли включать особенности, характерные для Microsoft Entra ID, изменяет следующее поведение:

Метаданные об источнике (начиная с v2.4.0):
- Если установлено значение OIDC, библиотека не включает /v2.0/ в путь издателя при получении метаданных издателя.
- Если установлено значение AAD (значение по умолчанию), библиотека включает /v2.0/ в путь authority при получении метаданных authority.

(Необязательно) Настройте URI перенаправления

По умолчанию MSAL настроена так, чтобы устанавливать URI перенаправления на текущую страницу, на которой она выполняется. Если вы хотите получить код авторизации на другой странице, отличной от той, в которую выполняется MSAL, можно задать ее в конфигурации:

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.microsoftonline.com/{your_tenant_id}',
        redirectUri: 'https://contoso.com'
    }
};

Любой используемый URI перенаправления должен быть настроен в регистрации на портале. Вы также можете задать URI перенаправления для каждого запроса с помощью API входа и запроса.

(Необязательно) Дополнительная конфигурация

MSAL имеет дополнительные параметры конфигурации, которые можно просмотреть здесь.

Обработка запуска приложения при наличии 0 или более доступных учетных записей

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

схема потока загрузкиMSAL.js

Выбор типа взаимодействия

В браузере можно представить экран входа пользователям из приложения двумя способами:

Представление всплывающего окна с текущей страницы
перенаправление окна браузера на сервер входа

loginPopup
acquireTokenPopup

Всплывающие API используют ES6 Promises, которые разрешают, когда поток проверки подлинности в всплывающем ряду завершается и возвращает указанный URI перенаправления или отклоняет, если в коде возникли проблемы или всплывающее окно заблокировано.

API для перенаправления

loginRedirect
acquireTokenRedirect

Примечание: если вы используете msal-angular или msal-react, перенаправления обрабатываются иначе; дополнительные сведения см. в msal-angular документации по перенаправлениям и msal-react FAQ.

API перенаправления — это асинхронные функции (то есть возвращающие Promise) void, которые перенаправляют окно браузера после сохранения в кеше некоторой базовой информации. Если вы решите использовать API перенаправления, имейте в виду, что вы ОБЯЗАНЫ вызвать handleRedirectPromise(), чтобы API обрабатывался корректно. Вы можете использовать следующую функцию для выполнения действия при завершении обмена маркерами:

msalInstance.handleRedirectPromise().then((tokenResponse) => {
    // Check if the tokenResponse is null
    // If the tokenResponse !== null, then you are coming back from a successful authentication redirect.
    // If the tokenResponse === null, you are not coming back from an auth redirect.
}).catch((error) => {
    // handle error, either in the library or coming back from the server
});

Это также позволит вам получать токены при перезагрузке страницы. Дополнительные сведения об использовании см. в примере onPageLoad .

Не рекомендуется использовать оба типа взаимодействия в одном приложении.

Note

handleRedirectPromise при необходимости может принимать хэш-значение для обработки; по умолчанию используется текущее значение window.location.hash. Этот параметр необходимо указать только в сценариях, когда текущее значение window.location.hash не содержит ответ перенаправления, который необходимо обработать. Для почти всех сценариев приложения не должны явно предоставлять этот параметр.

Дальнейшие шаги

Вы готовы выполнить вход!

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2026-07-02