Question

我正在尝试在Azure AD B2C统一登录/注册页面上自定义页面UI。

我能够使用正确的CORS设置创建我的模板并将所有资源（即html页面，图像和CSS）上传到我的Azure Blob存储容器。

然而，当我拉起页面时，它看起来绝对可怕！它似乎不支持Bootstrap。我在某处读到不允许使用JavaScript。这是什么原因？

上传自定义HTML网页后，Azure AD B2C似乎正在剥离我自定义所需的许多设计元素，例如我的id标记中的style和body - 见下文：

<!-- 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都与Bootstrap引用一起被删除，例如css和js。

我说得对吗？ No Bootstrap是否意味着Azure AD B2C仅支持最基本的自定义？

Answer 1

您的HTML模板可以包含任何外部，head或内联样式，但不能包含脚本。

可以在the WoodGrove sign-up or sign-in page找到自定义页面的示例。

此自定义页面的HTML模板可在the WoodGrove GitHub repository。

中找到

此HTML模板包含Bootstrap's Reboot styles以及WoodGrove的特定样式。

Azure AD B2C创建head和body元素，然后将HTML模板中每个head和body元素的子元素复制到其HTML文档中

因此，您不应将属性添加到HTML模板中的body元素，因为它们不会被复制。

Answer 2

您可以导入引导程序引用。请参阅此文档：https://docs.microsoft.com/en-us/dynamics365/customer-engagement/portals/azure-ad-b2c

另请参阅：https://github.com/Azure-Samples/active-directory-b2c-php-webapp-openidconnect

Answer 3

您需要拥有自己的策略，并使JavaScript能够使用自定义HTML / CSS。 https://docs.microsoft.com/en-us/azure/active-directory-b2c/custom-policy-ui-customization

您还可能需要Blob存储，并会像这样更新链接：

从：

<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自定义是否支持Bootstrap？

3 个答案: