I am trying to customize my Azure B2C Policy sign up sign in policy. I followed this article. I created my custom sign up sign in page and I have the sign in page the way I want it to look, but when I click "Sign up now" a form for the user information shows with default styling. How do I style this page? I wish to reuse the html form.
As described by Customize your policy, you must:
Select Sign-up or sign-in policies, select your built-in policy, and then select Edit.
Select Page UI customization.
Select Local account sign-up page, set Use custom template to Yes, and then enter the absolute URL to your HTML file in the Custom page URI field.
Related
Is it possible to add a button to a screen on a custom policy, so that if a user clicks on it, they are redirected to the start of a different custom policy?
This is not possible directly through custom policy logic.
You need to add a link to your app using custom HTML, eg myapp.com/launchPolicy2, and put this link on your login page. When the user clicks this link, the user is sent to your app, and the app should start a new authentication flow using the new authority URL (which contains the new B2C policy Id).
Use this guide to add custom HTML:
https://learn.microsoft.com/en-us/azure/active-directory-b2c/customize-ui-with-html?pivots=b2c-custom-policy
According to the document https://learn.microsoft.com/zh-cn/azure/active-directory-b2c/customize-ui-overview, I can use to introduce ad b2c users I want to add other content in , such as an input box for inputting other information. How should I do it?
The "edit profile" policy has 3 possible page customizations exposed through the Azure portal:
When invoking this policy, the first page displayed to the user is the IdP selection page. If, on this page, the user chooses the "local account" identity provider, the next page shown is a local account sign-in page.
This sign-in page has the default Microsoft branding, and since it's not listed in the customization blade, I don't know how to customize it:
How can we customize the UI of this local account sign-in page when it's shown as part of the "edit profile" policy?
A new user journey SignInV2 is in private preview. This will be fully customizable signin user journey. The user journey can be tried from https://aka.ms/b2cnewportal
For local account opt-in to signinv2, please mail to aadb2cpreview#microsoft.com
EDIT
A ProfileEdit V2 user journey will also be rolled out soon. That would be fully customizable.
In the B2C tenant, you cannot change the Microsoft branding in the "edit profile" policy.
From the shown picture, in the Page UI customization, you can only change the custom page URI, there is no option to change the company branding.
If you want to change the company branding, you can make it in Company Branding.
I'm implementing Azure AD B2C in my public facing app and with this approach, new user registration is essentially taking place "outside" of my app on Azure.
How can I enforce users agreeing to my terms and conditions? In other words, I'd like there to be a checkbox and it must be mandatory for users to check it to proceed with the registration process. If the user doesn't check the checkbox, registration should not take place.
I understand through UI customization I can change the appearance of the registration page and there can be a highlighted statement that reads:
By clicking Register, you're agreeing to our terms and conditions.
I think it would be better if there was a mandatory checkbox though. Is this doable with Azure AD B2C?
UPDATE:
In Step 5, I'm not seeing "Custom Attributes" -- here's the screen shot:
UPDATE 2:
Not allowing me to save after uploading json file for override.
You can create a custom attribute that prompts for the end-user agreement.
E.g. Create a custom attribute called AgreedToTermsAndConditions of type String.
For built-in policies
To display this custom attribute as a checkbox that must be checked during sign-up:
In the Azure portal, open Azure AD B2C and then select Sign-up or sign-in policies.
In Sign-up or sign-in policies, select the sign-up or sign-in policy.
For the selected policy, select Edit.
In Edit policy, select Sign-up attributes.
In Select sign-up attributes, select the custom attribute and then select OK.
In Edit policy, select Page UI customization.
In Page UI customization, select Local account sign-up page.
In Local account sign-up page, select the sign-up attribute.
In Edit attribute, select No for Optional and CheckboxMultiSelect for User input type and then select OK.
In Local account sign-up page, select OK.
Repeat steps 7-10 for Social account sign-up page.
In Page UI customization, select OK.
In Edit policy, select Save.
In Edit policy, select Language customization.
In Language customization, select Enable language customization if it isn't already enabled.
In Language customization, select the default language.
For the selected language, expand Local account sign-up page and upload a resource file such as the following example.
Repeat step 16 for Social account sign-up page.
Repeat steps 16-18 for other enabled languages.
An example of the resource file:
{
"LocalizedCollections": [
{
"ElementType": "ClaimType",
"ElementId": "extension_AgreedToTermsAndConditions",
"TargetCollection": "Restriction",
"Override": true,
"Items": [
{
"Name": "I agree to your terms and conditions",
"Value": "True"
}
]
}
]
}
(Phew!)
You can also set the item value to a date string (e.g. "2018-04-01") or a version string (e.g. "v1") if you are wanting to store the date or version of the terms and conditions.
For custom policies
Updated on 23 May 2018
The Manage user access in Azure AD B2C article describes how you can prompt for the end-user agreement during sign-up and, subsequently, during sign-in if the end user hasn't accepted the latest or new terms and conditions.
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.