Is custom login page of Azure Active Directory possible? - azure-active-directory

I'm working on an .NET web application that uses Azure AD as an identity provider. Azure MFA is also used.
However, the user does not want to use the default Microsoft login page. Instead, they want to use a custom login page (hosted by us). It is possible?
Is there exist any API in Azure AD that authenticate user's credential? I tried this: https://azure.microsoft.com/en-us/resources/samples/active-directory-dotnet-native-headless/. But I cannot make it work on a web application.

For this scenario, I recommend Add company branding to your sign-in page in Azure AD. It allows you to customize the appearance of the sign-in page with your company logo and custom color schemes.
But Company branding is available only if you upgraded to the Premium or Basic edition of Azure AD, or have an Office 365 license.
Additional: Building login page and save usernames/password to authenticate with Azure AD in your Application is not recommended.
Hope this helps!

As stated above, the documentation recommends using Company Branding feature for customizing the pages provided by Azure AD.
If even then, if you want to show your custom HTML on Azure AD's login page, it is possible to add custom HTML for the login page.
The requirement is your page should have <div id="api"></div>.
Another requirement is this page should be hosted on CORS enabled, HTTPS public site.
Please refer this blogpost where I have shown how the custom HTML can be used.

Related

How to configure multiple login methods for Azure B2C in react

I am using React to build a login for my web app.
I currently have a login that handles login this way:
I am new to Azure and I don't know how to have the multiple login options like this site does.
Is this an Azure setting or something I need to add to my config file?
Is there a name for each sign in method I can investigate because without knowing the terms I find it hard to find any tutorial on getting both sign in methods to show.
Thanks
You can add additional sign in options like external AD,or social accounts like Google, Twitter, Facebook. Those are called identity providers [aka IdP], any ID provider that supports OAuth or OIDC can be registered with your Azure B2C directory to support this login methods. You can create your own 'user flows' in B2C supporting this, when you want to do anything custom you can author 'custom policies' using XML. Refer the MS doc on userflows, sign-in options.

Unable to set up single sign on for enterprise application in Azure AD

We installed an enterprise application through the Azure AD App Gallery. But when we try to config the Single Sign-on, it keeps saying:
The single sign-on configuration is not available for this application
in the Enterprise applications experience. HubSpot is a multi-tenant
application and the application is owned by another tenant.
Do we need to change some settings to allow the setup of Single sign-on?
We followed this tutorial but are now stuck on "Configure Azure AD SSO".
When added the hubspot application from Azure AD Enterprise application gallery like below ,you should be able to see if SSO setting is available or not and the ways it can be supported for sso.(Here i can be able to use SAML based SSO, or linked SSO)
Then you should be able to edit the saml configuration
For me when I search the hubspot app created in app registrations, its under supported account type of my organization only.
Please check if the App is registered and added as Multi-Tenant App in your case and users have to use login for particular tenant instead of common to avoid error.
Also user accounts need to be pre-provisioned into HubSpot prior to
sign-in .
Reference:
Sign in with My Apps portal and Azure AD SSO in multi tenants application - Stack Overflow

Customizing sign in commons page for Microsoft Azure (using react-adal)

