1

I have a custom Azure B2C policy with the following claim that is used in a signup:

...
  <ClaimType Id="givenName">
    <DisplayName>First Name</DisplayName>
    <DataType>string</DataType>
    <DefaultPartnerClaimTypes>
      <Protocol Name="OAuth2" 
        PartnerClaimType="given_name" />
      <Protocol Name="OpenIdConnect" 
        PartnerClaimType="given_name" />
      <Protocol Name="SAML2" 
        PartnerClaimType="http://schemas.xmlsoap.org/ws/2005/05/identity/claims/givenname" />
    </DefaultPartnerClaimTypes>
    <UserHelpText>Your given name (also known as first name).</UserHelpText>
    <UserInputType>TextBox</UserInputType>
  </ClaimType>
...

I want to be able to localizied the error message that appears when the user does not enter a value and attempts to continue.

This is currently defaulting/using the "required_field" of the localisation element. However there is a number of other claims like this, i.e. surname, where I want a different message to appear for each claim. i.e. "First Name is Required", "Surname is Required" etc; instead of just a generic message for all claims that says "This information is required".

This documentation, https://learn.microsoft.com/en-us/azure/active-directory-b2c/localization-string-ids, shows the various id that are available, but I dont see anyway to accomplish this?

This is how the localization currently looks

...
      <LocalizedResources Id="api.localaccountsignup.en">
    <LocalizedStrings>
      <!-- Header -->
      <LocalizedString ElementType="UxElement" StringId="initial_intro">Create a account to start</LocalizedString>
      <!-- First name -->
      <LocalizedString ElementType="ClaimType" ElementId="givenName" StringId="DisplayName">First name</LocalizedString>
      <LocalizedString ElementType="ClaimType" ElementId="givenName" StringId="UserHelpText"></LocalizedString>
      <LocalizedString ElementType="ClaimType" ElementId="givenName" StringId="PatternHelpText">First name is required.</LocalizedString>
      <!-- Last name -->
      <LocalizedString ElementType="ClaimType" ElementId="surname" StringId="DisplayName">Last name</LocalizedString>
      <LocalizedString ElementType="ClaimType" ElementId="surname" StringId="UserHelpText"></LocalizedString>     
      <LocalizedString ElementType="ClaimType" ElementId="surname" StringId="PatternHelpText"></LocalizedString>     
...
      <LocalizedString ElementType="UxElement" StringId="required_field">This information is required.</LocalizedString>
...

I can see ways to localize the help text and pattern (for the restriction) but nothing for when the user simply doesn't enter anything.

Thanks for your help!

noelor
  • 11
  • 1

1 Answers1

0

I never really solved this problem as I don't think there was a solution. Atleast not at the time (July 2020)

Instead, I had to work around the issue. What I did, was as B2C allows static HTML to be included, I added a custom Javascript to that page, to add the extra messages that was required. I kept it simple, just using JQuery based on the claim names.

snippet below

function build() {
    addValdationInput('signInName', 'Email address is required', function validiateInput(e) {
        var value = e.target.value;
        const error = document.getElementById('signInName');
        
        if(isEmpty(value)) {
            error.style.visibility = "visible";
            e.target.style.borderColor = "#bb191c";         
            $('#signInName')).html('Email address is required' + svgItemLevelErrorIconHtml());
        } else if(!isValidEmail(value)) {
            error.style.visibility = "visible";
            e.target.style.borderColor  = "#bb191c";
            $('#signInName')).html('Email address is required' + svgItemLevelErrorIconHtml());
        } else {
            e.target.value = value.trim();
            Controller.hideValidationError(error,e);    
        }
    });
  
  // ...
}
// ...
export function svgItemLevelErrorIconHtml() {
  return '<svg class=...';
}
export function addValdationInput(id, errorText, validationAction) {
    $('#' + id).after(buildValidationHtml(id,errorText));   
    $("#" + id).blur(validationAction);
}
export function buildValidationHtml(id, errorText) {
    var content = '<div id=';
    content += getErrorID(id);
    content += ' class="b2c-error" style="visibility: hidden;">';
    content += svgItemLevelErrorIconHtml();
    content += errorText;
    content += '</div>';
    return content;
}

I know this wasn't the best as it meant I now needed to places to store i18n strings but I couldn't find an alternative.

noelor
  • 11
  • 1