自定义 Azure Active Directory B2C 中的用户界面Customize the user interface in Azure Active Directory B2C

对 Azure Active Directory B2C (Azure AD B2C) 向客户显示的用户界面进行品牌设计和自定义有助于在应用程序中提供无缝的用户体验。Branding and customizing the user interface that Azure Active Directory B2C (Azure AD B2C) displays to your customers helps provide a seamless user experience in your application. 这些体验包括注册、登录、个人资料编辑和密码重置。These experiences include signing up, signing in, profile editing, and password resetting. 本文介绍用户流和自定义策略的用户界面 (UI) 自定义方法。This article introduces the methods of user interface (UI) customization for both user flows and custom policies.

不同方案中的 UI 自定义UI customization in different scenarios

可通过多种方式自定义用户在应用程序中体验到的 UI,每种方法适用于不同的方案。There are several ways to customize the UI of the user experiences your application, each appropriate for different scenarios.

用户流User flows

如果使用用户流,可以使用内置的页面布局模板或自己的 HTML 和 CSS 来更改用户流页面的外观。If you use user flows, you can change the look of your user flow pages by using built-in page layout templates, or by using your own HTML and CSS. 本文稍后会介绍这两种方法。Both methods are discussed later in this article.

使用 Azure 门户配置用户流的 UI 自定义。You use the Azure portal to configure the UI customization for user flows.

提示

如果只想修改用户流页的横幅徽标、背景图像和背景色,可以试用本文稍后介绍的公司品牌(预览) 功能。If you want to modify only the banner logo, background image, and background color of your user flow pages, you can try the Company branding (preview) feature described later in this article.

自定义策略Custom policies

如果使用自定义策略在应用程序中提供注册或登录、密码重置或个人资料编辑,则可使用策略文件来自定义 UI。If you're using custom policies to provide sign-up or sign-in, password reset, or profile-editing in your application, use policy files to customize the UI.

如果需要根据客户的决策提供动态内容,可以使用可根据查询字符串中发送的参数动态更改页面内容的自定义策略。If you need to provide dynamic content based on a customer's decision, use custom policies that can change page content dynamically depending on a parameter that's sent in a query string. 例如,可以基于从 Web 或移动应用程序传递的参数,更改 Azure AD B2C 注册或登录页面上的背景图像。For example, you can change the background image on the Azure AD B2C sign-up or sign-in page based on a parameter that you pass from your web or mobile application.

JavascriptJavaScript

可以在用户流自定义策略中启用客户端 JavaScript 代码。You can enable client-side JavaScript code in both user flows and custom policies.

页面布局模板Page layout templates

用户流提供多个可供选择的内置模板,以便为用户体验页面提供专业的外观。User flows provide several built-in templates you can choose from to give your user experience pages a professional look. 这些布局模板还可充当你自己的自定义操作的起点。These layout templates can also and serve as starting point for your own customization.

在左侧菜单中的“自定义”下选择“页面布局”,然后选择“模板”。 Under Customize in the left menu, select Page layouts and then select Template.

Azure 门户的用户流页中的模板选择下拉列表

接下来,从列表中选择一个模板。Next, select a template from the list. 下面是每个模板的登录页面示例:Here are examples of the sign-in pages for each template:

海蓝Ocean Blue 青灰Slate Gray 经典Classic
注册登录页上呈现的“海蓝”模板的示例 注册登录页面上呈现的“青灰”模板示例 注册登录页面上呈现的“经典”模板示例

选择某个模板时,选定的布局将应用于用户流中的所有页面,并且每个页面的 URI 将显示在“自定义页面 URI”字段中。When you choose a template, the selected layout is applied to all pages in your user flow, and the URI for each page is visible in the Custom page URI field.

自定义 HTML 和 CSSCustom HTML and CSS

如果希望使用自定义的 HTML 和 CSS 设计自己的策略布局,则可以通过针对策略中存在的每个布局名称切换“使用自定义页面内容”开关来实现。If you wish to design your own policy layout with your customized HTML and CSS, you can do so by switching the "Use custom page content" toggle for each of the Layout names present in your policy. 请按照以下有关自定义布局配置的说明进行操作:Please follow the below instructions regarding the custom layout configurations:

Azure AD B2C 使用称作跨源资源共享 (CORS) 的方法在客户浏览器中运行代码。Azure AD B2C runs code in your customer's browser by using an approach called Cross-Origin Resource Sharing (CORS).

