Azure AD B2C allows configuring "Company branding" in the UI. I can upload a Banner Logo, Background Image, etc.
However, when using a custom IEF policy, is there a way to reference the uploaded resources in the custom policy?
Here is an example of the reference in a default B2C HTML template:
<img class="companyLogo" data-tenant-branding-logo="true" src="https://login.microsoftonline.com/static/tenant/templates/images/logo.svg" alt="Company Logo">
If I look at the built in user flows and how they reference the image, there is a very complex URL:
<img class="companyLogo" data-tenant-branding-logo="true" src="https://aadcdn.msftauthimages.net/dbd6a2dd-0-ioujrdaqa9-fuefw74nl6mc2sieecnt6keujpvcwy/logintenantbranding/0/bannerlogo?ts=638528323204335100" alt="Company Logo">
I know I can upload the resource to a static storage account and reference the URL directly, and I could probably reference the complex URL shown in the built in flow above. But, is there a supported, straight forward method to accomplish what I am asking?
I discovered that it doesn't matter what you put in the Image URL of the custom HTML. The key is to use the following HTML attributes to enable custom branding inside the custom HTML:
<img data-tenant-branding-background="true" />
<img data-tenant-branding-logo="true" alt="Company Logo" />
It is described here: https://learn.microsoft.com/en-us/azure/active-directory-b2c/customize-ui-with-html?pivots=b2c-custom-policy#use-company-branding-assets-in-custom-html
Related
I am currently creating sign-up(CombinedSignInAndSignUp) page using custom policies. I was wondering if it is possible to have a sign-up page with the social IDP selection (Facebook, Linkedin) and SignUpWithLogonEmailExchange button.
Based on the Social IDP you are selecting, you have to create different technical profiles for each.
Technical profiles are the mechanisms that are used to interact with the party (Facebook/LinkedIn) defined within ClaimsProvider definition whereas ClaimsProvider defines a party that the custom policy interacts with.
To configure LinkedIn as an identity provider:
In the extension file of your policy, define a LinkedIn account as a claims provider by adding it to the ClaimsProviders element.
Open the SocialAndLocalAccounts/TrustFrameworkExtensions.xml file in your editor and find ClaimsProviders element
If ClaimsProviders element does not exist, add it under the root element
Add a new ClaimsProvider
Replace the value of client_id with the client ID of the LinkedIn application and Save.
To configure Facebook as an identity provider:
In the SocialAndLocalAccounts/TrustFrameworkExtensions.xml file, replace the value of client_id with the Facebook application ID:
<TechnicalProfile Id="Facebook-OAUTH">
<Metadata>
<!--Replace the value of client_id in this technical profile with the Facebook app ID"-->
<Item Key="client_id">00000000000000</Item>
Please find below links if they are helpful,
References:
Ref1
Ref2, Ref3, Ref4
I have two different redirect URIs in my webapp like localhost:4200 and localhost:4201. Trying to have single-sign-on for these two. Based on this document https://learn.microsoft.com/en-us/azure/active-directory-b2c/session-behavior?pivots=b2c-custom-policy#configure-azure-ad-b2c-session-behavior, I
changed my session behavior and SSO configurations and added a UserJourneyBehaviors element inside of the RelyingParty element. It still asking to sign-in localhost:4201, though i have signed in localhost:4200
<UserJourneyBehaviors>
<SingleSignOn Scope="Tenant"/>
<SessionExpiryType>Absolute</SessionExpiryType>
<SessionExpiryInSeconds>1200</SessionExpiryInSeconds>
<ScriptExecution>Allow</ScriptExecution>
</UserJourneyBehaviors>
I am working on a IEF Policy that supports custom TOTP. I am using the following sample code as basis for my work: https://github.com/azure-ad-b2c/samples/tree/master/policies/custom-mfa-totp
I have created the Service that supports the TOTP requests that IEF will issue based on the policy definitions.
My problem is I get the following error when uploading the IEF policy
Validation failed: 1 validation error(s) found in policy "myPolicyName" of tenant "myb2cTenant.onmicrosoft.com".
Please use page contract in content definitions when enabling JavaScript.Please use page contract in content definitions when enabling JavaScript.
To this point, I am basically just modifying the sample policy files to include the specific information to work within my system. The sample policy files are divided into two: TrustFrameworkExtensions.xml and SignUpOrSignIn.xml
Loading the Extension file works, but I get the previously mention error when attempting to load the SignUpOrSignIn file.
I have found a couple of other StackOverflow posts referring to similar errors and the recommended solution does not solve the problem. The recommended solution suggest updating the element with the corresponding value as described here:Content Definitions and making sure that the Relying party allows JS execution as described here Allow JS execution
After that this is what the ContentDefintion looks like for my Policy:
<ContentDefinition Id="api.selfasserted.appfactor.registration">
<LoadUri>https://myurl/totp-ui/selfasserted-appfactor-registration.html</LoadUri>
<RecoveryUri>~/common/default_page_error.html</RecoveryUri>
<DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
<Metadata>
<Item Key="DisplayName">App Factor</Item>
</Metadata>
</ContentDefinition>
Even with these updates the Policy still fails to load, and I am out of things to try or even troubleshoot.
Any ideas about what may be the cause for that error?
With special thanks to Dale Kirby, I now have the solution to this problem.
The error was not caused by the configuration in this TechnicalProfile that is provided in the sample's TrustFrameworkExtensions.xml.
<TechnicalProfile Id="AppFactor-VerifyTotpWebHook" ->
The actual reason for me getting the error was that several of the -TechnicalProfile- elements referenced from my TrustFrameworkBase.xml file, had the old URI in their DataURI (These Technical-Profiles are referenced by the TrustFrameworkExtensions.xml provided in the sample).
Once I updated all the outdated -DataURI- values in the TrustFrameworkBase.xml and TrustFrameworkExtensions.xml the error went away. The correct URIs are listed here: Page layout URIs
I have some questions on customization of the UI for B2C portals. I've looked at both of the following links:
https://learn.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-customize-ui-custom
https://learn.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-ui-customization-custom
But it doesn't seem like my question is answered from those documentation links.
Question 1: What I'm wondering is if it's possible to customize the "Sign in with your social account" string? I looked through the policy XML files and did not see that string being generated anywhere, and it did not look like I could customize it through one tags of the block in the TrustFrameworkExtensions.xml file. So is this string editable? I attempted to add a Metadata Item tag who's key was "language.intro" hoping that would override the string on the "api.signuporsignin" ContentDefinition block...but it did not override.
Question 2: Somewhat related to the above...is it possible to customize the display strings of the built-in fields for the Sign Up / Profile Edit pages? For example, we would like "Surname" to be "Last Name" and "Given Name" to be "First Name". Is it possible to customize those display name strings, without creating all new/custom fields to get the display name we want?
Thanks for the help, I appreciate it!
I have customized that text using Localization.
<ContentDefinition Id="api.signuporsignin">
<LoadUri>~/tenant/default/unified.cshtml</LoadUri>
<RecoveryUri>~/common/default_page_error.html</RecoveryUri>
<DataUri>urn:com:microsoft:aad:b2c:elements:unifiedssp:1.0.0</DataUri>
<Metadata>
<Item Key="DisplayName">Signin and Signup</Item>
</Metadata>
<LocalizedResourcesReferences>
<LocalizedResourcesReference Language="en" LocalizedResourcesReferenceId="api.signuporsignin.en" />
</LocalizedResourcesReferences>
</ContentDefinition>
....... then add Localization element to right before close tag of the BuildingBlocks.
<Localization Enabled="true">
<SupportedLanguages DefaultLanguage="en" MergeBehavior="ReplaceAll">
<SupportedLanguage>en</SupportedLanguage>
</SupportedLanguages>
<LocalizedResources Id="api.signuporsignin.en">
<LocalizedStrings>
<LocalizedString ElementType="UxElement" StringId="social_intro">Sign in with your company account</LocalizedString>
</LocalizedStrings>
</LocalizedResources>
</Localization>
The "Sign in with your social account" HTML is just sample HTML from B2C. To replace this, you can save your custom HTML page in Azure Blob Storage and then follow these steps:
Sign in to your tenant on the Azure portal and navigate to the B2C features blade.
Click Sign-up or sign-in policies, click your policy and click on Edit (for example, "b2c_1_sign_up_sign_in").
Click Page UI customization and then Unified sign-up or sign-in page.
Toggle the Use custom page switch to Yes. In the Custom page URI field, enter https://wingtiptoysb2c.blob.core.windows.net/b2c/wingtip/unified.html. Click OK.
Click Local account sign-up page. Toggle the Use custom template switch to Yes. In the Custom page URI field, enter https://wingtiptoysb2c.blob.core.windows.net/b2c/wingtip/selfasserted.html.
Repeat the same step for the Social account sign-up page. Click OK twice to close the UI customization blades.
Click Save.
For reference, see the full instructions here: https://learn.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-ui-customization-helper-tool
You can do the same thing to customize your Sign Up/Profile Edit pages.
Sounds like this functionality is not supported out of the box, and JavaScript isn't (yet) supported either, our designer found a workaround that seems to work well. Hiding the "intro" div and then adding a div in place and using the CSS "content" attribute to add in our own custom text.
Here's the CSS:
/*this hides the default intro text and replaces with our own text*/
.intro {display: none;}
.social:before {
content: "our custom text";
font-size: 1.2em;
line-height: 2em;
}
I'm using custom policies on my Azure AD B2C app. And I am using a custom UI passing a reference to a UI hosted on my server like this on my sign-up/sign-in policy:
<BuildingBlocks>
<ContentDefinitions>
<ContentDefinition Id="api.signuporsignin">
<LoadUri>https://MyURL/index.html</LoadUri>
</ContentDefinition>
</ContentDefinitions>
</BuildingBlocks>
This is working. But now I want to add a HTML link element to my custom UI with the URL of my Privacy Policy and that element is not showing up when I execute my policy. Everything is showing up except that link.
Could it be some cache on Azure that is using the old custom UI? Or is something I'm missing?
Try:
<div id="api">
<!-- Leave this element empty because Azure AD B2C will insert content here. -->
</div>
<!-- URL goes here, outside of the API div above -->
Privacy policy