I have a react application I am using with Azure Active Directory to allow my users to log into my company's web services. I have a pretty basic setup that works well and allows the user to log in and navigate around our enterprise application. The problem that I am currently facing involves the login screen that I am redirected to using this plugin (screenshot below). I need to change the background to my company's logo, and I have no idea how to do it.
It looks like I am being taken to a common page so that the user can enter their credentials first before azure decides if they should be allowed to enter the application. I am confused on how to customize this template, and am at a loss on where to look as I am not quite sure if the configuration would be a part of the individual tenant or a corporate branding configuration. Any direction/advice is appreciated. Thanks in advance for the help!
Azure AD does provide a feature to customize or brand a few elements for the sign-in pages.
NOTE: This feature isn't available for Free version. You may need at least a Basic or higher version like Premium P1, P2 or O365 license.
You can read more about versions and feature comparisons here - Azure Active Directory Pricing
How to Customize your Azure AD sign-in page
Microsoft Docs - Add branding to your organization's Azure Active Directory sign-in page
In Azure Portal navigate to "Azure Active Directory" > "Company branding" (in Manage section)
Few of the elements that can be branded are:
Sign-in page background image (I guess this is the one you're looking for)
Banner logo
Text shown at the bottom of Sign-in page.
Background color
Square logo image.

Can I have multiple customised login pages with Azure B2C and Azure Active Directory based on criteria other than internationalisation?

I am running a Dot Net web application on App Service in an Azure subscription.
My application uses Azure B2C with an Azure Active Directory for user authentication.
Users are redirected from my application's base URL to the B2C login page, which has been customised to show the company logo.
Now, I'll need to point a second domain to the same application, and when users hit the application through that domain, I will need the login page to display a completely different logo. The choice of the logo is not based on language or location. It is purely based on the domain the user used to get to the application in the first place.
I see the Branding option is at the AD level, not at the B2C level. Therefore, all B2C applications registered under the same AD will be sharing the same login page.
AD only seems to allow me to create additional login page customisations based on language/region pairs.
Is there any way I can have multiple customised login pages using the same AD?
I would be willing to register multiple B2C applications and redirect users to the login page with different application Ids if necessary. I could change my code to identify the domain the user used to get to the application and then use the correct Id, but I couldn't find a way to have different login page customisations for different B2C applications under the same AD.
Following on from the previous answer by #Sunny, you can select the custom page UI based on any of the authentication request parameters, using a custom policy.
Example 1: Select on the standard "client_id" parameter
This following content definition loads the custom page UI where the client_id parameter is part of the URL path to the page resource:
<ContentDefinition Id="api.signuporsignin">
<LoadUri>https://somewhere.com/{OIDC:ClientId}/signuporsignin.html</LoadUri>
</ContentDefinition>
Example 2: Select on a non-standard "brand" parameter
This following content definition loads the custom page UI where the brand parameter is part of the URL path to the page resource:
<ContentDefinition Id="api.signuporsignin">
<LoadUri>https://somewhere.com/{OAUTH-KV:brand}/signuporsignin.html</LoadUri>
</ContentDefinition>
The main advantage of including parameters as parts of the URL paths to the page resources is that these page resources can be deployed to a storage service, such as Amazon S3 or Azure Storage, where this storage service doesn't support a query string parameter that is described by the "Step 8: Add dynamic content" section in the "Azure Active Directory B2C: Configure the UI with dynamic content by using custom policies" document.
The Azure AD B2C tenant represents a collection of identities to be used with relying party applications, it can use Customize UI dynamically to configure the identity provider selection page for sign in or sign up, but what you want to configure is just for the different Azure AD tenant, all of them are considered as one same kind identity provider in the Azure AD B2C,it cannot make this like the Company Branding in Azure AD.

Customize local login page of EditProfile policy in Azure Active Directory B2C

Is there a way, to customize the login page for the custom login when executing the edit profile policy? After starting the edit profile police (e.g. with run now), i get the ip selection. Then i click on local account and get the default ui.
I'm currently using the default policy and not the identity experience framework.
Is there a way, to customize the login page for the custom login when executing the edit profile policy?
Yes, we could get the details steps from the this tutorial. Following is the snippet from the tutorial.
To customize the look and feel of your policy, you need to first create HTML and CSS files using the specific conventions of Azure AD B2C. You can then upload your static content to a publicly available location so that Azure AD B2C can access it. This could be your own dedicated web server, Azure Blob Storage, Azure Content Delivery Network, or any other static resource-hosting provider. The only requirements are that your content is available over HTTPS and can be accessed by using CORS.
Detail 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://xxx.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://xxx.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.

Resources