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.
Related
My business has the requirement of doing below changes while still using Azure blue template in Azure B2C's login page. Can someone point me in the right direction on how to achieve this?
B2C login page
If you need styling customization you need to go with your own template. If you want to be as close to the default one provided then you need to download it, change and use as your custom one. To do that just open Developer Tools in the browser, open your user flow and find something similar to this (image below) in the Network tab of Developer Tools:
Just double click it and the new page with template used with your flow will open. Just save it as HTML and you are free to go. Don't forget about checking any extenal references (CSS, JS, etc). Depending on what will you be changing you might want to download them and host on your own as well.
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 the ADB2C user registration flow you have an picture on the left & the form on the right. Is there an easy way to change the picture on the left? I don't want to redesign the whole page.
Full customization which includes your own HTML/CSS is available for all the Azure AD B2C user flows including the "sign-up or sign-in policies" which offers a combined - registration and login - policy.
The "sign-in" policy type is the only one that offers the ability to customize via the "company branding" feature which needs only a picture upload.
All other flows require upload of HTML/CSS content. A template is available. Full customization is documented here: https://learn.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-ui-customization
Page UI Customization is under Policy->Edit policy->Page UI Customization->Select page->provide source URI
Update
How you get to Company Branding has changed, see this SO Answer.
Previous
Yes. Go to Users and Groups -> Company Branding -> Edit -> Sign-in page background image.
I couldn't find an official documentation on learn.microsoft.com/azure/active-directory-b2c to reference, unfortunately.
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