A title bar is displayed in the web view activity when using Azure AD B2C authentication service with MSAL in Xamarin forms. I have attached a screen shot of it running on an android phone below. I have the following questions :
1) How do I remove it? Is it even possible?
2) Also Is it possible to customize the top bar? Change the colors, font size etc. If so how?
3) How do I change the text of the top bar? Is localization possible for the text in the top bar based on user's language settings in the app?
Thanks a ton in advance!!
I finally used a custom web view instead of MSAL and checked the web view's URL whenever it changed using PropertyChanged(). If the web view contains the redirection URL then I hide the web view and parse the token that is provided along with it to get the result of the user's action in ADB2C.
Related
Is it possible to develop a custom aura/lwc component that helps each user to set up his salesforce app main page when he first open the app?
I know that it is possible to do that through the app edit but unfortunately our client need to do it through a custom component so he can select among drop down list one page and when he click save it will shows him the selected page as a main page when he opens the salesforce mobile app.
We have a web application that uses Azure ADB2C to authenticate users. Therefore we currently use a custom landing page with a login button that redirects the user to Azure ADB2C login page. We use company branding for logo and background on login page.
The landing page is branded for each of our customers and can be reached through different Urls:
https://www.mypage.com/login/customer1 -> show background image and logo of customer 1
https://www.mypage.com/login/customer2 -> show background image and logo of customer 2
My question is if there is any way to directly open Azure ADB2C login page and display background image and logo of the customer passed in Url. In other words changing company branding at runtime or something like this.
Azure AD B2C supports dynamic page customization based on query parameters that are sent to the login url.
You can see how to configure dynamic page customisation here.
And in your application, you can pass custom query parameters in the login url, see here for .Net Core, see here for SPA apps.
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.
My business has the requirement of doing below changes while still using Azure blue template in Azure B2C's login page. Can someone point me in the right direction on how to achieve this?
B2C login page
If you need styling customization you need to go with your own template. If you want to be as close to the default one provided then you need to download it, change and use as your custom one. To do that just open Developer Tools in the browser, open your user flow and find something similar to this (image below) in the Network tab of Developer Tools:
Just double click it and the new page with template used with your flow will open. Just save it as HTML and you are free to go. Don't forget about checking any extenal references (CSS, JS, etc). Depending on what will you be changing you might want to download them and host on your own as well.
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