angular - MSAL(Angular)弹出登录

标签 angular azure azure-ad-msal msal.js dynamics-business-central

我在 Angular 中遇到 MSAL 问题。我正在使用 @azure/msal-angular 包(版本 1.1.1)。

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

下面是组件的概述。 enter image description here

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

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

所以我所做的是将 Angular 应用程序托管在公共(public)端点上,并在嵌入式应用程序中,使用外部应用程序在身份验证后重定向回来。我使用了另一个库来支持这种方式的身份验证,当使用弹出窗口进行身份验证时,我重定向到一个纯 HTML 页面,其中包含几行 JavaScript,以从 url 段检索 access_token/id_token。检索后,调用(window.opener || window.parent).postMessage(message, "*");通知父窗口认证结果。

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

有没有办法修复这种(复杂的)MSAL 身份验证方式?

最佳答案

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

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

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

关于angular - MSAL(Angular)弹出登录,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63967896/

相关文章:

javascript - 如何在 Ionic 2 中打印特殊字符

提交搜索表单后的 Angular 重定向

angular - TypeScript 装饰器 - 不在对象的属性上调用 Setter

Laravel 在适用于 Linux 的 Azure Web App 上运行速度非常慢

angular - 是否可以在 Angular 8 中开发自定义登录页面以通过 Azure Ad API 进行身份验证

使用 .NET Core Web API 进行 Azure AD 身份验证

angular - 尝试关闭时出现 NgbModal 错误

typescript - 如何测试刷新和过期 token 场景?

python - 使用MSAL访问azure python sdk中的ObjectID?

azure - 如何更改 Azure 新计算机实例的磁盘大小?