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
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 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.
I have custom policies for sign up, sign in and reset password. All with custom ui.
I want to have different CSS styles and show different elements for different webs that use the sign up policy. Should I create different sign up policies with different custom UIs to accomplish this?
Also, I want to change the position of the UI fragments embedded by Azure B2C. Is css the only way to change this?
If you are using base b2c policies, then the only way is to create multiple sign-up/in policies. But please keep in mind that there's a limit to number of policies you can have in your b2c tenant (currently 100 policies). So if you want to do that also for reset password or any other user journey you will hit that really fast.
So... looking at the tags I can see Identity Experiance Framework, in that case you can use sample provided by MS - active-directory-b2c-ui-customization-custom-dynamic and change your UI based on the additional query parameter that is being sent to policy.
As for moving embedded elements inside your <div id="api"></div> CSS is the standard way. But you can look at the b2clogin.com program that is currently in public preview but it is not recommended to be used for any production use.
In Azure AD B2C, I notice that into the Page UI customization for a policy, we can include some HTML code into the input field for text labels when we edit attribute (in the picture example for chekbox). Do you think it's a potential hack and Microsoft will block this behavior or is it an expected case ?
The ability to add HTML code in the input field for text labels/values is not intended to be a feature and not the intended approach to achieve UI customization. You should not rely on this as validation that prevents this can be added at any point.
To customize the UI today, you can provide your own page with a div container where Azure AD B2C will display its controls. You can certainly use CSS to further customize the look and feel of these fields. Check out this article for more info.
Azure AD B2C is also looking at adding support for custom JS which will give you further control over the UI. You can vote for that item in the Azure AD B2C UserVoice forum to support it and stay up to date on its progress
I'm pretty sure the answer is no, but I'll ask anyway.
According to https://azure.microsoft.com/en-us/documentation/articles/active-directory-b2c-reference-ui-customization/, B2C administrators wishing to customize their UI need to
create well-formed HTML5 content with a <div id="api"></div> element (needs to be an empty element) located somewhere in the <body>. This element marks where the Azure AD B2C content is inserted.
It looks like B2C then inserts the information you configure regarding the profile or other policy into that tag.
If you have some tedious HTML - like for example, a list of all universities in the world - you have to enter this information by hand and cannot sort it.
If you're not familiar with the profile, then the question doesn't make sense. When defining the profile, you can create custom fields. MS controls the UI for these custom fields. In their profile UI customization, you can define the way a field is drawn in HTML as Text, DropDown, CheckBox, or Radio Button. For the last three, you have an extremely simplistic UI for entering your data that populates the options.
So, if you have a field for University (which I do) and you have 4,000 entries for Option (which I do), you have to manually enter each option in their UI in the order you wish it to appear. At a minimum, it would be nice to just import this data into the store in which they are keeping this data. At a maximum, it would be really nice you just draw all this HTML myself in my own CSHTML.
Is it/Will it be possible to render those fields from my own HTML/CSHTML?
Is it/Will it be possible to enter the needed data in an easier to use manner (import, direct database manipulation, etc.)?
You could customize the Azure AD B2C UI. And it is possible to render from yor own HTML. But you cannot use JS in that HTML though.
The HTML should be uploaded in a blob and their url should be referred in the Azure AD B2C policies