Custom elements and ordering of UI with AAD B2C Custom Policies

Question

Even after days of reading and going through several tutorials I still cannot figure out how to use AAD B2C custom policies to arrange the login / signup UI. As my starting point I am using the starter pack for SocialAndLocalAccounts.

I would like to:

Move the social logins above the email/password section. I could maybe achieve this with custom page css, but surely I must have some control over the page content with the custom policies or is all this hardcoded the way it is presented?
I want to add a terms link only on the signup page. This I cannot do in the custom page css because then it also appears on the login page of the combined login/signup flow. I have enabled js so that I can replace a text element with my hyperlink to the terms as hinted at in the MS Docs. However, this example assumes you will have a checkbox, but I don't want that. Only a simple div with the hyperlinked terms for the user to read. I can't figure out how to insert a simple text field in the form which will only appear on the signup page - because I cannot see how the elements on the pages are created. Are they hardcoded based on claims?

PS! I read that you should not edit the TrustFrameworkBase.xml, but in order to remove claim types from the form such as given name, surname and displayname I can find no other way. I can add new things in the TrustFrameworkExtensions.xml, but I can't remove things from the base as it seems to merge the two.

Tarostar Tarostar · Accepted Answer · 2021-03-22T16:20:34

For #1 I ended up using css as Jas Suri suggested. In my unified.css I added

.claims-provider-list-buttons, .social {
    display: block !important;
}

This takes the social logins out of the footer of the table and thus it ends up on top. Note that in version 1.2.0 (urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0) it is .social, but in 2.1.4 it is .claims-provider-list-buttons - so I target both.

For a bit more spacing before email login I also added:

#localAccountForm {
    margin-top: 40px;
}

For #2, in TrustFrameworkBase.xml I added a new ClaimType:

<ClaimType Id="extension_terms">
        <DisplayName>Accept terms, but this will never be shown as hidden by css</DisplayName>
        <DataType>boolean</DataType>
        <UserInputType>CheckboxMultiSelect</UserInputType>
        <Restriction>
          <Enumeration Text="" Value="true" SelectByDefault="true" />
        </Restriction>
      </ClaimType>

Added <OutputClaim ClaimTypeReferenceId="extension_terms" /> to the TechnicalProfile LocalAccountSignUpWithLogonEmail.

In the unified.css of the custom pages I make sure the checkbox and text is never shown:

#extension_terms_true {
    display: none;
}

label[for="extension_terms_true"] {
    display: none;
}

Then I create a new js file custom-ui.js included in the custom-ui.html as normal: <script src="https://filmwebidlogintest.blob.core.windows.net/filmwebidloginblob/js/custom-ui.js"></script> This js file contains:

function addTermsOfUseLink() {
    // find the terms of use label element
    var termsOfUseLabel = document.querySelector('#api label[for="extension_terms"]');
    if (!termsOfUseLabel) {
        return;
    }

    termsOfUseLabel.innerHTML = 'To use this service you must accept <a href="https://www.yourterms.no" target="_blank">the service terms</a> and <a href="https://www.yourgdpr.no" target="_blank">privacy terms</a>.';
}


$(document).ready(function () {
    addTermsOfUseLink();
});

I feel this is very hacky, but it works and I can find no better solution.

For information on the custom HTML/CSS I've used read this MS Documentation.

Custom elements and ordering of UI with AAD B2C Custom Policies

1 Answers