在运行时,将从用户流或自定义策略中指定的 URL 加载内容。At runtime, content is loaded from a URL that you specify in your user flow or custom policy. 用户体验中的每个页面从你为该页面指定的 URL 加载其内容。Each page in the user experience loads its content from the URL you specify for that page. 从 URL 加载内容后,该内容将与 Azure AD B2C 插入的 HTML 片段合并,然后向客户显示页面。After content is loaded from your URL, it's merged with an HTML fragment inserted by Azure AD B2C, and then the page is displayed to your customer.

在使用自己的 HTML 和 CSS 文件自定义 UI 之前,请查看以下指导:Review the following guidance before using your own HTML and CSS files to customize the UI:

  • Azure AD B2C 将 HTML 内容合并到页面中。Azure AD B2C merges HTML content into your pages. 请勿复制并尝试更改 Azure AD B2C 提供的默认内容。Don't copy and try to change the default content that Azure AD B2C provides. 最好从头开始构建 HTML5 内容,将默认内容用作参考。It's best to build your HTML content from scratch and use the default content as reference.
  • 可将 JavaScript 包含在用户流自定义策略的自定义内容中。JavaScript can be included in your custom content for both user flows and custom policies.
  • 支持的浏览器版本包括:Supported browser versions are:
    • Internet Explorer 11、10 和 Microsoft EdgeInternet Explorer 11, 10, and Microsoft Edge
    • 对 Internet Explorer 9 和 8 的支持有限Limited support for Internet Explorer 9 and 8
    • Google Chrome 42.0 和更高版本Google Chrome 42.0 and above
    • Mozilla Firefox 38.0 和更高版本Mozilla Firefox 38.0 and above
    • 适用于 iOS 和 macOS 的 Safari 版本 12 及更高版本Safari for iOS and macOS, version 12 and above
  • 不要在 HTML 中包含窗体标记Don't include form tags in your HTML. 窗体标记会干扰 Azure AD B2C 插入的 HTML 所生成的 POST 操作。Form tags interfere with the POST operations generated by the HTML injected by Azure AD B2C.

在何处存储 UI 内容?Where do I store UI content?

使用自己的 HTML 和 CSS 文件自定义 UI 时,可将 UI 内容托管在支持 CORS 的任何公用 HTTPS 终结点上。When using your own HTML and CSS files to customize the UI, you can host your UI content on any publicly available HTTPS endpoint that supports CORS. 例如,Azure Blob 存储、Web 服务器、CDN、AWS S3 或文件共享系统。For example, Azure Blob storage, web servers, CDNs, AWS S3, or file sharing systems.

重要的一点是,你将内容托管在一个启用了 CORS 且公开可用的 HTTPS 终结点上。The important point is that you host the content on a publicly available HTTPS endpoint with CORS enabled. 在内容中指定绝对 URL 时,必须使用绝对 URL。You must use an absolute URL when you specify it in your content.

自定义 HTML 和 CSS 入门Get started with custom HTML and CSS

请遵循以下指导原则在用户体验页面中开始使用自己的 HTML 和 CSS。Get started using your own HTML and CSS in your user experience pages by following these guidelines.

  • 使用位于 <body> 中某处的空 <div id="api"></div> 元素创建格式正确的 HTML 内容。Create well-formed HTML content with an empty <div id="api"></div> element located somewhere in the <body>. 此元素标记插入 Azure AD B2C 内容的位置。This element marks where the Azure AD B2C content is inserted. 以下示例显示了一个最小化页面:The following example shows a minimal page:

    <!DOCTYPE html>
    <html>
      <head>
        <title>!Add your title here!</title>
        <link rel="stylesheet" href="https://mystore1.blob.core.chinacloudapi.cn/b2c/style.css">
      </head>
      <body>
        <h1>My B2C Application</h1>
        <div id="api"></div>   <!-- Leave this element empty because Azure AD B2C will insert content here. -->
      </body>
    </html>
    
  • 使用 CSS 设置 Azure AD B2C 插入页面的 UI 元素的样式。Use CSS to style the UI elements that Azure AD B2C inserts into your page. 以下示例显示了一个简单的 CSS 文件,其中还包含注册注入 HTML 元素的设置:The following example shows a simple CSS file that also includes settings for the sign-up injected HTML elements:

    h1 {
      color: blue;
      text-align: center;
    }
    .intro h2 {
      text-align: center;
    }
    .entry {
      width: 400px ;
      margin-left: auto ;
      margin-right: auto ;
    }
    .divider h2 {
      text-align: center;
    }
    .create {
      width: 400px ;
      margin-left: auto ;
      margin-right: auto ;
    }
    
  • 在 HTTPS 终结点上托管内容(允许 CORS)。Host your content on an HTTPS endpoint (with CORS allowed). 配置 CORS 时必须启用 GET 和 OPTIONS 请求方法。Both GET and OPTIONS request methods must be enabled when configuring CORS.

  • 创建或编辑用户流或自定义策略,以使用创建的内容。Create or edit a user flow or custom policy to use the content that you created.

