How to dynamically display data in B2C sign up page with a localized String? - azure-ad-b2c

So I am trying to display a query parameter in my HTML page. I have not had an issue doing this is a claim, I created this.
<ClaimsSchema>
<ClaimType Id="ID">
<DisplayName>ID</DisplayName>
<DataType>string</DataType>
</ClaimType>
</ClaimsSchema>
Then in my relaying party I have this,
<OutputClaim ClaimTypeReferenceId="ID" AlwaysUseDefaultValue="true" DefaultValue="{OAUTH-KV:ID}" />
and in the sign in URL we have &ID=12345
What we are trying to do is send out sign up links with a specific ID value. Then when they make it to the sign in / sign up page the join now link has that ID appended to it.
So like www.mycompany.com/register/id=12345
I have localized the strings in self asserted page.
<Localization>
<LocalizedResources Id="api.selfasserted">
<LocalizedStrings>
<LocalizedString ElementType="UxElement" StringId="disclaimer_msg_intro">Dont have an account?</LocalizedString>
<LocalizedString ElementType="UxElement" StringId="disclaimer_link_1_text">Join Now</LocalizedString>
<LocalizedString ElementType="UxElement" StringId="disclaimer_link_1_url">http://www.mycompany.com/register/id=</LocalizedString>
</LocalizedStrings>
</LocalizedResources>
</Localization>
Is there a way to inject that claim in that link?
I know i can do this with JS... i am trying to avoid using Javascript.

It’s not possible to do dynamic claim resolving in localised elements function. You’re going to have to use JS.

Related

Localization of custom claim in Azure AD B2C custom policy

I have the following claim type in my relying party building block section:
<ClaimType Id="extension_mfaByPhoneOrEmail">
<DisplayName>Please select your preferred MFA method</DisplayName>
<DataType>string</DataType>
<UserInputType>RadioSingleSelect</UserInputType>
<Restriction>
<Enumeration Text="Phone" Value="phone" SelectByDefault="true" />
<!-- <Enumeration Text="Email " Value="email" SelectByDefault="false" /> -->
</Restriction>
</ClaimType>
I'm not able to add the localization for another language, I have already set the trustframeworklocalization.xml file and it'w works for the other parts of the code.
problem solved in part, I added on the selfasserted content definition id the following rows:
<!-- Self Asserted localized strings (English) -->
<LocalizedResources Id="api.selfasserted.en">
<LocalizedStrings>
<LocalizedString ElementType="ClaimType" ElementId="extension_mfaByPhoneOrEmail" StringId="DisplayName">Please select your preferred MFA method</LocalizedString>
</LocalizedStrings>
</LocalizedResources>
problem solved, i added on the selfasserted content definition id the following rows:
<LocalizedResources Id="api.selfasserted.en">
<LocalizedCollections>
<LocalizedCollection ElementType="ClaimType" ElementId="extension_mfaByPhoneOrEmail" TargetCollection="Restriction">
<Item Text="Phone" Value="phone" />
<Item Text="Email" Value="email" />
</LocalizedCollection>
</LocalizedCollections>
<LocalizedStrings>
<LocalizedString ElementType="ClaimType" ElementId="extension_mfaByPhoneOrEmail" StringId="DisplayName">Please select your preferred MFA method</LocalizedString>
</LocalizedStrings>
</LocalizedResources>

Azure AD B2C Self-service password reset showing wrong title

