教程:在 Azure Active Directory B2C 中自定义用户界面体验Tutorial: Customize the interface of user experiences in Azure Active Directory B2C

对于更常见的用户体验,例如注册、登录和配置文件编辑,可在 Azure Active Directory B2C (Azure AD B2C) 中使用用户流For more common user experiences, such as sign-up, sign-in, and profile editing, you can use user flows in Azure Active Directory B2C (Azure AD B2C). 本教程中的信息有助于了解如何使用自己的 HTML 和 CSS 文件自定义用户界面 (UI)The information in this tutorial helps you to learn how to customize the user interface (UI) of these experiences using your own HTML and CSS files.

在本文中,学习如何:In this article, you learn how to:

  • 创建 UI 自定义文件Create UI customization files
  • 更新用户流以使用文件Update the user flow to use the files
  • 测试自定义 UITest the customized UI

如果没有 Azure 订阅,可在开始前创建一个试用帐户If you don't have an Azure subscription, create a Trial before you begin.

先决条件Prerequisites

创建用户流,以便用户能够注册并登录应用程序。Create a user flow to enable users to sign up and sign in to your application.

创建自定义文件Create customization files

创建 Azure 存储帐户和容器,然后将基本 HTML 和 CSS 文件放在容器中。You create an Azure storage account and container and then place basic HTML and CSS files in the container.

创建存储帐户Create a storage account

虽然可以通过多种方式存储文件,但在本教程中,可以将其存储在 Azure Blob 存储中。Although you can store your files in many ways, for this tutorial, you store them in Azure Blob storage.

  1. 登录到 Azure 门户Sign in to the Azure portal.
  2. 请确保使用的是包含 Azure 订阅的目录。Make sure you're using the directory that contains your Azure subscription. 选择顶部菜单中的“目录 + 订阅”筛选器,然后选择包含订阅的目录。Select the Directory + subscription filter in the top menu and choose the directory that contains your subscription. 此目录与包含 Azure B2C 租户的目录不同。This directory is different than the one that contains your Azure B2C tenant.
  3. 选择 Azure 门户左上角的“所有服务”,搜索并选择“存储帐户”。Choose All services in the top-left corner of the Azure portal, search for and select Storage accounts.
  4. 选择“添加” 。Select Add.
  5. 在“资源组”下,选择“新建”,输入新资源组的名称,然后单击“确定” 。Under Resource group, select Create new, enter a name for the new resource group, and then click OK.
  6. 输入存储帐户的名称。Enter a name for the storage account. 所选名称在 Azure 中需唯一,且必须为 3 到 24 个字符,并且只能包含数字和小写字母。The name you choose must be unique across Azure, must be between 3 and 24 characters in length, and may contain numbers and lowercase letters only.
  7. 选择存储帐户的位置或接受默认位置。Select the location of the storage account or accept the default location.
  8. 接受所有其他默认值,选择“查看 + 创建”,然后点击“创建” 。Accept all other default values, select Review + create, and then click Create.
  9. 创建存储帐户后,选择“转到资源”。After the storage account is created, select Go to resource.

创建容器Create a container

  1. 在存储帐户的概述页面上,选择“Blob”。On the overview page of the storage account, select Blobs.
  2. 选择“容器”,输入容器的名称,选择“Blob(仅限 Blob 的匿名读取访问)”,然后单击“确定” 。Select Container, enter a name for the container, choose Blob (anonymous read access for blobs only), and then click OK.

启用 CORSEnable CORS

浏览器中的 Azure AD B2C 代码使用新式标准方法从用户流中指定的 URL 加载自定义内容。Azure AD B2C code in a browser uses a modern and standard approach to load custom content from a URL that you specify in a user flow. 跨源资源共享 (CORS) 允许从其他域请求网页上的受限资源。Cross-origin resource sharing (CORS) allows restricted resources on a web page to be requested from other domains.

  1. 在菜单中,选择“CORS”。In the menu, select CORS.

  2. 对于“允许的源”,请输入 https://your-tenant-name.b2clogin.cnFor Allowed origins, enter https://your-tenant-name.b2clogin.cn. your-tenant-name 替换为 Azure AD B2C 租户的名称。Replace your-tenant-name with the name of your Azure AD B2C tenant. 例如,https://fabrikam.b2clogin.cnFor example, https://fabrikam.b2clogin.cn. 输入租户名称时,需要使用全小写字母。You need to use all lowercase letters when entering your tenant name.

  3. 对于允许的方法,请选择 GETPUTOPTIONSFor Allowed Methods, select GET,PUT, and OPTIONS.

  4. 对于“允许的标头”,请输入一个星号 (*)。For Allowed Headers, enter an asterisk (*).

  5. 对于“公开的标头”,请输入一个星号 (*)。For Exposed Headers, enter an asterisk (*).

  6. 对于“最大期限”,请输入 200。For Max age, enter 200.

    Azure 门户的 Azure Blob 存储中的 CORS 配置页

  7. 单击“保存” 。Click Save.

创建自定义文件Create the customization files

