angular - Teams 桌面应用程序中的 MSAL v2 Angular 问题

Question

我们在 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 团队等的 typescript 包？

我们是否必须使用 React 创建一个外部 Teams-specific-login 流程应用程序(如这些代码:https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/2531#issuecomment-770110059)并调用 ms teams js sdk 包以通过此 React 应用程序对用户进行身份验证，然后最终将用户重定向到我们的 Angular 10 个应用程序获得了 token ？这种方法是这种情况的最佳案例还是最佳解决方法？

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

Answer 1

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

请查看doc了解更多信息