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.
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.
My web app doesn't need signup feature. So i am only looking for signin. So i didn't setup anything under signup or sign policies.
I am trying to add custom login page to signin policy in Azure AD B2C. I selected Local Account SignIn as Identity provider. But the option Page UI Customization is not enabled and a lock symbol is shown. There is no validation message or information or tooltip explaining what should i do to unlock this feature. But this feature is enabled under signup or sign policies blade.
Can somebody help me with this.
As stated on the UI customization docs page, sign-in pages (in sign-in and profile edit policies) can only be customized using the company branding feature. The question that spottedmahn linked to in the comments (about changing default picture) provides some useful steps.
UPDATE #2: I am retracting my update of "hiding" the link on sign-up/sign-in. That's because if you just hide the link, a user can still make a call to the signup endpoint directly and create a user account. This is not possible through sign-in policy.
I would suggest using the "Sign-up or sign-in" policy for this, and provide a custom template with you own CSS that hides the sign up link:
.create{
display: none
}
'create' is the name of the CSS class used for the signup link.
I've uploaded a sign-in page background image but it is only applying to my Edit Policy. Shouldn't it apply to all policies*?
Works on Edit Policy
Not working on my Sing-Up Policy
*Assuming I haven't assigned a custom page URI.
Only the sign-in policy and the "sign-in" page of profile edit policies use the mechanism that you have highlighted in your question. All other pages in all B2C policies have their own customization, which is described in another question by Jose Rojas: https://stackoverflow.com/a/46057178/3728123.
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