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
Related
We have a problem where individual user are registered to our application but with permission to see a single set of data. These are all setup as local accounts.
At the moment each user is associated with a single set of data.
We now need to be able to link different sets of data to the same user.
After or during login the user would be presented with the options that are linked to their account and it would remember this throughout their session.
We would also need to be able to add new permissions to an account through an API.
What is the best way of achieving this through Azure B2C ideally without using custom policies if possible.
If you want to insert a page during the authentication journey (sign in) which reads the users access ability, and then allow the user to choose one of these options, and then issue that choice in the token, you will need a custom policy. I am assuming that this list could be different for each user ("options that are linked to their account").
If that list of options is stored on the user object, then it needs to be read from the user, and a dynamic radio box selection be presented to the user.
You need to create a comma delimited list and insert it into a claim, if its already stored as comma delimited, or some other delimited list, then you are already good to go. Otherwise youll need to have B2C send the data to a Rest api to build a comma delimited list.
That claim needs to be shown on the page after 'sign in' in a text box via B2C (hidden with CSS), where javascript on your custom HTML page (configured in B2C) builds a radio box from that list in the hidden text box.
Then the javascript needs to record the choice into another B2C rendered text box. You should then verify at B2C or via Rest api whether the submitted value was valid.
Then issue that value into the token.
I would like to rearrange the order of Html Elements which is generated by Azure B2C Sign up page built in attributes.
Like order
Display Name
Family Name
City
State
Country
Please help me by providing the way of rearranging with tab order for accessibility.
You can change the field order by:
Editing the built-in policy
Selecting Page UI customization
Selecting Local account sign-up page
Moving the Sign-up attributes list items up and down using the drag icon to left of the attribute name.
Building on the first answer, if anyone else stumbles across this issue:
Go to your Azure AD B2C
Select User Flows (policies)
Select the policy you wish to edit
Select Page layouts
Select the layout you wish to edit (mine was called Local account sign up page
Edit and re-order the fields as needed
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.
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
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