Azure AD B2C 中的 HTML 片段HTML fragments from Azure AD B2C

下表列出了 Azure AD B2C 合并到内容中 <div id="api"></div> 元素的 HTML 片段。The following table lists the HTML fragments that Azure AD B2C merges into the <div id="api"></div> element located in your content.

插入的页Inserted page HTML 说明Description of HTML
标识提供者选项Identity provider selection 包含标识提供者的按钮列表,客户可在注册或登录时选择这些按钮。Contains a list of buttons for identity providers that the customer can choose from during sign-up or sign-in. 这些按钮包括社交标识提供者。These buttons include social identity providers.
本地帐户注册Local account sign-up 包含一个窗体,用于基于电子邮件地址或用户名的本地帐户注册。Contains a form for local account sign-up based on an email address or a user name. 该窗体可以包含不同的输入控件,如文本输入框、密码输入框、单选按钮、单选下拉框和多选复选框。The form can contain different input controls such as text input box, password entry box, radio button, single-select drop-down boxes, and multi-select check boxes.
社交帐户注册Social account sign-up 使用社交标识提供者的现有帐户进行注册时,可能会显示此页面。May appear when signing up using an existing account from a social identity provider. 在必须使用注册表单收集客户的其他信息时使用此页面。It's used when additional information must be collected from the customer using a sign-up form.
统一注册或登录Unified sign-up or sign-in 处理可以使用社交标识提供者的客户的注册和登录。Handles both sign-up and sign-in of customers who can use social identity providers.
多重身份验证Multi-factor authentication 用户可以在注册或登录期间(使用文字或语音)验证其电话号码。Customers can verify their phone numbers (using text or voice) during sign-up or sign-in.
错误Error 向客户提供错误信息。Provides error information to the customer.

本地化内容Localize content

可通过在 Azure AD B2C 租户中启用语言自定义来本地化 HTML 内容。You localize your HTML content by enabling language customization in your Azure AD B2C tenant. 启用此功能可让 Azure AD B2C 将 OpenID Connect 参数 ui_locales 转发到终结点。Enabling this feature allows Azure AD B2C to forward the OpenID Connect parameter ui_locales to your endpoint. 内容服务器可使用此参数提供特定语言的 HTML 页。Your content server can use this parameter to provide language-specific HTML pages.

可以基于所用的区域设置从不同位置拉取内容。Content can be pulled from different places based on the locale that's used. 在已启用 CORS 的终结点中,可以设置文件夹结构以托管特定语言的内容。In your CORS-enabled endpoint, you set up a folder structure to host content for specific languages. 如果使用通配符值 {Culture:RFC5646},则会调用正确的语言。You'll call the right one if you use the wildcard value {Culture:RFC5646}.

例如,自定义的页面 URI 可能类似于以下内容:For example, your custom page URI might look like:

https://contoso.blob.core.chinacloudapi.cn/{Culture:RFC5646}/myHTML/unified.html

可以通过从以下位置提取内容来加载法语页面:You can load the page in French by pulling content from:

https://contoso.blob.core.chinacloudapi.cn/fr/myHTML/unified.html

示例Examples

可以在 GitHub 上的 B2C-AzureBlobStorage-Client 存储库中找到多个示例模板文件。You can find several sample template files in the B2C-AzureBlobStorage-Client repository on GitHub.

模板中的示例 HTML 和 CSS 文件位于 /sample_templates 目录中。The sample HTML and CSS files in the templates are located in the /sample_templates directory.

后续步骤Next steps