April 28, 2021

Azure B2C: Adding missing translations on Page Layouts

Problem

After starting to use Azure B2C custom Page Layout versions newer than 2.0.0, you will find translations are missing on many controls. Documentation is lacking behind, so it will take some trial and error to figure out some of the translation IDs. In the following pictures, you see missing translations marked with beautiful hand drawn red arrows.



Solution

As B2C _should_ already include these translations, the only workaround currently is to manually provide the missing strings in your Custom Policy. The following will work for urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:2.1.4 and urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.4.

So first of all, add LocalizedResourceReference elements in the ContentDefinition elements.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://xyz.blob.core.windows.net/customui/ocean_blue/unified.html</LoadUri>
  <RecoveryUri>https://xyz.blob.core.windows.net/customui/ocean_blue/exception.html</RecoveryUri>
  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:2.1.4</DataUri>
  <Metadata>
    <Item Key="DisplayName">Signin and Signup</Item>
  </Metadata>
  <LocalizedResourcesReferences MergeBehavior="Prepend">
    <LocalizedResourcesReference Language="fi" LocalizedResourcesReferenceId="api.signuporsignin.fi" />
  </LocalizedResourcesReferences>
</ContentDefinition>
<ContentDefinition Id="api.selfasserted">
  <LoadUri>https://xyz.blob.core.windows.net/customui/ocean_blue/selfAsserted.html</LoadUri>
  <RecoveryUri>https://xyz.blob.core.windows.net/customui/ocean_blue/exception.html</RecoveryUri>
  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.4</DataUri>
  <Metadata>
    <Item Key="DisplayName">Collect information from user page</Item>
  </Metadata>
  <LocalizedResourcesReferences MergeBehavior="Prepend">
    <LocalizedResourcesReference Language="fi" LocalizedResourcesReferenceId="api.localaccountpasswordreset.fi" />
  </LocalizedResourcesReferences>
</ContentDefinition>

Then the actual strings you will add in the Localization element.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<LocalizedResources Id="api.signuporsignin.fi">
  <LocalizedStrings>
    <LocalizedString ElementType="ClaimType" ElementId="signInName" StringId="DisplayName">Sähköpostiosoite</LocalizedString>
    <LocalizedString ElementType="ClaimType" ElementId="password" StringId="DisplayName">Salasana</LocalizedString>
    <LocalizedString ElementType="UxElement" StringId="local_intro_generic">Kirjaudu sisään aiemmin luodulla tililläsi</LocalizedString>
  </LocalizedStrings>
</LocalizedResources>
<LocalizedResources Id="api.localaccountpasswordreset.fi">
  <LocalizedStrings>
    <LocalizedString ElementType="ClaimType" ElementId="email" StringId="DisplayName">Sähköpostiosoite</LocalizedString>
    <LocalizedString ElementType="ClaimType" ElementId="VerificationCode" StringId="DisplayName">Vahvistuskoodi</LocalizedString>
    <LocalizedString ElementType="ClaimType" ElementId="signInNames.emailAddress" StringId="DisplayName">Sähköpostiosoite</LocalizedString>
    <LocalizedString ElementType="DisplayControl" ElementId="emailVerificationSSPRControl" StringId="email">Sähköpostiosoite</LocalizedString>
    <LocalizedString ElementType="DisplayControl" ElementId="emailVerificationSSPRControl" StringId="ver_input">Vahvistuskoodi</LocalizedString>
    <LocalizedString ElementType="DisplayControl" ElementId="emailVerificationSSPRControl" StringId="verificationcode">Vahvistuskoodi</LocalizedString>
    <LocalizedString ElementType="DisplayControl" ElementId="emailVerificationSSPRControl" StringId="intro_msg">Syötä sähköpostiosoitteesi ja paina Lähetä vahvistuskoodi -painiketta.</LocalizedString>
    <LocalizedString ElementType="DisplayControl" ElementId="emailVerificationSSPRControl" StringId="but_send_code">Lähetä vahvistuskoodi</LocalizedString>
    <LocalizedString ElementType="DisplayControl" ElementId="emailVerificationSSPRControl" StringId="but_verify_code">Vahvista koodi</LocalizedString>
    <LocalizedString ElementType="DisplayControl" ElementId="emailVerificationSSPRControl" StringId="but_send_new_code">Lähetä uusi koodi</LocalizedString>
    <LocalizedString ElementType="DisplayControl" ElementId="emailVerificationSSPRControl" StringId="success_send_code_msg">Vahvistuskoodi on lähetetty sähköpostiisi. Kopioi se alla olevaan syöteruutuun ja paina Vahvista koodi -painiketta.</LocalizedString>
  </LocalizedStrings>
</LocalizedResources>

Please note that this is not a comprehensive list of missing translations, so feel free to comment below if you happen to have a full tested list of translations that will work with the new Page Layouts.

Posted by at
Labels: ,

2 comments:

  1. UnknownNovember 26, 2021 at 12:29 PM

    Hi,
    Thanks for this nice article. I am also trying to change the verification message on my "Forgot Password" journey.
    But Localization is not working for me for ElementType="DisplayControl" and ElementType="UxElement".
    Do you have any clue on how can debug the issue?

    Thanks in advance.

    ReplyDelete
    Replies
    1. Jussi PaloNovember 26, 2021 at 12:36 PM

      Unfortunately it was more or less trial&error for me when finding the ones in the article. Try looking at the source code of the B2C page in question and compare the HTML elements and specifically the IDs of the elements with the HTML of the login pages in this article and try to find similarities that would help you.

      Delete

Subscribe to: Post Comments (Atom)