I'm using Azure AD B2C custom UI and I'm wondering if it is possible to use the translation of own HTML elements
Here is an example:
<hr />
<h3 class="text-center" id="Custom1SignUpNewAccountMessage>Sign up with a new account</h3>
<div id="api" data-name="SelfAsserted">
</div>
I can see the text "Sign up with a new account". Now I would like to translate it for different languages because at the moment it is fixed.
I used the JSON from DefaultLocalizedResources.
"LocalizedStrings": [
{
"ElementType": "UxElement",
"ElementId": null,
"StringId": "Custom1SignUpNewAccountMessage",
"Override": true,
"Value": "Hier neuen Acount registrieren!!!"
},
Unfortunately, Custom1SignUpNewAccountMessage is not a valid element.
Is it possible to do translation "outside" <div id="api" ...>?
The B2C multi-language string overrides are only for the translation of strings that are rendered by B2C. That's the feature's primary purpose because otherwise there is no easy way for developers to translate these strings as they do not have direct control over them.
B2C does not provide a framework for translation of strings not rendered by it. That will need to be handled by the application, and typically there are existing developer frameworks that can be used by developers depending on the platform of their choice.
Related
I am trying figure out how Azure B2C layouts are working. I have my custom layout that is based on below code:
<!DOCTYPE html>
<html>
<head>
<title>My Product Brand Name</title>
</head>
<body>
<div id="api"></div>
</body>
</html>
How to customize that "Welcomes, Sign in with your email address? For example how to change that to the social_intro? How to change sentence to simple another :) ?
sign in prnt scrn
you can download the translation files from the portal UI.
Home > Azure AD B2C | User Flows > (your flow) > Languages
Then you can click a Language (English for instance) and then under Page-level resource files, choose a page and then "Download defaults (en)". The file is a JSON file that you can edit.
{
"ElementType": "UxElement",
"ElementId": null,
"StringId": "local_intro_generic",
- "Override": false,
- "Value": "Sign in with your {0}"
+ "Override": true,
+ "Value": "Your custom intro"
}
Save the file and then upload it on the same panel where you downloaded it from.
In order to customize the “Welcomes, Sign in with your email address”. You can go through the following steps: You need to login Azure portal>Azure AD B2C> Go to your tenant:
Image 1
Then Select the policies on left side and under policies select “User Flow”:
Image 2
In User flow, select the policy which needs to be changed like this:
Image 3
Then click on “Download”
Image 4
Now open the downloaded file. You can search for the text that you want to modify and replace it with the desired text.
You can save the file and then upload it to your tenant. You will be able to see the changes.
I have tried to limit the country list in authentication page by overriding the default json file in language customization like below. But that is not reflecting in the page.
"LocalizedStrings": [
{
"ElementType": "UxElement",
"ElementId": null,
"StringId": "countryList",
"Override": true,
"Value": "{\"IN\":\"India\"}"
}
]
I found that I was doing changes in wrong page (i.e, multifactor authentication page). These are the steps
Click Your User Flow
Languages -> Click 'Enable Language Customization' in the menu if it's not enabled
Select the language
Click phone signin page in flyout menu and download the defaults json
Then add this
"LocalizedCollections": [
{
"ElementType": "ClaimType",
"ElementId": "countryCode",
"TargetCollection": "Restriction",
"Override": true,
"Items": [
{
"Name": "India(+91)",
"Value": "IN"
}
]
}
]
Upload this json.
Have a look at this post.
Here's an example:
<LocalizedString ElementType="UxElement" StringId="countryList">{"DEFAULT":"Country/Region","AU":"Australia","NZ":"New Zealand"}</LocalizedString>
You can customize the country list by downloading the strings for the Multifactor Authentication Page by going to your B2C resource in the Azure Portal and navigating to:
Your policy (assuming this is a SUSI policy)
Customize -> Languages
Click 'Enable Language Customization' in the menu if it's not enabled
Select the language you want to customize ('EN' in my case)
In the flyout menu, find the "Multifactor authentication page" section under "Page level resource files", and expand this section
Click "download defaults (en)"
Open the downloaded JSON file in your editor
Edit the JSON by removing/modifying entries to the StringId countryList which is of ElementType UxElement. Make sure you also set the Override value to true. My example is:
{
"LocalizedStrings": [
{
"ElementType": "UxElement",
"ElementId": null,
"StringId": "countryList",
"Override": true,
"Value": "{\"IN\":\"India\"}"
}
]
}
Save the file and upload as an override by using the file selector control.
You may have to refresh your browser, but you should see the changes take.
The other issue is that you're uploading an override for the wrong page template. The one I used for a screenshot was "Multifactor phone authentication" for a SUSI User Flow. The page template looks to be phonefactor.
I have been extracting Azure AD B2C strings for a custom translation, and have been having difficulty finding the right identifiers for the string 'The password must have at least 3 of the following:'.
I am using a User Flow Policy Type.
Sign up and sign in flow type.
Password complexity: Strong.
In the Azure Portal, I have downloaded the template for the 'Change password page' of my custom language.
I have modified the file to test, then uploaded the file.
Mostly this is working (after finding missing entries and creating them).
From what I can tell, the missing element should be:
{
"ElementType": "PredicateValidation",
"ElementId": "StrongPassword",
"StringId": "CharacterClasses",
"Override": true,
"Value": "hy:The password must have at least 3 of the following:"
}
but, when uploading this, a validation error is returned and the upload fails.
1 Validation errors found in upload overrides for api.selfasserted.localaccountpasswordchange2.1. Please ensure that your uploaded resource matches the template: The localized string with ElementType: PredicateValidation, ElementId: StrongPassword and StringId: CharacterClasses is not a valid override.
Change password page showing untranslated string
Update:
Try:
{
"ElementType": "InputValidation",
"ElementId": "CustomPassword",
"StringId": "CharacterClasses",
"Override": true,
"Value": "The password must have at least 3 of the following:"
}
This uploads.
I am trying to set up MFA with extension number but I am unable to do so. Is the feature available?
What do you mean by "extension number"?
B2C has two phone attributes:
"businessPhones": [],
"mobilePhone": null,
There is also the "strongauthenticationphonenumber".
You can proof up programmatically as well.
Using Azure AD B2C, I want to change the signup link text that says "Sign up now" to say "Create an account". How do I do this?
Just in case any body need to change the text on singing signup page using custom policies, you also can use the Localization customization to add the text that you need for specific language.
Those are the instructions
https://learn.microsoft.com/en-us/azure/active-directory-b2c/custom-policy-localization
Are you using User flows or Custom Policies (Identity Experience Framework)?
If you are using the user flow, go to Azure Portal and select user flow you like to customize. You will see the languages tab on lower left. Click on it then choose the language, for example English. Next download the JSON file for page level resource.
Now, download the JSON file:
Change the value inside the JSON:
{
"ElementType": "UxElement",
"ElementId": null,
"StringId": "createaccount_link",
"Override": false,
"Value": "Sign up now"
},
To:
{
"ElementType": "UxElement",
"ElementId": null,
"StringId": "createaccount_link",
"Override": false,
"Value": "Create an account"
},
Finally, upload the file back and you should now have updated text for the link.
Few Corrections on the answer shared by #Razi
Download the Json file from Unified Sign up or sign in page instead of Local Account Sign Up Page.
Make Sure to Modify the Override value to true so that B2C will able to detect the change, if there is no true value in the Override you will see below error while uploading the file.
Few Inputs from my side
User flows supports 2 options now as per below Screenshot:
If you have selected Recommended Version use the below Json:
{
"ElementType": "UxElement",
"ElementId": null,
"StringId": "createaccount_one_link",
"Override": true,
"Value": "Create an account"
}
For the Standard Version #Razi already answered above.