I have been building an Azure B2C Test System and have customised the login page as per the guide here. Is there any way to change the order of the Elements so that the Local Sign-in option is on the top or bottom?
Also is there a way to make a profile edit policy use the Sign-Up/Sign-In login page style? e.g. 3rd Party Identity Providers at the top and a email\username and password button at the bottom.
Here is how it currently Looks:
Identity Provider Order
The order in which the buttons for different identity providers are shown in Azure AD B2C is based on the order in which they are saved. If you select multiple identity providers and then save, they will be added in a seemingly random order. However, if you add one (say Facebook), save your changes to the policy, and then add another (say Google) and save. They will be displayed in that order. This also applies for the Local Accounts button in the policies that show such button.
In the case of Sign-up/Sign-in, the section for local accounts will always be displayed at the bottom and there is currently no way to control this via Azure AD B2C.
You can leverage hacky CSS to do flip these two sections, but beware that this is a hack and can break if at any time the html elements change.
div#api { display: table }
.social { display: table-footer-group }
.localaccount { display: table-header-group }
You should probably request this as a first class feature via the Azure AD B2C UserVoice forum
Related
I would like to show Identity providers dynamically based on the tenant[ i.e OIDC domain_hint] during the Azure B2C Sign In user journey. I have referred several examples on custom policies, however unable to find a way to display/hide an IdP based on tenant. I was able to use this good example to do Home Realm discovery in custom policy using an Azure Function, but it doesn't show 'list of IdP' applicable for the tenant/domain. Other SO questions, that came close to this but didn't answer are 1, 2. Even if I serve custom HTML file from blob storage, how to show only certain Identity providers and hide some based on the tenant/domain_hint ?
Depending on the number of domains/tenants permutations, you could put that logic on the application side to execute different PolicyID's. This is assuming the number is low therefore it would be a policyID : IdPs mapping.
This is a bad solution if you have a HIGH volume of hints.
Alternatively, you could perform an API call via JavaScript to delegate populating the list of Identity Providers. Then, it would execute another self-assertive page that would trigger that specific identity provider. The flow would look like:
App (passes domain hint)--> B2C login page (JavaScript REST API on page and request list of IdP's based on previous domain hint) --> 2nd Self-assertive page (value passed from first page to initiative the correct IdP) --> IdP pages load.
You can adjust the logic in different ways to meet your needs.
You could store the tenant in a claim using claim resolvers, then have an orchestration step for each possible combination of IdPs you want and use preconditions on those steps to only execute them depending on the tenant. Hopefully that works.
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'm implementing Azure AD B2C in my public facing app and with this approach, new user registration is essentially taking place "outside" of my app on Azure.
How can I enforce users agreeing to my terms and conditions? In other words, I'd like there to be a checkbox and it must be mandatory for users to check it to proceed with the registration process. If the user doesn't check the checkbox, registration should not take place.
I understand through UI customization I can change the appearance of the registration page and there can be a highlighted statement that reads:
By clicking Register, you're agreeing to our terms and conditions.
I think it would be better if there was a mandatory checkbox though. Is this doable with Azure AD B2C?
UPDATE:
In Step 5, I'm not seeing "Custom Attributes" -- here's the screen shot:
UPDATE 2:
Not allowing me to save after uploading json file for override.
You can create a custom attribute that prompts for the end-user agreement.
E.g. Create a custom attribute called AgreedToTermsAndConditions of type String.
For built-in policies
To display this custom attribute as a checkbox that must be checked during sign-up:
In the Azure portal, open Azure AD B2C and then select Sign-up or sign-in policies.
In Sign-up or sign-in policies, select the sign-up or sign-in policy.
For the selected policy, select Edit.
In Edit policy, select Sign-up attributes.
In Select sign-up attributes, select the custom attribute and then select OK.
In Edit policy, select Page UI customization.
In Page UI customization, select Local account sign-up page.
In Local account sign-up page, select the sign-up attribute.
In Edit attribute, select No for Optional and CheckboxMultiSelect for User input type and then select OK.
In Local account sign-up page, select OK.
Repeat steps 7-10 for Social account sign-up page.
In Page UI customization, select OK.
In Edit policy, select Save.
In Edit policy, select Language customization.
In Language customization, select Enable language customization if it isn't already enabled.
In Language customization, select the default language.
For the selected language, expand Local account sign-up page and upload a resource file such as the following example.
Repeat step 16 for Social account sign-up page.
Repeat steps 16-18 for other enabled languages.
An example of the resource file:
{
"LocalizedCollections": [
{
"ElementType": "ClaimType",
"ElementId": "extension_AgreedToTermsAndConditions",
"TargetCollection": "Restriction",
"Override": true,
"Items": [
{
"Name": "I agree to your terms and conditions",
"Value": "True"
}
]
}
]
}
(Phew!)
You can also set the item value to a date string (e.g. "2018-04-01") or a version string (e.g. "v1") if you are wanting to store the date or version of the terms and conditions.
For custom policies
Updated on 23 May 2018
The Manage user access in Azure AD B2C article describes how you can prompt for the end-user agreement during sign-up and, subsequently, during sign-in if the end user hasn't accepted the latest or new terms and conditions.
I'm using an Azure B2C tenant to store users. At present I have to go through the graph API to retrieve the user details from my MVC application.
The annoying thing however is that the most of the details I'm interested in are already contained within the list of claims within the ClaimsPrincipal.Current object (in this case name, job title and email), so for the most part this call isn't actually needed. Department is the only one not included by default and is the only reason I'm making the call. In addition going through the graph API seems to slow things down enormously when running the site on Azure.
Is there any way of including the department in the claims list contained within the ClaimsPrincipal.Current object so I can skip the call to the graph API entirely?
If I understand your question, it sounds like you are asking how to include additional claims in the ID token returned by Azure AD B2C. The claims returned are configured on a per-policy basis.
Navigate to the B2C features blade on the Azure portal.
Click All policies.
Click your sign-up policy to open it. Click Edit at the top of the blade.
Click Application claims and select the attribute. (for example "Department") Click OK.
Click Sign-up attributes and make sure "Department" is one of the attributes collected from the user.
Click Save at the top of the blade.
Click "Run now" on the policy to verify the consumer experience. You can use "http://jwt.ms" as the redirect URI to inspect the token returned by Azure AD B2C. You should now see "Department" in the list of attributes collected during consumer sign-up, and see it in the token sent back to your application.
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