来自 Angular 应用程序和 msal 的 Azure AD B2C：加载自定义 UI Html

Question

我正在尝试使用 Azure B2c 登录到 angular 应用程序。 自定义登录页面，图片、css、ui html文件存放在azure目录下的blobstorage中。

单击登录按钮时，页面未加载，显示的控制台错误是： zone.js:682 Unhandled Promise denied: AADB2C90047: The resource ' https://storageblob.blob.core.windows.net/storageblobcontainer/ui .html ' 包含阻止它被加载的脚本错误。

有人可以解释如何解决这个问题吗？

Answer 1

我假设您已遵循以下 Javascript 指南来自定义您的 AD B2C UI

使用 JavaScript 自定义应用程序的界面时，请遵循以下准则：

• 不要在<a> HTML 元素上绑定 click 事件。

• 不要依赖 Azure AD B2C 代码或注释。

• 不要更改 Azure AD B2C HTML 元素的顺序或层次结构。 使用 Azure AD B2C 策略来控制 UI 元素的顺序。

• 您可以根据以下注意事项调用任何 RESTful 服务：

  • 您可能需要设置 RESTful 服务 CORS 以允许客户端 HTTP 调用。

  • 确保您的 RESTful 服务是安全的并且仅使用 HTTPS 协议。

  • 不要直接使用 JavaScript 调用 Azure AD B2C 终结点。

• 您可以嵌入 JavaScript，也可以链接到外部 JavaScript 文件。 使用外部 JavaScript 文件时，请确保使用绝对 URL 而不是相对 URL。

• JavaScript 框架：

  • Azure AD B2C 使用特定版本的 jQuery。 不要包含其他版本的 jQuery。 在同一页面上使用多个版本会导致问题。

  • 不支持使用 RequireJS。

  • Azure AD B2C 不支持大多数 JavaScript 框架。

• Azure AD B2C 设置可以通过调用 window.SETTINGS、window.CONTENT 对象来读取，比如当前的 UI 语言。 不要更改这些对象的值。

• 若要自定义 Azure AD B2C 错误消息，请在策略中使用本地化。

• 如果使用策略可以实现任何目的，通常这是推荐的方法。

否则可能会导致问题。 另外，我希望您在 CORS 值中添加了通配符“https”。

这是一篇关于同一问题的文章。

https://github.com/MicrosoftDocs/azure-docs/issues/18508

希望能帮助到你。