Merge pull request #89482 from mmacy/b2c-feature-consumer-templates

[b2c] page layout GA

Author: garycentric

articles/active-directory-b2c/active-directory-b2c-reference-disable-ev.md

@@ -1,34 +1,36 @@
 ---
-title: Disable email verification during consumer sign-up in Azure Active Directory B2C | Microsoft Docs
-description: A topic demonstrating how to disable email verification during consumer sign-up in Azure Active Directory B2C.
+title: Disable email verification during customer sign-up in Azure Active Directory B2C
+description: Learn how to disable email verification during customer sign-up in Azure Active Directory B2C.
 services: active-directory-b2c
 author: mmacy
 manager: celestedg
 
 ms.service: active-directory
 ms.workload: identity
 ms.topic: conceptual
-ms.date: 11/30/2018
+ms.date: 09/25/2018
 ms.author: marsma
 ms.subservice: B2C
 ---
 
-# Disable email verification during consumer sign-up in Azure Active Directory B2C
-When enabled, Azure Active Directory B2C (Azure AD B2C) gives a consumer the ability to sign up for applications by providing an email address and creating a local account. Azure AD B2C ensures valid email addresses by requiring consumers to verify them during the sign-up process. It also prevents a malicious automated process from generating fake accounts for the applications.
+# Disable email verification during customer sign-up in Azure Active Directory B2C
 
-Some application developers prefer to skip email verification during the sign-up process and instead have consumers verify the email address later. To support this, Azure AD B2C can be configured to disable email verification. Doing so creates a smoother sign-up process and gives developers the flexibility to differentiate the consumers that have verified their email address from those consumers that have not.
+By default, Azure Active Directory B2C (Azure AD B2C) verifies your customer's email address for local accounts (accounts for users who sign up with email address or username). Azure AD B2C ensures valid email addresses by requiring customers to verify them during the sign-up process. It also prevents a malicious actors from using automated processes to generate fraudulent accounts in your applications.
 
-By default, sign-up user flows have email verification turned on. Use the following steps to turn it off:
+Some application developers prefer to skip email verification during the sign-up process and instead have customers verify their email address later. To support this, Azure AD B2C can be configured to disable email verification. Doing so creates a smoother sign-up process and gives developers the flexibility to differentiate customers that have verified their email address from customers that have not.
 
-1. Click **User flows**.
-2. Click your user flow (for example, "B2C_1_SiUp") to open it.
-3. Click **Page layouts**.
-4. Click **Local account sign-up page**.
-5. Click **Email Address** in the **Name** column under the **User attributes** section.
-6. Under **Requires verification**, select **No**.
-7. Click **Save** at the top of the blade. You're done!
+Follow these steps to disable email verification:
 
