从Angular应用程序和MSAL获得Azure AD B2C：加载自定义UI Html

Question

我正在尝试使用Azure B2c登录角度应用程序。登录页面是自定义的，图像，css和ui html文件存储在azure目录的blobstorage中。

单击登录按钮后，页面未加载，并且显示的控制台错误为： zone.js：682未处理的承诺被拒绝：AADB2C90047：资源'https://storageblob.blob.core.windows.net/storageblobcontainer/ui.html'包含脚本错误，无法加载。

有人可以解释如何解决吗？

Answer 1

我假设您已按照以下Javascript准则自定义AD B2C UI

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

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

• 不要依赖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

希望有帮助。