Azure AD B2C 頁面 UI 自定義不支持 Bootstrap 嗎？
[英]Doesn't Azure AD B2C Page UI Customization Support Bootstrap?
問題描述
我正在嘗試自定義 Azure AD B2C 統一登錄/注冊頁面上的頁面 UI。
我能夠使用正確的CORS設置創建我的模板並將所有資產（即 html 頁面、圖像和 css）上傳到我的 Azure Blob 存儲容器。
然而，當我拉起頁面時，它看起來絕對可怕！ 它似乎不支持 Bootstrap。 我在某處讀到不允許使用 JavaScript。 這就是原因嗎？
一旦我上傳了我的自定義 HTML 頁面，Azure AD B2C 似乎正在剝離我的自定義所需的許多設計元素，例如我的body標簽中的id和style ——見下文：
<!-- Omitted for brevity -->
<body id="my-login-class" style="url: ('https://myazurestorage.blob.core.windows.net/my-container/my-bg-image.jpg')">
<div id="some-important-id" class="my-important-class">
<div class="col-xs-8">
<div>Some important message</div>
<div>
<div class="col-xs-4">
<div id="api">
</div>
</div>
</div>
</body>
當我在呈現自定義頁面后檢查頁面源時，我看到我的所有類和 Id 以及引導引用（例如css和js ）都被刪除了。
我做對了嗎？ 沒有 Bootstrap 意味着 Azure AD B2C 只支持最基本的自定義？
3 個解決方案
解決方案1
6 已采納 2018-05-30 03:32:51
您的 HTML 模板可以包含任何外部、 head或內聯樣式，但不能包含腳本。
可在WoodGrove 注冊或登錄頁面上找到自定義頁面的示例。
此自定義頁面的 HTML 模板可以在WoodGrove GitHub 存儲庫中找到。
此 HTML 模板包括Bootstrap 的 Reboot 樣式以及 WoodGrove 的特定樣式。
Azure AD B2C 創建head和body元素，然后將每個head和body元素的子元素從 HTML 模板復制到其 HTML 文檔。
因此，您不應將屬性添加到 HTML 模板中的body元素，因為它們不會被復制。
解決方案2
1 2018-05-29 21:31:38
解決方案3
0 2020-03-04 20:13:24
它看起來很可怕是有原因的。 頁面沒有應用樣式，因此可以完全自定義。 您可以參考 CSS 的 Bootstrap； 但是，我在將 bootstrap.js 用於模態時遇到了問題，因為 Azure B2C API 似乎將 bootstrap 用於模態......根據我的經驗，最好依賴 Vanilla JS 並省略對第三個的任何引用-派對JS。
如果您使用自己的自定義策略，則可以使用 JavaScript。 JavaScript 有一些限制，最好的方法是先嘗試使用策略完成任何事情。
要啟用 JavaScript，請使用以下指南：
<RelyingParty>
<DefaultUserJourney ReferenceId="SignUpOrSignIn" />
<UserJourneyBehaviors>
<ScriptExecution>Allow</ScriptExecution>
</UserJourneyBehaviors>
...
</RelyingParty>
引用外部 CSS/JS 文件時，URL 必須是絕對的。 對於 HTML 文件的 head 部分以及 JavaScript 中的任何引用都是如此。 相對 URL 只能在 CSS 文件中引用。
不正確：
<link href="./css/assets.css" rel="stylesheet" type="text/css" />
正確的：
<link href="https://your-storage-account.blob.core.windows.net/your-container/css/assets.css" rel="stylesheet" type="text/css" />
沒有注冊的Azure AD B2C頁面UI自定義
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.