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.
Related
I want to add a link directing users to our support to the Azure B2C Login form.
I don't see any way of doing it.
There is a "support" URL in Application Manifest but
it doesn't seem to be used (at least it's not documented)
it's displayed when consent is asked for the application, not on the login form
Is it possible to add a custom link to the standard layouts of Azure B2C or do I need to use a the HTML templates approach?
Even using the HTML templates I think I will only be able to add the link somewhere else on the page, not to the login form.
The best way to do this is the HTML form as you mentioned. You can add the link on the login form. You'll just need to add a div with your link. If you're having trouble getting it to work let me know and I can help you out.
Best,
James
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 need to have my signup page of angular app which should hit microsoft b2c signup service . Please let me know if it is possible. As per the documentation we can apply the css and javascript on top and bottom of the signup page provided by b2c but we cannot perform any customizations on elements inside
Full and complete instructions of what and how can be customized is described in the document.
Regarding the elements you are talking about, you can create custom attributes in the B2C and use those attributes in the signup policy
Relevant document reference
I've followed the steps for UI customization referenced here:
I'm able to successfully register and login. The issue i'm experiencing is that the input:invalid css classes are being added to all registration page inputs when I access the SignUp policy directly resulting in all input fields to have an error state:
However, if I access the page by the SignInSignUp policy (i.e. clicking on register link on custom login page), this does not occur.
Here is the SignInSignUp Policy URL, and this is the SignUp Policy Url
Once they finally allow JavaScript, you can work around this.
I suspect the problem is related to this.
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.