如何实现Azure AD自定义用户登录页的微软官方文档示例样式？

• 准备符合要求的基础HTML模板
  提前准备空白HTML模板，必须在模板中预留id="api"的div标签，该标签是Azure AD B2C自动注入登录表单、验证逻辑的固定容器，禁止修改ID属性。你需要自定义的品牌元素、布局结构都放在这个div标签外部即可。
• 编写匹配示例样式的CSS代码
  主要覆盖以下几个模块的样式即可对齐示例效果：
  • 全局背景：设置body的背景色/渐变背景、全局边距、基础字体，和示例的背景风格对齐
  • 品牌展示区：在页面对应位置添加公司logo、品牌标语等元素，按照示例的尺寸、位置写CSS定位规则
  • 表单卡片容器：给#api下的表单外层容器添加圆角、阴影、内边距，还原示例的卡片样式
  • 表单元素：覆盖输入框、提交按钮、忘记密码链接、注册跳转链接的字体、颜色、hover交互效果，匹配示例的视觉细节
• 托管静态资源
  把编写好的HTML文件、CSS文件、图片资源全部托管到支持CORS配置的静态存储服务中，配置CORS规则允许你的Azure AD B2C租户域名访问这些静态资源。
• 绑定自定义页面到B2C身份验证流程
  • 如果你使用用户流配置：进入对应要修改的用户流设置页，找到「页面布局」选项，开启自定义页面内容开关，将你托管的HTML文件地址填入登录页对应的「自定义页面URI」字段即可
  • 如果你使用自定义策略配置：修改策略文件中的ContentDefinition节点，将登录页对应的LoadUri属性值替换为你的HTML托管地址
• 调试优化样式
  访问登录页测试加载效果，使用浏览器开发者工具定位B2C自动注入的元素类名，微调CSS选择器和属性值，直到样式完全匹配示例效果即可。

注意：你无需自行编写登录验证、账户跳转等交互逻辑，所有业务逻辑都会由Azure AD B2C自动注入到#api容器中，你仅需要完成布局搭建和样式覆盖即可。

内容的提问来源于stack exchange，提问作者Prateek Goyal