I prepared custom HTML pages for user sign up and multifactor authentication. Then uploaded those pages into Azure storage blob.
Next I edited signup policy of Azure B2C tenant for user signup page customization, and paste storage blob URL of custom html page what I uploaded earlier into storage blob.
When I run the policy the browser will display the signup page like this below. But I made signup page and MFA page very nice. And added CSS content inside my HTML pages only.
How can I use customized signup or MFA pages instead of Azure B2C provided?
As pointed out by Harsh Aseeja, your page is already rendering the customized page. You need to check with the browser's dev tools to identify the css styling that took effect in your html elements. Since these elements are just injected in your page, check for element ids and its default css styling. Chances are, if you used classes to style your page, those will be overwritten by a default style for element ids.
You can try editing the css styling on the fly with the dev tools, and when your satisfied with your changes port them to your css file(Or the css inside your HTML page) and update the relevant files in your azure storage blob.
Seems like you are getting the customized HTML page instead of the generic Microsoft login page. You can use the dev tools in your browser to tweak the CSS to get the desired UX you want. Also you can add explicit CSS per input box or button to make sure that your CSS is being picked up and not being overridden by the CSS coming down from the Microsoft login page.
Related
I’ve created a b2c signup flow through custom policy and the user journey is working fine. But, while clicking the ‘Signup’ icon there is a bit ‘flicker’ with a message displaying as ‘what is this?’, On the side of each field while loading a complete registration page. For better user experience, is there any customization required for b2c html or in a custom policy to override this behavior. I’m assuming this may be a b2c-html late loading style sheet.
Assuming you're customising the UI with your own HTML page templates then try adding a data-preload="true" attribute to your CSS (and JS).
If that still doesn't work then I'd recommend setting your HTML page template body content to be hidden by default, B2C should then automatically unhide it when page load is complete but if it doesn't you can use JS to unhide it yourself on document ready.
We have a web application that uses Azure ADB2C to authenticate users. Therefore we currently use a custom landing page with a login button that redirects the user to Azure ADB2C login page. We use company branding for logo and background on login page.
The landing page is branded for each of our customers and can be reached through different Urls:
https://www.mypage.com/login/customer1 -> show background image and logo of customer 1
https://www.mypage.com/login/customer2 -> show background image and logo of customer 2
My question is if there is any way to directly open Azure ADB2C login page and display background image and logo of the customer passed in Url. In other words changing company branding at runtime or something like this.
Azure AD B2C supports dynamic page customization based on query parameters that are sent to the login url.
You can see how to configure dynamic page customisation here.
And in your application, you can pass custom query parameters in the login url, see here for .Net Core, see here for SPA apps.
I have gone through this link for customizing the user login page in Azure AD, but on one documentation page, microsoft have shown login page like this
How can we achieve this ?
The page you've linked to (link) walks you through how to set up a custom design and associate that to your B2C journey.
You need to write your own HTML page(s) and CSS then host that yourself along with any images, fonts, etc just like you would with a normal web page, we normally refer to those as page templates.
You also need to specify in B2C that your policies will use those page templates when it's rendering its own pages for your users and the linked page walks you through that. Your page templates will need a specific element in them (<div id="api"></div>) that B2C will insert its content into (based on your B2C policies) when it renders its pages using those templates.
In the example you've shown in your screenshot there will be a HTML page that has that image set as its background (likely using CSS) and a white box in the center for B2C to insert its content into. It will then use CSS (and maybe some Javascript) to style the content B2C inserts onto the page.
If you want to see exactly how that page is built you can go to the Woodgrove Demo site, sign in with your personal account and that will take you to that page which you can then inspect in your browser.
If you have your browser's network window open when you sign in with your personal account then you should see B2C loading that page template from somewhere after its initial page load. That's because it then uses Javascript to combine that template with its page content to render the final page.
I have a link on my website that takes a user to the Azure AD edit profile page. I have customized that page by adding 2 links at the bottom. One is for the user to change their password and the other is to update a phone number. These are 3 different policies within Azure AD. When I initially link to the page from my site I am sending a clientID and a redirect_uri in the query string. Unfortunately this is getting converted to a csrf_token and those query string parameters are gone so I don't have access to them to include them in the change password and change phone number links. When the user clicks on the links obviously they fail. How do I link someone from one custom policy page to another page in Azure Active Directory? My custom page uses javascript, css, and html. No server side code other than what Microsoft injects.
You should have a link back to your application, and your application should understand that this route starts a new authentication journey with the appropriate authentication library with the desired policyId for this URL path. Do not link B2C journeys directly from within your custom HTML, you go via your application.
I have created an app on facebook developer account and need to provide custom iframe to each page tab of the pages. I have no clue how to do that.
I simple words, I need to provide different url (depending upon certain parameters) for iframe of page tab of each page that have installed my app (NOT MY SECURE PAGE TAB URL).
The default iframe url that will be loaded if someone installs my app is the one that I have mentioned in my SECURE PAGE TAB URL field. But I need to provide a different iframe url depending upon certain conditions. So, not my secure page tab url.
How to do that?