Localization of TOTP MFA controls

Question

I've implemented TOTP based MFA as described in the documentation (https://learn.microsoft.com/en-us/azure/active-directory-b2c/display-control-time-based-one-time-password) and samples (https://github.com/azure-ad-b2c/samples/tree/master/policies/totp).

Now I would like to translate texts displayed during MFA enrollment and verification. However, I couldn't find anything in documentation regarding StringIds which can be overridden using B2C localization mechanism.

There is a similar question on GitHub - https://github.com/azure-ad-b2c/samples/issues/378, without response since 10 days.

I would like to translate following screens:

Answer 1

If you want to translate the screens as shown above, you can do the following:

1. In your TrustFrameworkBase.xml, under the node ContentDefinitions, add the following

<ContentDefinition Id="api.selfasserted.totp">
        <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
        <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
        <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.9</DataUri>
        <Metadata>
          <Item Key="DisplayName">Collect information from user page</Item>
        </Metadata>
</ContentDefinition>

2. In your TrustFrameworkLocalization.xml ContentDefinitions node add

<ContentDefinition Id="api.selfasserted.totp">
        <LocalizedResourcesReferences MergeBehavior="Prepend">
          <LocalizedResourcesReference Language="en" LocalizedResourcesReferenceId="api.selfasserted.totp.en" />
          <LocalizedResourcesReference Language="af" LocalizedResourcesReferenceId="api.selfasserted.totp.af" />
          <!-- Add more languages here -->
        </LocalizedResourcesReferences>
</ContentDefinition>

3. Finally, also in the localization xml, you can add the following translations (Change the .af to your language preference of course)

<!-- Edit profile page English-->
      <LocalizedResources Id="api.selfasserted.totp.en">
        <LocalizedStrings>
          <LocalizedString ElementType="ClaimType" ElementId="totpQrCodeControl" StringId="DisplayName">You can download the Microsoft Authenticator app or use any other authenticator app of your choice.</LocalizedString>
          <LocalizedString ElementType="DisplayControl" ElementId="totpQrCodeControl" StringId="title_text">Scan the QR code</LocalizedString>
          <LocalizedString ElementType="DisplayControl" ElementId="totpQrCodeControl" StringId="info_msg">Using your app scan this QR code and click "Continue"</LocalizedString>          
          <LocalizedString ElementType="DisplayControl" ElementId="totpQrCodeControl" StringId="link_text">Can&#39;t scan? Try this</LocalizedString>
          <LocalizedString ElementType="ClaimType" ElementId="otpCode" StringId="UserHelpText">Enter the 6-digit verification code generated by the the Authenticator app in the box.</LocalizedString>
          <LocalizedString ElementType="ClaimType" ElementId="otpCode" StringId="DisplayName">Enter your code</LocalizedString>
          <LocalizedString ElementType="ClaimType" ElementId="QrCodeVerifyInstruction" StringId="DisplayName">Enter the verification code from your authenticator app​.</LocalizedString>
          <LocalizedString ElementType="ClaimType" ElementId="QrCodeScanInstruction" StringId="DisplayName">Once you've downloaded the Authenticator app, you can use any of the methods below to continue with enrollment.</LocalizedString>
          <LocalizedString ElementType="DisplayControl" ElementId="authenticatorAppIconControl" StringId="title_text">Download the Microsoft Authenticator using the download links for iOS and Android or use any other authenticator app of your choice.</LocalizedString>          
          <LocalizedString ElementType="DisplayControl" ElementId="authenticatorInfoControl" StringId="title_text">Enter the account details manually</LocalizedString>
          <LocalizedString ElementType="DisplayControl" ElementId="authenticatorInfoControl" StringId="account_name">Account Name:</LocalizedString>
          <LocalizedString ElementType="DisplayControl" ElementId="authenticatorInfoControl" StringId="display_prefix">Secret</LocalizedString>
          <LocalizedString ElementType="DisplayControl" ElementId="authenticatorInfoControl" StringId="collapse_text">Still having trouble?</LocalizedString>
          <LocalizedString ElementType="UxElement" StringId="button_continue">Continue</LocalizedString>
          <LocalizedString ElementType="UxElement" StringId="button_cancel">Cancel</LocalizedString>
        </LocalizedStrings>
      </LocalizedResources>
      <LocalizedResources Id="api.selfasserted.totp.af">
        <LocalizedStrings>
          <LocalizedString ElementType="ClaimType" ElementId="totpQrCodeControl" StringId="DisplayName">Jy kan die Microsoft Authenticator-toepassing aflaai of enige ander Authenticator-toepassing van jou keuse gebruik.</LocalizedString>
          <LocalizedString ElementType="DisplayControl" ElementId="totpQrCodeControl" StringId="title_text">Skandeer die QR-kode</LocalizedString>
          <LocalizedString ElementType="DisplayControl" ElementId="totpQrCodeControl" StringId="link_text">Kan jy nie skandeer nie? Probeer hierdie</LocalizedString>
          <LocalizedString ElementType="DisplayControl" ElementId="totpQrCodeControl" StringId="info_msg">Deur jou toepassing te gebruik, skandeer hierdie QR-kode en klik "Gaan voort"</LocalizedString>
          <LocalizedString ElementType="ClaimType" ElementId="otpCode" StringId="UserHelpText">Voer die 6-syfer-verifikasiekode in wat deur die die Authenticator-toepassing gegenereer is in die blokkie.</LocalizedString>
          <LocalizedString ElementType="ClaimType" ElementId="otpCode" StringId="DisplayName">Sleutel in jou kode</LocalizedString>
          <LocalizedString ElementType="ClaimType" ElementId="QrCodeVerifyInstruction" StringId="DisplayName">Voer die verifikasiekode vanaf jou verifikasie-toepassing in.</LocalizedString>
          <LocalizedString ElementType="ClaimType" ElementId="QrCodeScanInstruction" StringId="DisplayName">Sodra jy die Authenticator-toepassing afgelaai het, kan jy enige van die metodes hieronder gebruik om voort te gaan met inskrywing.</LocalizedString>
          <LocalizedString ElementType="DisplayControl" ElementId="authenticatorAppIconControl" StringId="title_text">Laai die Microsoft Authenticator af deur die aflaaiskakels vir iOS en Android te gebruik of gebruik enige ander Authenticator-toepassing van jou keuse.</LocalizedString>          
          <LocalizedString ElementType="DisplayControl" ElementId="authenticatorInfoControl" StringId="title_text">Voer die rekeningbesonderhede handmatig in</LocalizedString>
          <LocalizedString ElementType="DisplayControl" ElementId="authenticatorInfoControl" StringId="account_name">Rekeningnaam:</LocalizedString>
          <LocalizedString ElementType="DisplayControl" ElementId="authenticatorInfoControl" StringId="display_prefix">Geheim</LocalizedString>
          <LocalizedString ElementType="DisplayControl" ElementId="authenticatorInfoControl" StringId="collapse_text">Het u steeds probleme?</LocalizedString>
          <LocalizedString ElementType="UxElement" StringId="button_continue">Gaan voort</LocalizedString>
          <LocalizedString ElementType="UxElement" StringId="button_cancel">Kanselleer</LocalizedString>
        </LocalizedStrings>
</LocalizedResources>

This should give you the following output then

NOTE Some of the error message you will have to test and also figure out how to translate, the codes for these can be found here, but I did find one or 2 that does not work as I expect, and still trying to get it all to translate proper. Wish there was better documentation on this