Teams 桌面应用程序中的 MSAL v2 角度问题

问题描述

我们在 MS Teams 桌面和移动应用程序中的 Web 应用程序（node.js + angular 10）面临 AAD 登录问题，而我们的用户可以通过单击任何 Web 浏览器或 MS Teams Web 客户端中的登录按钮轻松登录。

在 Angular 中，我们使用两个库（@azure/msal-browser msal 和 @azure/msal-common）并通过登录我们的应用程序使用图形工具包进行 AAD。

在登录页面，我们只是通过一个简单的登录按钮调用登录组件。我们添加了我们的 angular Web 应用程序作为 MS Teams 的个人选项卡/应用程序。当用户在 Microsoft Teams 桌面应用程序中单击它时，我们在控制台中遇到以下错误消息：

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 团队等的任何打字稿包？

我们是否必须使用 React 创建外部 Teams-spesific-login 流应用程序（如这些代码：https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/2531#issuecomment-770110059）并调用 ms team js sdk 包以通过此 React 应用程序对用户进行身份验证，然后最终将用户重定向到我们的 angular 10 应用程序获得了令牌？对于这种情况，这种方法是最好的情况还是最好的解决方法？

是否有任何方法可以仅在一个 Angular 10 独立应用程序和一种登录机制中进行，以便将浏览器、团队桌面应用程序、团队移动应用程序一起使用？我找到了这个主题 (https://github.com/OfficeDev/microsoft-teams-library-js/issues/90)，但不知道如何使用它来解决我的问题。

解决方法

用于 Angular 的 MSAL 使 Angular 网络应用程序能够使用 Azure AD 工作和学校帐户 (AAD)、Microsoft 个人帐户 (MSA) 和社交身份提供商（如 Facebook、Google、LinkedIn、Microsoft 帐户等）对用户进行身份验证。 Azure AD B2C 服务。它还使您的应用能够获取令牌以访问 Microsoft Cloud 服务，例如 Microsoft Graph。