When enabling this new self service password reset, it shows wrong titles on the login page.
https://learn.microsoft.com/en-us/azure/active-directory-b2c/add-password-reset-policy?pivots=b2c-custom-policy#self-service-password-reset-recommended
It shows these:
Sign in with your social account
OR
Sign in with your sign in name
But I'm not using any social account, only local account, the Sign in with your social account is empty.
I also tried on this sample, removing facebook as social account, having only local account, however it keeps the empty Sign in with your social account.
https://github.com/azure-ad-b2c/samples/tree/master/policies/embedded-password-reset
Anyone managed to enable self service password reset for local account only and having the correct title Sign in with your sign in name?
This has been fixed in newest version of content definition. In TrustFrameworkBase file use for api.signuporsignin the following DataUri:
<DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:2.1.5</DataUri>
There are two ways to approach this:
Using the Localization features of the Identity Experience Framework. This will allow you to modify the UxElements on your Content Definitions. More information can be found at https://learn.microsoft.com/en-us/azure/active-directory-b2c/localization.
Completely customize the User Interface - https://learn.microsoft.com/en-us/azure/active-directory-b2c/customize-ui-with-html?pivots=b2c-custom-policy
It took me a minute to test this on one of my policies, but this is what I added to my Sign In/Sign Up page to verify the localization.
<BuildingBlocks>
<Localization Enabled="true">
<SupportedLanguages DefaultLanguage="en" MergeBehavior="ReplaceAll">
<SupportedLanguage>en</SupportedLanguage>
</SupportedLanguages>
<LocalizedResources Id="api.selfasserted.en">
<LocalizedStrings>
<LocalizedString ElementType="UxElement" StringId="local_intro_generic">Brad</LocalizedString>
</LocalizedStrings>
</LocalizedResources>
</Localization>
</BuildingBlocks>
And then updated my Content Definition:
<ContentDefinition Id="api.selfasserted">
<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.2</DataUri>
<Metadata>
<Item Key="DisplayName">Collect information from user page</Item>
</Metadata>
<LocalizedResourcesReferences>
<LocalizedResourcesReference Language="en" LocalizedResourcesReferenceId="api.selfasserted.en"/>
</LocalizedResourcesReferences>
</ContentDefinition>

Localizing the API response in Custom Police Azure ADB2C

I have implemented localization in Azure ADB2C custom policy.
<ClaimType Id="signInName">
<DisplayName>Please enter your email</DisplayName>
<DataType>string</DataType>
<UserHelpText>Enter your email address to signin</UserHelpText>
<Restriction>
<Pattern RegularExpression="^[a-zA-Z0-9_.+-]+#[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$"/>
</Restriction>
</ClaimType>
<Localization Enabled="true">
<SupportedLanguages DefaultLanguage="en" MergeBehavior="ReplaceAll">
<SupportedLanguage>en</SupportedLanguage>
<SupportedLanguage>es</SupportedLanguage>
</SupportedLanguages>
<LocalizedResources Id="en">
<LocalizedStrings>
<LocalizedString ElementType="ClaimType" ElementId="signInName" StringId="DisplayName">Please enter your email</LocalizedString>
<LocalizedString ElementType="ClaimType" ElementId="signInName" StringId="UserHelpText">Enter your email address to signin</LocalizedString>
</LocalizedStrings>
</LocalizedResources>
<LocalizedResources Id="es">
<LocalizedStrings>
<LocalizedString ElementType="ClaimType" ElementId="signInName" StringId="DisplayName">Por favor introduzca su correo electrónico</LocalizedString>
<LocalizedString ElementType="ClaimType" ElementId="signInName" StringId="UserHelpText">Ingrese su dirección de correo electrónico para iniciar sesión</LocalizedString>
</LocalizedStrings>
</LocalizedResources>
</Localization>
Everything is working as expected but when the login button is clicked, an API call is made and the response is always in English. Also the query string parameter to indicate the language is not sent in the API call. Any help is greatly appreciated.
You need to first find what is the string ID which is showing this error.
We support these IDs for localization which you might have customized in your policies.
Then, once you know which ID is being used for your error message, you can add a LocalizedString element like below (For example, I am assuming the ElementType is ErrorMessage and StringID is DefaultMessage):
<LocalizedString ElementType="ErrorMessage" StringId="DefaultMessage">#Invalid username or password.</LocalizedString>
You can find out different examples of the same here: https://learn.microsoft.com/en-us/azure/active-directory-b2c/custom-policy-localization

Cant customize the Verification code message

