Проблема MSAL v2 Angular в настольном приложении Teams

Question

Мы сталкиваемся с проблемой входа в AAD для нашего веб-приложения (node.js + angular 10) в настольном и мобильном приложении MS Teams, в то время как наши пользователи легко входят в систему, нажав кнопку входа в любом веб-браузере или веб-клиенте MS team.

В Angular мы используем две библиотеки (@azure / msal-browser msal и @ azure / msal-common) и используем набор инструментов графа для AAD через логин в нашем приложении.

На странице входа мы просто вызываем компонент входа с помощью простой кнопки входа. Мы добавили наше угловое веб-приложение в качестве личной вкладки / приложения MS Teams. Когда пользователь щелкает его в приложении Microsoft Teams Desktop, в консоли появляется сообщение об ошибке:

      ERROR Error: Uncaught (in promise): BrowserAuthError: redirect_in_iframe: 
Code flow is not supported inside an iframe. Please ensure you are using MSAL.js in a top frame of the window if using the redirect APIs, or use the popup APIs. (window.parent !== window) => true

BrowserAuthError: redirect_in_iframe: Code flow is not supported inside an iframe. Please ensure you are using MSAL.js in a top frame of the window if using the redirect APIs, or use the popup APIs. (window.parent !== window) => true at t [as constructor]

Мы предполагаем, что вкладка Teams Desktop не смогла открыть наш механизм аутентификации, потому что мы не смогли добавить наш код ниже функций:

      microsoftTeams.initialize(() => { 
microsoftTeams.authentication.authenticate({
url: config.BASE_URL + '/app/microsoft-teams/tabs/auth',
width: 600,
height: 535,
successCallback: onAuthSuccess,
failureCallback: onAuthFailure, 
}); 
});

Это из команд SDK javascript, и мы не выяснили, как использовать эту функцию в нашей структуре Angular 10, мы не можем вызывать функцию из любого пакета в Angular.

Есть ли обходной путь для приложений Angular 10, чтобы использовать такие функции, как microsoftTeams.authentication.authenticate? Любой пакет машинописных текстов для команд ms и т. Д.?

Нужно ли нам создавать внешнее приложение потока входа в систему Teams с помощью React (например, эти коды: https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/2531#issuecomment-770110059) и вызвать пакет ms commands js sdk для аутентификации пользователей через это приложение React, а затем, наконец, перенаправить пользователя в наше приложение angular 10 с полученным токеном? Этот подход - лучший случай или лучший обходной путь для такой ситуации?

Есть ли какой-либо способ продолжить работу только в одном автономном приложении Angular 10 и одном механизме входа, который работает вместе с браузерами, настольным приложением для команд и мобильным приложением для команд? Я нашел эту тему (https://github.com/OfficeDev/microsoft-teams-library-js/issues/90), но не мог понять, как использовать ее для решения моей проблемы.

Answer 1

MSAL для Angular позволяет веб-приложениям Angular аутентифицировать пользователей с помощью рабочих и учебных учетных записей Azure AD (AAD), личных учетных записей Microsoft (MSA) и поставщиков социальных идентификационных данных, таких как Facebook, Google, LinkedIn, учетные записи Microsoft и т. Через службу Д.Azure AD B2C . Это также позволяет вашему приложению получать токены для доступа к службам Microsoft Cloud, таким как Microsoft Graph.

Пожалуйста, проверьте документ для получения дополнительной информации