1

for me it is not clear how i can achieve the order of the idp´s in azure ad b2c. In the documentation it is mentionend that the i can control the order of the idp´s by the policy:

When i look into the classic template it injects the social idp´s on top:

When i look into the AzureBlue template it is at the bottom:

Both templates are injected via:

When i change the order of idp´s in my policies nothing happens. But when i use the AzureBlue Template the social idp´s appearing on the bottom.

How can i reorder the social Idp´s without using AzureBlue template? I want to use my own template.

rubeonline
  • 1,230
  • 10
  • 18

2 Answers2

1

My Solution:

Set pageFlavor to oceanBlue by adding a content definition parameter to the template query string in the custom policy SignUpOrSignIn.xml:

<RelyingParty>
  ...
  <UserJourneyBehaviors>
    <ContentDefinitionParameters>
      <Parameter Name="pageFlavor">oceanBlue</Parameter>
    </ContentDefinitionParameters>
  </UserJourneyBehaviors>

How I arrived at this solution (after many hours)

The documentation you shared mentions:

Azure AD B2C settings can be read by calling window.SETTINGS, window.CONTENT objects,

In my experience, when using a custom policy for the unifiedssp contract, it automatically sets window.SETTINGS.config.pageFlavor to "classic".

This config setting (as with many others) are different when using ~tenant/templates/AzureBlue/unified.cshtml directly

In an update note on Page layout versions, Azure mentions in 2.1.1 under unifiedssp:

Added support for using policy or the QueryString parameter pageFlavor to select the layout (classic, oceanBlue, or slateGray).

This led me down quite the journey to figure before learning about content definition parameters.

Luckily, this solves a major issue with the "classic" page flavor placing the forgot password link before the password input.

WilliamPiotrowski
  • 11
  • 1
  • 1
0

When you using the azure blue template from the microsoft tenant (~tenant/templates/AzureBlue/unified.cshtml) the local account gets injected at the top.

<div id="api">
    <form id="localAccountForm" action="JavaScript:void(0);" class="localAccount"/>
    <div class="divider"></div>
    <div class="claims-provider-list-buttons social"/>
<div>

When you use your custom html template it is injected with the local account at the bottom:

<div id="api">
    <div class="claims-provider-list-buttons social"/>
    <div class="divider"></div>
    <form id="localAccountForm" action="JavaScript:void(0);" class="localAccount"/>
<div>

In the docs it is written:

don´t change the order or hierarchy of Azure AD B2C HTML elements. Use an Azure AD B2C policy to control the order of the UI elements.

This does not work. We found no example for that and also micrsoft support does not give an answer for that situation. Instead we should rearange this via a css hack like in this example: AzureBlue Unified, which is weird because in the docs its say explicit: Don´t change the order of B2C HTML Elements.

Summary:

  • The documentation does not reflect the right scenario (it is don´t explained how to change the order via policy)
  • The azure blue template of the microsoft tenant injects html the local account at the top
  • My own plain basic html template injects the local account at the bottom
  • I can reorder this by “hacky” css which is not allowed due documentation
rubeonline
  • 1,230
  • 10
  • 18