MSAL（Angular）弹出登录

Question

我在 Angular 中遇到 MSAL 问题。我正在使用

@azure/msal-angular

包（版本 1.1.1）。

我正在开发嵌入 ERP 系统（业务中心）的 Angular 应用程序。目前我面临身份验证问题。

下面是组件概述。

业务中心通过引用 Azure blobstorage 中的 Angular dist 文件来嵌入 Angular 应用程序。

登录时，登录提供程序无法重定向回 Angular 应用程序，因为它嵌入在 Business Central 中，并且嵌入时没有公共 URL 可以调用 Angular 本身中的路由。

因此，我所做的是将 Angular 应用程序托管在公共端点上，并在嵌入式应用程序中，使用外部应用程序在身份验证后重定向回来。我使用了另一个库以这种方式支持身份验证，当使用弹出窗口进行身份验证时，我重定向到一个纯 HTML 页面，其中包含几行 JavaScript，以从 url 段检索 access_token / id_token。检索后，我调用

(window.opener || window.parent).postMessage(message, "*");

通知父窗口认证结果。

但现在我遇到了 MSAL 问题。当仅在本地运行 Angular 应用程序时，使用redirectURL https://localhost:4200/，身份验证过程工作得很好。但是，当将此更改为外部托管的 Angular 应用程序（相同版本）时，它会显示一个弹出窗口，其中包含应用程序（重定向后），网址段中包含 JWT。 MSAL 没有对此结果做出反应。我认为是因为弹出窗口的域与父窗口不同。

有没有办法修复这种（复杂的）MSAL 身份验证方式？

Answer 1

实际上有一个名为 OAuthLanding.htm 的页面，它通过本地存储将响应密钥传递给诸如控制插件之类的东西。

对于示例，最好查看现有代码（即 Azure AD Auth）以获取有关如何实施的想法。虽然它不完全是 Angular，但它会让您了解流程。您可以打开控件插件页面，其中有一些现有的 Microsoft 解决方案可以执行类似的操作。

如果您正在寻找存储 OAuth 流程的地方，基础应用程序中还有一些 OAuth 2.0 管理表和代码单元，您可能也会感兴趣。

Answer 2

好吧，事实证明，MSAL 目前在设计上不支持开箱即用的 CORS 弹出登录，因为这是一个潜在的安全风险。

根据我在 GitHub 上的帖子，这一点已得到验证。 https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/2320

所以我必须做一些改变才能让它发挥作用。 我现在不是完全嵌入应用程序（本地下载所有应用程序源文件并将它们附加到 ERP 系统中的元素），而是在页面上的 iframe 中加载完整的 Angular 应用程序。这样，弹出窗口与 iframe 保持在同一域中，并且不会出现问题。

起初我认为不可能将事件从 Angular 发送到 BC，反之亦然。但我错了。这是完全可能的，因为你总是有一个父窗口。

这就是我问题的解决方案。

Answer 3

我想知道你是如何解决你的问题的。 iframe 内的 MSAL loginPopup() 在第一次登录尝试时立即创建并删除 cookie 我遇到了这个问题，但我不知道如何解决它，并且很沮丧，谢谢:)