Azure B2C UI Customization - Identity Provider Header and field display names - azure

Question

I have some questions on customization of the UI for B2C portals. I've looked at both of the following links:
https://learn.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-customize-ui-custom
https://learn.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-ui-customization-custom
But it doesn't seem like my question is answered from those documentation links.
Question 1: What I'm wondering is if it's possible to customize the "Sign in with your social account" string? I looked through the policy XML files and did not see that string being generated anywhere, and it did not look like I could customize it through one tags of the block in the TrustFrameworkExtensions.xml file. So is this string editable? I attempted to add a Metadata Item tag who's key was "language.intro" hoping that would override the string on the "api.signuporsignin" ContentDefinition block...but it did not override.
Question 2: Somewhat related to the above...is it possible to customize the display strings of the built-in fields for the Sign Up / Profile Edit pages? For example, we would like "Surname" to be "Last Name" and "Given Name" to be "First Name". Is it possible to customize those display name strings, without creating all new/custom fields to get the display name we want?
Thanks for the help, I appreciate it!

Answer 1

I have customized that text using Localization.
<ContentDefinition Id="api.signuporsignin">
<LoadUri>~/tenant/default/unified.cshtml</LoadUri>
<RecoveryUri>~/common/default_page_error.html</RecoveryUri>
<DataUri>urn:com:microsoft:aad:b2c:elements:unifiedssp:1.0.0</DataUri>
<Metadata>
<Item Key="DisplayName">Signin and Signup</Item>
</Metadata>
<LocalizedResourcesReferences>
<LocalizedResourcesReference Language="en" LocalizedResourcesReferenceId="api.signuporsignin.en" />
</LocalizedResourcesReferences>
</ContentDefinition>
....... then add Localization element to right before close tag of the BuildingBlocks.
<Localization Enabled="true">
<SupportedLanguages DefaultLanguage="en" MergeBehavior="ReplaceAll">
<SupportedLanguage>en</SupportedLanguage>
</SupportedLanguages>
<LocalizedResources Id="api.signuporsignin.en">
<LocalizedStrings>
<LocalizedString ElementType="UxElement" StringId="social_intro">Sign in with your company account</LocalizedString>
</LocalizedStrings>
</LocalizedResources>
</Localization>

Answer 2

The "Sign in with your social account" HTML is just sample HTML from B2C. To replace this, you can save your custom HTML page in Azure Blob Storage and then follow these steps:
Sign in to your tenant on the Azure portal and navigate to the B2C features blade.
Click Sign-up or sign-in policies, click your policy and click on Edit (for example, "b2c_1_sign_up_sign_in").
Click Page UI customization and then Unified sign-up or sign-in page.
Toggle the Use custom page switch to Yes. In the Custom page URI field, enter https://wingtiptoysb2c.blob.core.windows.net/b2c/wingtip/unified.html. Click OK.
Click Local account sign-up page. Toggle the Use custom template switch to Yes. In the Custom page URI field, enter https://wingtiptoysb2c.blob.core.windows.net/b2c/wingtip/selfasserted.html.
Repeat the same step for the Social account sign-up page. Click OK twice to close the UI customization blades.
Click Save.
For reference, see the full instructions here: https://learn.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-ui-customization-helper-tool
You can do the same thing to customize your Sign Up/Profile Edit pages.

Answer 3

Sounds like this functionality is not supported out of the box, and JavaScript isn't (yet) supported either, our designer found a workaround that seems to work well. Hiding the "intro" div and then adding a div in place and using the CSS "content" attribute to add in our own custom text.
Here's the CSS:
/*this hides the default intro text and replaces with our own text*/
.intro {display: none;}
.social:before {
content: "our custom text";
font-size: 1.2em;
line-height: 2em;
}