[英]Azure AD B2C from an Angular application and msal: Loading customized UI Html
I am trying to login into the angular application using the Azure B2c.我正在尝试使用 Azure B2c 登录到 angular 应用程序。 The signin page is customized and the images, css, ui html files are stored in the blobstorage in the azure directory.
自定义登录页面,图片、css、ui html文件存放在azure目录下的blobstorage中。
When the login button is clicked the page is not being loaded and the console error shown is: zone.js:682 Unhandled Promise rejection: AADB2C90047: The resource ' https://storageblob.blob.core.windows.net/storageblobcontainer/ui.html ' contains script errors preventing it from being loaded.单击登录按钮时,页面未加载,显示的控制台错误是: zone.js:682 Unhandled Promise denied: AADB2C90047: The resource ' https://storageblob.blob.core.windows.net/storageblobcontainer/ui .html ' 包含阻止它被加载的脚本错误。
Can somebody explain how this can resolved?有人可以解释如何解决这个问题吗?
I am assuming that you have followed the below Javascript guideline for customizing your AD B2C UI我假设您已遵循以下 Javascript 指南来自定义您的 AD B2C UI
Follow these guidelines when you customize the interface of your application using JavaScript:使用 JavaScript 自定义应用程序的界面时,请遵循以下准则:
Don't bind a click event on <a>
HTML elements.不要在
<a>
HTML 元素上绑定 click 事件。
Don't take a dependency on Azure AD B2C code or comments.不要依赖 Azure AD B2C 代码或注释。
Don't change the order or hierarchy of Azure AD B2C HTML elements.不要更改 Azure AD B2C HTML 元素的顺序或层次结构。 Use an Azure AD B2C policy to control the order of the UI elements.
使用 Azure AD B2C 策略来控制 UI 元素的顺序。
You can call any RESTful service with these considerations:您可以根据以下注意事项调用任何 RESTful 服务:
You may need to set your RESTful service CORS to allow client-side HTTP calls.您可能需要设置 RESTful 服务 CORS 以允许客户端 HTTP 调用。
Make sure your RESTful service is secure and uses only the HTTPS protocol.确保您的 RESTful 服务是安全的并且仅使用 HTTPS 协议。
Don't use JavaScript directly to call Azure AD B2C endpoints.不要直接使用 JavaScript 调用 Azure AD B2C 终结点。
You can embed your JavaScript or you can link to external JavaScript files.您可以嵌入 JavaScript,也可以链接到外部 JavaScript 文件。 When using an external JavaScript file, make sure to use the absolute URL and not a relative URL.
使用外部 JavaScript 文件时,请确保使用绝对 URL 而不是相对 URL。
JavaScript frameworks: JavaScript 框架:
Azure AD B2C uses a specific version of jQuery. Azure AD B2C 使用特定版本的 jQuery。 Don't include another version of jQuery.
不要包含其他版本的 jQuery。 Using more than one version on the same page causes issues.
在同一页面上使用多个版本会导致问题。
Using RequireJS isn't supported.不支持使用 RequireJS。
Most JavaScript frameworks are not supported by Azure AD B2C. Azure AD B2C 不支持大多数 JavaScript 框架。
Azure AD B2C settings can be read by calling window.SETTINGS, window.CONTENT objects, such as the current UI language. Azure AD B2C 设置可以通过调用 window.SETTINGS、window.CONTENT 对象来读取,比如当前的 UI 语言。 Don't change the value of these objects.
不要更改这些对象的值。
To customize the Azure AD B2C error message, use localization in a policy.若要自定义 Azure AD B2C 错误消息,请在策略中使用本地化。
If anything can be achieved by using a policy, generally it's the recommended way.如果使用策略可以实现任何目的,通常这是推荐的方法。
Otherwise it could cause issues.否则可能会导致问题。 Also I am hoping that you have added wildcard "https" in CORS value.
另外,我希望您在 CORS 值中添加了通配符“https”。
Here is a article which speaks about the same issue.这是一篇关于同一问题的文章。
https://github.com/MicrosoftDocs/azure-docs/issues/18508 https://github.com/MicrosoftDocs/azure-docs/issues/18508
Hope it helps.希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.