-> [!NOTE]
-> Disabling email verification in the sign-up process may lead to spam. If you disable the default one, we recommend adding your own verification system.
->
->
+1. Sign in to the [Azure portal](https://portal.azure.com)
+1. Use the **Directory + subscription** filter in the top menu to select the directory that contains your Azure AD B2C tenant.
+1. In the left menu, select **Azure AD B2C**. Or, select **All services** and search for and select **Azure AD B2C**.
+1. Select **User flows**.
+1. Select the user flow for which you want to disable email verification. For example, *B2C_1_signinsignup*.
+1. Select **Page layouts**.
+1. Select **Local account sign-up page**.
+1. Under **User attributes**, select **Email Address**.
+1. In the **REQUIRES VERIFICATION** drop down, select **No**.
+1. Select **Save**. Email verification is now disabled for this user flow.
+
+> [!WARNING]
+> Disabling email verification in the sign-up process may lead to spam. If you disable the default Azure AD B2C-provided email verification, we recommend that you implement a replacement verification system.

articles/active-directory-b2c/customize-ui-overview.md

@@ -1,66 +1,90 @@
 ---
-title: About user interface customization in Azure Active Directory B2C | Microsoft Docs
-description: Learn about how to customize the user interface for your applications that use Azure Active Directory B2C.
+title: Customize the user interface in Azure Active Directory B2C
+description: Learn how to customize the user interface for your applications that use Azure Active Directory B2C.
 services: active-directory-b2c
 author: mmacy
 manager: celestedg
 
 ms.service: active-directory
 ms.workload: identity
 ms.topic: conceptual
-ms.date: 09/11/2019
+ms.date: 09/25/2019
 ms.author: marsma
 ms.subservice: B2C
 ---
 
-# About user interface customization in Azure Active Directory B2C
+# Customize the user interface in Azure Active Directory B2C
 
-The ability for you to brand and customize the user interface (UI) that Azure Active Directory B2C (Azure AD B2C) serves to your applications is important for providing a seamless experience to your customer. These experiences include sign-up, sign-in, profile editing, and password resetting. This article provides information to help you customize the UI of your applications.
+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. This article introduces the methods of user interface (UI) customization for both user flows and custom policies.
 
-Depending on your needs when it comes to these experiences, you customize the UI of your application in different ways. For example:
+## UI customization in different scenarios
 
-- If you're using [user flows](active-directory-b2c-reference-policies.md) to provide sign-up or sign-in, password reset, or profile-editing experiences in your application, you use the [Azure portal to customize the UI](tutorial-customize-ui.md).
-- If you’re using a v2 user flow, you can use a [page layout template](#page-layout-templates) to change the look of your user flow pages without further customization. For example, you can apply an Ocean Blue or Slate Gray theme to all pages in your user flow.
-- If you're providing sign-in only, its accompanying password reset page, and verification emails, you use the same customization steps that are used for an [Azure AD sign-in page](../active-directory/fundamentals/customize-branding.md).
-- If customers try to edit their profile before they sign in, they are redirected to a page that you customize using the same steps that are used for customizing the Azure AD sign-in page.
-- 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, you use [policy files to customize the UI](active-directory-b2c-ui-customization-custom.md).
-- If you need to provide dynamic content based on a customer’s decision, you 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.
-- You can enable JavaScript client-side code in your Azure AD B2C [user flows](user-flow-javascript-overview.md) or [custom policies](page-layout.md).
+There are several ways to customize the UI of the user experiences your application, each appropriate for different scenarios.
 
-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.
+### User flows
 
-When using your own HTML and CSS files to customize the UI, review the following guidance before you start:
+If you use [user flows](active-directory-b2c-reference-policies.md), 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 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.
-- JavaScript can now be included in your custom content.
-- Supported browser versions are:
-    - Internet Explorer 11, 10 and Microsoft Edge
-    - Limited support for Internet Explorer 9 and 8
-    - Google Chrome 42.0 and above
-    - Mozilla Firefox 38.0 and above
-- 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.
+You use the [Azure portal](tutorial-customize-ui.md) to configure the UI customization for user flows.
+
+### Custom policies
+
+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).
+
+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, 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.
+
+### JavaScript
+
+You can enable client-side JavaScript code in both [user flows](user-flow-javascript-overview.md) and [custom policies](page-layout.md).
+
+### Sign in-only UI customization
+
+If you're providing sign-in only, along with its accompanying password reset page and verification emails, use the same customization steps that are used for an [Azure AD sign-in page](../active-directory/fundamentals/customize-branding.md).
+
+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.
 
 ## Page layout templates
 
-For v2 user flows, you can choose a pre-designed template that gives your default pages a better look and serves as a good basis for your own customization.
+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.
 
-In the left menu, under **Customize**, select **Page layouts**. Then select **Template (Preview)**.
+Under **Customize** in the left menu, select **Page layouts** and then select **Template**.
 
-![Template selection drop-down in user flow page of Azure portal](media/customize-ui-overview/template.png)
+![Template selection drop-down in user flow page of Azure portal](media/customize-ui-overview/template-selection.png)
 
-Select a template from the list. For example, the **Ocean Blue** template applies the following layout to your user flow pages:
+Next, select a template from the list. Here are examples of the sign-in pages for each template:
 
-![Example of the Ocean Blue template rendered on sign up sign in page](media/customize-ui-overview/ocean-blue.png)
+| Ocean Blue | Slate Gray | Classic |
+|:-:|:-:|:-:|
+|![Example of the Ocean Blue template rendered on sign up sign in page](media/customize-ui-overview/template-ocean-blue.png)|![Example of the Slate Gray template rendered on sign up sign in page](media/customize-ui-overview/template-slate-gray.png)|![Example of the Classic template rendered on sign up sign in page](media/customize-ui-overview/template-classic.png)|
 
 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.
 
-## Where do I store UI content?
+## Custom HTML and CSS
+
+Azure AD B2C runs code in your customer's browser by using an 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 your user flow or custom policy. Each page in the user experience loads its content from the 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.
+
+Review the following guidance before using your own HTML and CSS files to customize the UI:
+
+- 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.
+- **JavaScript** can be included in your custom content for both [user flows](user-flow-javascript-overview.md) and [custom policies](javascript-samples.md).
+- Supported **browser versions** are:
+  - Internet Explorer 11, 10, and Microsoft Edge
+  - Limited support for Internet Explorer 9 and 8
+  - Google Chrome 42.0 and above
+  - Mozilla Firefox 38.0 and above
+- Don't include **form tags** in your HTML. Form tags interfere with the POST operations generated by the HTML injected by Azure AD B2C.
 
-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.
+### Where do I store UI content?
 
-## How do I get started?
+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. For example, [Azure Blob storage](../storage/blobs/storage-blobs-introduction.md), web servers, CDNs, AWS S3, or file sharing systems.
 
-You do the following to customize the UI:
+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.
+
+## Get started with custom HTML and CSS
+
+Get started using your own HTML and CSS in your user experience pages by following these guidelines.
 
 - Create well-formed HTML content with an empty `<div id="api"></div>` element located somewhere in the `<body>`. This element marks where the Azure AD B2C content is inserted. The following example shows a minimal page:
 
@@ -78,7 +102,6 @@ You do the following to customize the UI:
     </html>
     ```
 
-- Host your content on an HTTPS endpoint (with CORS allowed). Both GET and OPTIONS request methods must be enabled when configuring CORS.
 - Use CSS to style the UI elements that Azure AD B2C inserts into your page. The following example shows a simple CSS file that also includes settings for the sign-up injected HTML elements:
 
     ```css
@@ -104,29 +127,45 @@ You do the following to customize the UI:
     }
     ```
 
-- Create or edit a policy to use the content that you created.
+- Host your content on an HTTPS endpoint (with CORS allowed). 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.
+
+### HTML fragments from Azure AD B2C
 
 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 | 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 such as Facebook, Google, or local accounts (based on email address or user name). |
 | 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 such as Facebook or Google. It’s used when additional information must be collected from the customer using a sign-up form. |
+| Social account sign-up | May appear when signing up using an existing account from a social identity provider such as Facebook or Google. 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 such as Facebook, Google, or local accounts. |
 | 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. |
 
-
-## How do I localize content?
+## Localize content
 
 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.
 
-Content can be pulled from different places based on the locale that's used. In your CORS-enabled endpoint, you set up a folder structure to host content for specific languages. You'll call the right one if you use the wildcard value {Culture:RFC5646}. For example, your custom page URI might look like `https://contoso.blob.core.windows.net/{Culture:RFC5646}/myHTML/unified.html`. You can load the page in French by pulling content from `https://contoso.blob.core.windows.net/fr/myHTML/unified.html`
+Content can be pulled from different places based on the locale that's used. In your CORS-enabled endpoint, you set up a folder structure to host content for specific languages. You'll call the right one if you use the wildcard value `{Culture:RFC5646}`.
+
+For example, your custom page URI might look like:
+
+```HTTP
+https://contoso.blob.core.windows.net/{Culture:RFC5646}/myHTML/unified.html
+```
+
+You can load the page in French by pulling content from:
+
+```HTTP
+https://contoso.blob.core.windows.net/fr/myHTML/unified.html
+```
 
 ## Examples
 
-For customization examples, download and review these [sample template files](https://github.com/azureadquickstarts/b2c-azureblobstorage-client/archive/master.zip).
+You can find several sample template files in the [B2C-AzureBlobStorage-Client](https://github.com/azureadquickstarts/b2c-azureblobstorage-client) repository on GitHub.
+
+The sample HTML and CSS files in the templates are located in the [/sample_templates](https://github.com/AzureADQuickStarts/B2C-AzureBlobStorage-Client/tree/master/sample_templates) directory.
 
 ## Next steps