I’m helping a partner to customize their B2C policy to show a custom message for e-mail verification code. We tried to customize the following parameter on the TrustFrameworkExtension (Attached) but it had no effect:
<LocalizedString ElementType="UxElement"
StringId="ver_info_msg">Verification code has been sent to your inbox.
Please copy it to the input box below.</LocalizedString>\\
What we need to change is the display message for verification code, as shown on the image below:
Could anyone provide some guidance? I tried it different ways and I don´t know If we´re doing something wrong or if it´s a default message that can´t be customized. It´s impacting the partner go-live.
thanks for guidance! the message we were trying to customize has a different StringID. The correct StringID is verification_control_code_sent
Once we fixed it we resolved the issue:
<!--Local account sign-up page Portuguese-->
<LocalizedResources Id="api.localaccountsignup.pt">
<LocalizedStrings>
<LocalizedString ElementType="UxElement" StringId="verification_control_code_sent">Um código de segurança foi enviado para seu e-mail. Mantenha esta janela aberta.</LocalizedString>
The document shows:
The following are the IDs for a content definition with an ID of
api.localaccountsignup or any content definition that starts with
api.selfasserted, such as api.selfasserted.profileupdate and
api.localaccountpasswordreset.
So you need to make the change in the appropriate “api.xxx” action.
The sample extends Id api.localaccountsignup to api.localaccountsignup.en. And change the value of LocalizedString.
<Localization Enabled="true">
<SupportedLanguages DefaultLanguage="en" MergeBehavior="ReplaceAll">
<SupportedLanguage>en</SupportedLanguage>
</SupportedLanguages>
<LocalizedResources Id="api.localaccountsignup.en">
<LocalizedStrings>
<LocalizedString ElementType="UxElement" StringId="ver_fail_no_retry">Attempt limit exceeded - please check your email for the correct code</LocalizedString>
</LocalizedStrings>
</LocalizedResources>
</Localization>
Then you need to change value of ver_info_msg in JSON defaults for built-in policies. For more details, see here.
Navigate to Azure AD B2C -> User flows -> Languages(make sure Enable language customization) -> Configured

Azure B2C Custom Policy Has Create Button for SignUpSignIn and ProfileEdit Policies

I am currently experiencing a problem with Azure B2C IEF Custom Policy. In my "ProfileEdit" UserJourney The user is presented with the sign-in screen. The problem here is that the continue button is actually labeled "Create" After the user signs in, they are presented with a Edit Profile Page. But again, the continue button is labeled as create.
I have done a lot of research. I could not find anything in stackoverflow and I have reviewed Microsoft Documentation and also ensured that the DataURIs are correct for the ContentDefinition.
The current Data URI is as follows:
urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.1.0
Any guidance would be greatly appreciated.
if you don't want to go with localization. You can still update button/ label values inside Metadata of relevant technical profiles.
For your scenario
Add new Metadata Item in Base file technical profile
SelfAsserted-LocalAccountSignin-Email like below
<Metadata>
---
<Item Key="language.button_continue">Continue</Item>
</Metadata>
You can customize any element text using localization.
The first step is to enable localization for English and any other languages to be supported:
<BuildingBlocks>
...
<ContentDefinitions />
<Localization>
<SupportedLanguages DefaultLanguage="en">
<SupportedLanguage>en</SupportedLanguage>
</SupportedLanguages>
</Localization>
</BuildingBlocks>
The second step is to define the localized strings for each supported language for each page definition:
<BuildingBlocks>
...
<Localization>
<SupportedLanguages />
<LocalizedResources Id="api.selfasserted.profileupdate.en">
<LocalizedStrings>
<LocalizedString ElementType="UxElement" StringId="button_continue">Update</LocalizedString>
</LocalizedStrings>
</LocalizedResources>
</Localization>
</BuildingBlocks>
The last step is to declare references from the page definition to the localized resources:
<BuildingBlocks>
...
<ContentDefinitions>
<ContentDefinition Id="api.selfasserted.profileupdate">
...
<LocalizedResourcesReferences MergeBehavior="Prepend">
<LocalizedResourcesReference Language="en" LocalizedResourcesReferenceId="api.selfasserted.profileupdate.en" />
</LocalizedResourcesReferences>
</ContentDefinition>
</ContentDefinitions>
<Localization />
</BuildingBlocks>

Resources