使用动态HTML的Azure AD B2C UI自定义

Question

I am trying to configure my own html and CSS for Azure AD B2C sign-up and sign-in policy by following this link .

I am successful in taking the user to custom Sign-Up and Sign-In pages, but now I want to have dynamic sign-up page. I want to pass some values in the query string or some other way and based on those values I want to add or remove some elements inside html.

In future I want to put those values in a database and query them before rendering html.

Is this achievable? Any guidance is highly appreciated.

Answer 1

Short answer, there is no easy way today to add dynamic behavior to your custom Azure AD B2C UIs .

The most viable way to achieve this is by using JavaScript which isn't supported in Azure AD B2C yet.

You can support this ask and stay up to date on its progress by voting for it in the Azure AD B2C feedback forum: Add support for JavaScript inside the custom UI branding page

A potential workaround: create separate policies with your different UI permutations/variations . This would allow you to have a single query string parameter (the policy) to determine which UI to pick.

Answer 2

By default B2C disables Javascript because the policies are executed on login.microsoft.com

B2C supports something called Vanity domains although you will have to request it, what this does is makes it appears that the policies are executed on your domain so instead of

login.microsoft.com?p=signinpolicy the url would be

myvanitydomain?p=signinpolicy

The process is long and exhausting and as far as i know is not open to the general public

By changing this you can now run javascript because Microsoft dont want you running Javascript on their domains

So far I have not managed to find any way to automatically enable Javascript at page loads as Microsoft strip out all script tags.

Answer 3

If you are authoring custom policies and you are wanting to change the HTML template that is loaded by Identity Experience Framework (IEF) based on a query string parameter, then you can define this query string parameter in your relying party policy as follows:

<RelyingParty>
  <UserJourneyBehaviors>
    ...
    <ContentDefinitionParameters>
      <Parameter Name="campaign_id">{OAUTH-KV:campaign_id}</Parameter>
    </ContentDefinitionParameters>
  </UserJourneyBehaviors>
  <TechnicalProfile>
    ...
  </TechnicalProfile>
</RelyingParty>

When you add the query string parameter to the authentication request:

https://login.microsoftonline.com/contoso.onmicrosoft.com/oauth2/v2.0/authorize/?p=b2c_1a_sign_up_sign_in&campaign_id=1

Then IEF loads the HTML template with this query string parameter:

https://b2c.contoso.com/templates/signupsignin?campaign_id=1