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.
Related
Trying to add an additional claim to our custom Sign In page on Azure ADB2C (using custom policies) to hold a captcha response token. But the custom policy won't render the element on the page.
I've tried the sample here:
https://github.com/jasjeetsuri/B2C-IEF-Custom-Policies/tree/master/LocalAccounts%20-%20Captcha%20Integration
But the additional field doesn't get rendered on the UI. Everything else is working, the captcha appears on the UI and when I log in I can see my validation API being called with the default value 0. I just can't get a DOM element to be rendered by the policy so I can set the response token.
I've tried:
Adding a custom User Attribute (e.g. captcha) and referring to it as extension_captcha
Updating the ContentDefinition to the latest
Using with the Required attribute set to True, this actually gave me an error message to say the value was missing however the field was never rendered on the page
Changing the CombinedSignInAndSignUp to ClaimsExchange but this reverted the custom Sign In UI back to the Microsoft default layout
I've gone through documentation here:
https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-user-input?pivots=b2c-custom-policy
and here:
https://learn.microsoft.com/en-us/azure/active-directory-b2c/user-flow-custom-attributes?pivots=b2c-custom-policy
But no luck.
Does anyone know what the minimum config is to get this working?
I made the sample this way because it doesn’t work for combined sign in and sign up page. You would need two seperate policies and deep link between them.
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 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 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.
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.