Azure AD 自定义登录页面

Azure AD custom login page

我经历过这个link for customizing the user login page in Azure AD, but on one documentation page, microsoft have shown login page like this

我们怎样才能做到这一点?

您链接到的页面 (link) 将引导您完成如何设置自定义设计并将其与您的 B2C 旅程相关联。

您需要编写自己的 HTML 页面和 CSS 然后自己将其与任何图像、字体等一起托管,就像您对普通网页一样,我们通常将它们称为页面模板。

您还需要在 B2C 中指定,当它为您的用户呈现自己的页面时,您的策略将使用这些页面模板,链接页面将引导您完成该操作。您的页面模板将需要其中的特定元素 (<div id="api"></div>),当 B2C 使用这些模板呈现其页面时,B2C 会将其内容插入其中(根据您的 B2C 政策)。

在您在屏幕截图中显示的示例中,将有一个 HTML 页面将该图像设置为背景(可能使用 CSS),中间有一个白框用于B2C 将其内容插入。然后它将使用 CSS(可能还有一些 Javascript)来设置 B2C 插入到页面上的内容的样式。

如果您想查看该页面的确切构建方式,您可以访问 Woodgrove Demo 网站,使用您的个人帐户登录,然后您将转到该页面,然后您可以在浏览器中查看该页面.

如果您在使用个人帐户登录时打开了浏览器的网络 window,那么您应该会看到 B2C 在初始页面之后从某处 加载该页面模板加载。那是因为它随后使用 Javascript 将该模板与其页面内容组合以呈现最终页面。