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
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.
I want to control the elements that are generated dynamically by the azure b2c.
Like change the element <p> tags to <h2> on email signup page,
so that "Your Details" appear inside a header tag.
In the Azure AD B2C There is a way to customize the interface of user experiences for sign-up, sign-in, and profile editing. Please go through the document for more information.
We can use javascript in the B2C but for your scenario it wont work. As per the Guidelines we should change the html elements order using javascript. Please go through the document it may help you for future 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.
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.
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