I'm new into azure and I'm trying to setup b2c with custom html that contains some additional labels and css.
Here is simple example of my template
<!DOCTYPE html/>
<html>
<body>
<h1>It worked!</h1>
<div id="api"></div>
</body>
</html>
I uploaded this template into blob storage:
https://mydomain.blob.../b2c-pages/signin-ui.html
In azure b2c I'm using "Sign up and sign in" policy, enabled custom page content and this part is working, on login screen I see my custom page. Now I'm also requested to add support for multiple languages so I've enabled language customization and everything is working out of the box except text into h1 tag.
I'm wondering how to provide azure b2c translation for this string? Can I specify new UXElement in my template?
After some research I've founded this link https://learn.microsoft.com/en-us/azure/active-directory-b2c/custom-policy-localization but as I can see, here there is using custom policy.
Can I fulfill my request without custom policy setup?
Edit1:
Thanks to comment form Chauncy (https://learn.microsoft.com/en-us/azure/active-directory-b2c/user-flow-language-customization) I was able to figure out that I can use wildcard value {Culture:RFC5646} in url for custom UI.
So I setup Custom page URI like:
https://mydomain.blob.../b2c-pages/signin-ui_{Culture:RFC5646}.html
and I uploaded files like
https://mydomain.blob.../b2c-pages/signin-ui_en.html
https://mydomain.blob.../b2c-pages/signin-ui_fr.html
My question is, dose this approach is correct or I misunderstand the docks?
I tried to test your method and you are right.We can customize the language in this way.
Here's how I tested it.Thank you for discovering this method.
The important thing is that the parameters must be passed in here.
Related
Is there anyway to change the styling of the social IDP buttons when using custom policies in Azure AD B2C? For reference here's what they look like when implemented via custom policy:
And here is an example when using the user flows:
Ideally I'd like my screenshot from the first image to look a bit more like the example in the second image. I understand how to change the text on the button but I'm more referring to the color and the icon. Have scoured the documentation but bit of a custom policy noob and can't find anything that covers this.
After a little tinkering I figured out the solution:
The styling of these IDP buttons is related to their 'TargetClaimsExchangeId' in the custom policy orchestration step. While this id can be set to anything you like, setting it to the relevant Id eg: "MicrosoftAccountExchange" or "GoogleExchange" will invoke the correct styling. This isn't really made clear anywhere on the documentation.
It's possible to customize styles of each element while using azure AD B2C custom policies.
It's explained nicely here on how to use custom html files and override styles in the Microsoft docs. Please read through the whole thing.
Refer to this GitHub repository with HTML files that you can deploy to your storage account or similar and you can start working.
If you are familiar with HTML and CSS, this should be a straightforward styling changes and using custom icons etc based on your requirement.
I’ve created a b2c signup flow through custom policy and the user journey is working fine. But, while clicking the ‘Signup’ icon there is a bit ‘flicker’ with a message displaying as ‘what is this?’, On the side of each field while loading a complete registration page. For better user experience, is there any customization required for b2c html or in a custom policy to override this behavior. I’m assuming this may be a b2c-html late loading style sheet.
Assuming you're customising the UI with your own HTML page templates then try adding a data-preload="true" attribute to your CSS (and JS).
If that still doesn't work then I'd recommend setting your HTML page template body content to be hidden by default, B2C should then automatically unhide it when page load is complete but if it doesn't you can use JS to unhide it yourself on document ready.
I want to control the elements that are generated dynamically by the azure b2c.
Like change the element <p> tags to <h2> on email signup page,
so that "Your Details" appear inside a header tag.
In the Azure AD B2C There is a way to customize the interface of user experiences for sign-up, sign-in, and profile editing. Please go through the document for more information.
We can use javascript in the B2C but for your scenario it wont work. As per the Guidelines we should change the html elements order using javascript. Please go through the document it may help you for future reference.
Can we add javascript inside custom policies and can we use button click function to redirect to another page?
I have referred the following links when implementing custom policies.
JavaScript is now supported for custom policies. Here is the official documentation:
https://learn.microsoft.com/en-us/azure/active-directory-b2c/javascript-samples
NB: it seems you need to use the b2clogin.com domain (not login.microsoftonline.com). I cannot find this documented at the moment, but a quick test shows that JavaScript is stripped out on login.microsoftonline.com. Here is the documentation for using b2clogin.com: https://learn.microsoft.com/en-us/azure/active-directory-b2c/b2clogin.
JavaScript is currently not supported in custom UI. See the note under Create your HTML5 content.
Custom JavaScript is not currently supported in Azure AD B2C. We are working to enable that feature - please vote for the feature here so that you can get an update when the preview is available.
Yes, you can use JavaScript in custom policies. See this sample: active-directory-b2c-advanced-policies.
PlayerProfileUpdate.html
<script src="https://wingtipb2ctmpls.blob.core.windows.net/wingtiptoys/js/analytics.js" />
<script src="https://wingtipb2ctmpls.blob.core.windows.net/wingtiptoys/js/selfasserted-playerprofileupdate.js"></script>
I don't know for sure about the button click redirect. On the surface, if you can use JavaScript then you should be able to do this.
I am working on a project where i have to use a signup/sign-in policy to create a custom html page which is working fine. Now the requirement is We need to fill the form dropdown field with some dynamic data from our database.
Since we can't use iframes or javascript with azure b2c..is there a way to manipulate input tag thats rendered in
<div id="api"></div>
if not is there any other strategy to populate dynamic data into these custom attributes without typing them in manually into azure policy? perhaps any powershell command? or Azure API such as graph api?
maybe this links helps you:
https://learn.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-customize-ui-custom
The important part is the third note:
For security reasons, the use of JavaScript is currently blocked for customization. To unblock JavaScript, use of a custom domain name for your Azure AD B2C tenant is needed.
BR