若要自定义注册体验的 UI,首先要创建一个简单的 HTML 和 CSS 文件。To customize the UI of the sign-up experience, you start by creating a simple HTML and CSS file. 可以根据需要配置 HTML,但其中必须具有“div”元素,其标识符为 apiYou can configure your HTML any way you want, but it must have a div element with an identifier of api. 例如,<div id="api"></div>For example, <div id="api"></div>. 显示页面时,Azure AD B2C 会将元素注入 api 容器。Azure AD B2C injects elements into the api container when the page is displayed.

  1. 在本地文件夹中,创建以下文件,并确保将 your-storage-account 更改为存储帐户的名称,并将 your-container 更改为所创建容器的名称。In a local folder, create the following file and make sure that you change your-storage-account to the name of the storage account and your-container to the name of the container that you created. 例如,https://store1.blob.core.chinacloudapi.cn/b2c/style.cssFor example, https://store1.blob.core.chinacloudapi.cn/b2c/style.css.

    <!DOCTYPE html>
    <html>
      <head>
        <title>My B2C Application</title>
        <link rel="stylesheet" href="https://your-storage-account.blob.core.chinacloudapi.cn/your-container/style.css">
      </head>
      <body>
        <h1>My B2C Application</h1>
        <div id="api"></div>
      </body>
    </html>
    

    可以根据需要设计页面,但是所创建的任何 HTML 自定义文件都需要“api”div 元素。The page can be designed any way that you want, but the api div element is required for any HTML customization file that you create.

  2. 将文件另存为“custom-ui.html”。Save the file as custom-ui.html.

  3. 创建以下简单的 CSS,将所有元素集中在注册或登录页面上,包括 Azure AD B2C 注入的元素。Create the following simple CSS that centers all elements on the sign-up or sign-in page including the elements that Azure AD B2C injects.

    h1 {
      color: blue;
      text-align: center;
    }
    .intro h2 {
      text-align: center;
    }
    .entry {
      width: 300px ;
      margin-left: auto ;
      margin-right: auto ;
    }
    .divider h2 {
      text-align: center;
    }
    .create {
      width: 300px ;
      margin-left: auto ;
      margin-right: auto ;
    }
    
  4. 将文件另存为“style.css”。Save the file as style.css.

上传自定义文件Upload the customization files

本教程会在存储帐户中存储所创建的文件,以便 Azure AD B2C 对其进行访问。In this tutorial, you store the files that you created in the storage account so that Azure AD B2C can access them.

  1. 选择 Azure 门户左上角的“所有服务”,搜索并选择“存储帐户” 。Choose All services in the top-left corner of the Azure portal, search for and select Storage accounts.

  2. 选择创建的存储帐户,选择“Blob”,然后选择创建的容器。Select the storage account you created, select Blobs, and then select the container that you created.

  3. 选择“上传”,导航到“custom-ui.html”文件并选择该文件,然后点击“上传”。Select Upload, navigate to and select the custom-ui.html file, and then click Upload.

    门户中突出显示了“上传”按钮和文件的“上传 blob”页

  4. 复制所上传文件的 URL,以便稍后在本教程中使用。Copy the URL for the file that you uploaded to use later in the tutorial.

  5. 对“style.css”文件重复步骤 3 和 4。Repeat step 3 and 4 for the style.css file.

更新用户流Update the user flow

  1. 选择 Azure 门户左上角的“所有服务”,然后搜索并选择“Azure AD B2C” 。Choose All services in the top-left corner of the Azure portal, and then search for and select Azure AD B2C.
  2. 选择“用户流”,然后选择“B2C_1_signupsignin1”用户流。Select User flows, and then select the B2C_1_signupsignin1 user flow.
  3. 选择“页面布局”,然后在“统一注册或登录页面”下,对“使用自定义页面内容”单击“是” 。Select Page layouts, and then under Unified sign-up or sign-in page, click Yes for Use custom page content.
  4. 在“自定义页面 URI”中,输入之前记录的“custom-ui.html”文件的 URI。In Custom page URI, enter the URI for the custom-ui.html file that you recorded earlier.
  5. 在页面顶部,选择“保存”。At the top of the page, select Save.

测试用户流Test the user flow

  1. 在 Azure AD B2C 租户中选择“用户流”,然后选择“B2C_1_signupsignin1”用户流。In your Azure AD B2C tenant, select User flows and select the B2C_1_signupsignin1 user flow.

  2. 在该页顶部,单击“运行用户流”。At the top of the page, click Run user flow.

  3. 单击“运行用户流”按钮。Click the Run user flow button.

    注册或登录用户流的“运行用户流”页

    应该会看到类似于以下示例的页面,其中元素基于所创建的 CSS 文件集中在一起:You should see a page similar to the following example with the elements centered based on the CSS file that you created:

    显示带有自定义 UI 元素的注册或登录页的 Web 浏览器

后续步骤Next steps

本文介绍了如何执行以下操作:In this article, you learned how to:

  • 创建 UI 自定义文件Create UI customization files
  • 更新用户流以使用文件Update the user flow to use the files
  • 测试自定义 UITest the customized UI