You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/active-directory-b2c/customize-ui-overview.md
+21-22Lines changed: 21 additions & 22 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,11 +15,11 @@ ms.subservice: B2C
15
15
16
16
# Customize the user flow user interface in Azure Active Directory B2C
17
17
18
-
Branding and customizing the user interface that Azure Active Directory B2C (Azure AD B2C) shows to your customers helps provide a seamless user experience in your applications. These experiences include sign-up, sign-in, profile editing, and password resetting. This article provides information to help you customize the user interface (UI) of your user flows.
18
+
Branding and customizing the user interface that Azure Active Directory B2C (Azure AD B2C) shows to your customers helps provide a seamless user experience in your application. These experiences include signing up, signing in, profile editing, and password resetting. This article provides information to help you customize the user interface (UI) of your user flows.
19
19
20
-
## Customization in different scenarios
20
+
## UI customization in different scenarios
21
21
22
-
There are several ways to customize the UI of your application, each of which are appropriate for different scenarios.
22
+
There are several ways to customize the UI of the user experiences your application, each appropriate for different scenarios.
23
23
24
24
### User flows
25
25
@@ -31,7 +31,7 @@ You use the [Azure portal](tutorial-customize-ui.md) to configure the UI customi
31
31
32
32
If you're using [custom policies](active-directory-b2c-overview-custom.md) to provide sign-up or sign-in, password reset, or profile-editing in your application, use [policy files to customize the UI](active-directory-b2c-ui-customization-custom.md).
33
33
34
-
If you need to provide dynamic content based on a customer's decision, use [custom policies that can change page content](active-directory-b2c-ui-customization-custom-dynamic.md) depending on a parameter that's sent in a query string. For example, the background image on the Azure AD B2C sign-up or sign-in page changes, based on a parameter that you pass from your web or mobile application.
34
+
If you need to provide dynamic content based on a customer's decision, use custom policies that can [change page content dynamically](active-directory-b2c-ui-customization-custom-dynamic.md) depending on a parameter that's sent in a query string. For example, the background image on the Azure AD B2C sign-up or sign-in page changes, based on a parameter that you pass from your web or mobile application.
35
35
36
36
### JavaScript
37
37
@@ -43,24 +43,9 @@ If you're providing sign-in only, along with its accompanying password reset pag
43
43
44
44
If customers try to edit their profile before signing in, they're redirected to a page that you customize by using the same steps that are used for customizing the Azure AD sign-in page.
45
45
46
-
## How UI customization works
47
-
48
-
Azure AD B2C runs code in your customer's browser and uses a modern approach called [Cross-Origin Resource Sharing (CORS)](https://www.w3.org/TR/cors/). At run-time, content is loaded from a URL that you specify in a user flow or policy. You specify different URLs for different pages. After content is loaded from your URL, it's merged with an HTML fragment inserted from Azure AD B2C, and then displayed to your customer.
49
-
50
-
When using your own HTML and CSS files to customize the UI, review the following guidance before you start:
51
-
52
-
- Azure AD B2C merges HTML content into your pages. Don't copy and try to change the default content that Azure AD B2C provides. It's best to build your HTML content from scratch and use the default content as reference.
53
-
- JavaScript can now be included in your custom content.
54
-
- Supported browser versions are:
55
-
- Internet Explorer 11, 10 and Microsoft Edge
56
-
- Limited support for Internet Explorer 9 and 8
57
-
- Google Chrome 42.0 and above
58
-
- Mozilla Firefox 38.0 and above
59
-
- Make sure that you don't include form tags in your HTML because it interferes with the POST operations generated by the injected HTML from Azure AD B2C.
60
-
61
46
## Page layout templates
62
47
63
-
User flows provide three built-in templates you can choose from that give your user experience pages a professional look. The can also and serve as starting point for your own customization.
48
+
User flows provide three 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.
64
49
65
50
In the left menu, under **Customize**, select **Page layouts**. Then select **Template (Preview)**.
66
51
@@ -72,7 +57,22 @@ Select a template from the list. For example, the **Ocean Blue** template applie
72
57
73
58
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.
74
59
75
-
## Where do I store UI content?
60
+
## Custom HTML and CSS
61
+
62
+
Azure AD B2C runs code in your customer's browser and uses a modern approach called [Cross-Origin Resource Sharing (CORS)](https://www.w3.org/TR/cors/). At runtime, content is loaded from a URL that you specify in a your user flow or custom policy. Each page in the user experience loads its content from a URL you specify for that page. 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.
63
+
64
+
Review the following guidance before using your own HTML and CSS files to customize the UI:
65
+
66
+
- Azure AD B2C merges HTML content into your pages. Don't copy and try to change the default content that Azure AD B2C provides. It's best to build your HTML content from scratch and use the default content as reference.
67
+
- JavaScript can now be included in your custom content.
68
+
- Supported browser versions are:
69
+
- Internet Explorer 11, 10 and Microsoft Edge
70
+
- Limited support for Internet Explorer 9 and 8
71
+
- Google Chrome 42.0 and above
72
+
- Mozilla Firefox 38.0 and above
73
+
- Make sure that you don't include form tags in your HTML because it interferes with the POST operations generated by the injected HTML from Azure AD B2C.
74
+
75
+
### Where do I store UI content?
76
76
77
77
When using your own HTML and CSS files to customize the UI, you can host your UI content anywhere, such as on [Azure Blob storage](../storage/blobs/storage-blobs-introduction.md), web servers, CDNs, AWS S3, or file sharing systems. The important point is that you host the content on a publicly available HTTPS endpoint with CORS enabled. You must use an absolute URL when you specify it in your content.
78
78
@@ -135,7 +135,6 @@ The following table lists the HTML fragments that Azure AD B2C merges into the `
135
135
| Multi-factor authentication | Customers can verify their phone numbers (using text or voice) during sign-up or sign-in. |
136
136
| Error | Provides error information to the customer. |
137
137
138
-
139
138
## How do I localize content?
140
139
141
140
You localize your HTML content by enabling [language customization](active-directory-b2c-reference-language-customization.md) in your Azure AD B2C tenant. Enabling this feature allows Azure AD B2C to forward the OpenID Connect parameter `ui-locales` to your endpoint. Your content server can use this parameter to provide language-specific HTML pages.
0 commit comments