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

Question

我们正面临着在微软团队桌面和移动应用程序中我们的web应用程序(node.js + angular 10)的AAD登录问题，而我们的用户通过单击任何web浏览器或MS团队web客户端中的登录按钮即可轻松登录。

在登录页面中，我们只是通过一个简单的登录按钮调用登录组件。我们添加了我们的angular web应用作为MS团队的个人标签/应用。当用户在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, 
}); 
});

这是来自teams SDK的javascript，我们没有弄清楚如何在Angular 10结构中使用这个函数，我们不能从Angular中的任何包中调用该函数。

有没有办法让Angular 10应用程序使用像microsoftTeams.authentication.authenticate这样的功能？有没有适合微软团队的打字软件包？

我们是否必须使用React创建一个外部团队特定的登录流应用程序(如这些代码：https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/2531#issuecomment-770110059)，并调用ms teams js sdk包来通过该React应用程序对用户进行身份验证，然后最终使用获得的令牌将用户重定向到我们的angular 10应用程序？对于这种情况，这种方法是最好的情况还是最好的解决方案？

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

Answer 1

Angular的MSAL使Angular web应用程序能够通过Azure AD B2C服务认证使用Azure AD工作和学校帐户(AAD)、微软个人帐户(MSA)和社交身份提供商(如Facebook、Google、LinkedIn、Microsoft帐户等)的用户。它还使您的应用程序能够获取令牌来访问Microsoft Graph等Microsoft Cloud服务。

有关更多信息，请查看doc