Всплывающее окно входа в MSAL (Angular)

У меня проблема с MSAL в Angular. Я использую пакет @azure/msal-angular (версия 1.1.1).

Я работаю над приложением Angular, встроенным в систему ERP (Business Central). На данный момент у меня проблемы с аутентификацией.

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

Business Central встраивает приложение Angular, ссылаясь на файлы Angular dist из хранилища BLOB-объектов Azure.

При входе в систему провайдер входа не может перенаправить обратно в приложение Angular, поскольку оно встроено в Business Central, а общедоступный URL-адрес для вызова маршрута в самом Angular при встраивании отсутствует.

Я разместил приложение Angular на общедоступной конечной точке, а во встроенном приложении использовал внешнее приложение для перенаправления обратно после аутентификации. Я использовал другую библиотеку для поддержки аутентификации таким образом, и при использовании всплывающего окна для аутентификации я перенаправлялся на простую HTML-страницу с парой строк JavaScript, чтобы получить access_token / id_token из сегментов URL. После получения я вызвал (window.opener || window.parent).postMessage(message, "*");, чтобы уведомить родительское окно о результате аутентификации.

Но теперь у меня проблемы с MSAL. При запуске приложения Angular только локально, с redirectURL https: // localhost: 4200 / процесс аутентификации работает нормально. Но при изменении этого на это внешнее размещенное приложение Angular (та же версия) отображается всплывающее окно с приложением (после перенаправления) с JWT в сегментах URL-адреса. И MSAL никак не реагирует на этот результат. Я думаю, потому что домен всплывающего окна отличается от родительского окна.

Есть ли способ исправить этот (сложный) способ аутентификации с помощью MSAL?


person Ferry Jongmans    schedule 19.09.2020    source источник


Ответы (2)


На самом деле есть страница под названием OAuthLanding .htm, который передает ключи ответа через локальное хранилище таким вещам, как надстройки управления.

В качестве примеров лучше всего взглянуть на существующий код (например, аутентификацию Azure AD), чтобы узнать, как его реализовать. Хотя это не совсем Angular, он даст вам представление о потоке. Вы можете открыть страницу надстроек элементов управления, на которой есть несколько существующих решений Microsoft, которые делают аналогичные вещи.

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

person Jake Edwards    schedule 21.09.2020

Хорошо, получается, что MSAL в настоящее время не поддерживает вход в систему через всплывающее окно CORS по умолчанию, поскольку это представляет потенциальную угрозу безопасности.

Согласно моему сообщению на GitHub, это подтверждено. https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/2320

Так что мне пришлось кое-что изменить, чтобы все заработало. Вместо того, чтобы полностью встраивать приложение (изначально загружать все исходные файлы приложения и добавлять их к элементам в системе ERP), я теперь загружаю полное приложение Angular в iframe на странице. Таким образом, всплывающее окно остается в том же домене, что и iframe, и проблема не возникает.

Сначала я думал, что нельзя отправлять события из Angular в BC и наоборот. Но я был неправ. Это вполне возможно, поскольку у вас всегда есть родительское окно.

Так что это было решение моей проблемы.

person Ferry Jongmans    schedule 24.09.2020