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.
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 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.
Is there an elegant way to use a single set of ADB2C IEF custom policies across multiple environments (eg dev/test/prod)?
This issue has arisen as we have designed two custom IEF policies - one for signin, and separately one for signup
On the signin page ADB2C tries to generate a url for signup, but because we have a custom policy for signup we need to rewrite this URL in javascript so that it points to a different url
(as described in these q/a's) :
B2C - How to override sign up now link (custom policy)
Msal 2.0 - how to generate Sign Up link with Azure B2C?
But now we start hitting more issues. We can't rewrite the url to myapp.com/signup, because we need to rewrite it based on the environment. It needs to rewrite to dev-app.com/signup or test-app.com/signup etc
So the only way I can see to fix this is to use separate ContentDefinitions for each environment, each with customised javascript.
But then I also need individual policies for each environment so that each policy can use a specific content definition file!
Ugh. Is there an easier way than trying to maintain what should really be one set of policies across three sets of environments (which ends up becoming 6 sets of policies, content definition files etc)?!
Fantasising a bit - I think ideally we'd configure MSAL to send the environment to the policy somehow, and then at least make that variable available in the policy files so that they could perhaps fetch the content definition files with a query parameter?
<ContentDefinition Id="api.signin">
<LoadUri>https://storage.com/adb2c/signin-{Culture:RFC5646}.html?env={environment}</LoadUri>
Yes, use DevOps and Azure Pipelines.
You can then search and replace the variables that you need to change across environments.
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