How to configure multiple login methods for Azure B2C in react - reactjs

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.

Related

How to setup external identity provider for MSAL js react spa?

I am trying to authenticate using msal js for my react application (Azure AD B2C). Microsoft authentication works perfectly. But I need to add more external identity providers such as Google to my authentication.
I have followed the steps given in the official documentation
https://learn.microsoft.com/en-gb/azure/active-directory-b2c/identity-provider-google?WT.mc_id=Portal-Microsoft_AAD_B2CAdmin&pivots=b2c-user-flow
When I Run user flow I am able to sign in google but the user is not authenticated.
screen when user sign into google
This is the screen that is given.
And the other thing is only if use Run user flow in Azure AD B2C I am able to do this.
If I normally use the sign in button it only shows microsoft authentication.
What am I missing ?
Can someone please help on this if possible ?
Issues may arise as a result of previous Microsoft configuration under App registrations. Verify below three configurations once whether those are mapped to google identify provider or not
Client ID and Client secret and Authorized redirect URIs
here I found one blog relates to Google Identity Provider with Azure AD B2C configuration and implementation.

Validating tenant in multitenant React apps using MSAL

We're working on moving some apps from Razor Pages to React, and we'd like to use Microsoft Identity Platform for authentication via MSAL.
Some of these apps are multi-tenant, and we want to be able to validate that a given tenant is set up and authorized when a user logs in. Today, we do that in .NET via the OnTokenValidated event by pulling the email domain or tenant ID from the token claims and comparing it to our app's list of authorized tenants in our databases.
In MSAL, I'm not entirely clear how to accomplish that. The MS docs say, "If you allow multi-tenant authentication, and you do not wish to allow all Microsoft account users to use your application, you must provide your own method of filtering the token issuers to only those tenants who are allowed to login" (in https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/multi-tenant.md#multi-tenant).
Where in the React login or token acquisition process can I inspect the claims in order to perform this filtering? How are others handling these kinds of checks with MSAL on a SPA front-end framework like React?

Why Saml is the default option for registering Salesforce as an Enterprise Application is AAD

I am trying to integrate Salesforce with AAD, so I see two available options, either Saml or OpenId Connect.. I do not know which one is better, but I prefer OpenId Connect since it seems to be more modern. So I tried to register Salesforce App in AAD and Saml was the default options, so why is Saml the default option ?! is it better or what? Please note that I am building an API and I need to allow authentication and authorization with Single Sign On.
The Azure AD app gallery contains many popular applications that are already pre-configured to work with Azure AD as an identity provider. These applications will be available in the Enterprise applications and have SAML to perform SSO. Any application which is added directly from the Gallery the default method is SAML based SSO , password based SSO etc.. which depends upon the applications.
Kindly check the difference between the App Registration and Gallery application in Azure portal from the link
In order to get more detailed explanation about SSO types and protocols kindly check the document to get more detailed explanation.
If you have any further queries kindly let me know.

How to integrate my activiti app (version 6) with Azure active directory endpoint v2.0 without using ADAL.js or MSAL.js

I have an Activiti app which needs to be integrated with the Azure Active directory for user sign in and authentication. The application is registered on the Azure AD and I have the following information:
tenant ID
CID
key
I am trying to follow the steps in the official documentation here, using the implicit flow.
All the examples I could find for it make use of the msal.js library to authenticate users with Microsoft Azure Active Directory accounts. But i need to achieve this without using any libraries. How do I proceed with this?
How and where in the activiti-UI do i need to put in the code to hit the following URL given in the steps
https://login.microsoftonline.com/{tenant}/oauth2/v2.0/authorize?client_id=6731de76-14a6-49ae-97bc-6eba6914391e&response_type=id_token&redirect_uri=http%3A%2F%2Flocalhost%2Fmyapp%2F&scope=openid&response_mode=fragment&state=12345&nonce=678910
Any examples on this would be of great help!!
Thanks in advance!
For the doc you choose, it does not use a library.
To refer to this doc, your app is required to be registered in the v2 endpoint, like Application Registration Portal or app registration(preview) in Azure Portal. And you also need to enable Allow Implicit Flow for the Web client.
Send the sign-in request in your browser:
https://login.microsoftonline.com/{tenant-name}/oauth2/v2.0/authorize?
client_id=your application id
&response_type=id_token
&redirect_uri=your application redirect urls
&scope=openid
&response_mode=fragment
&state=12345
&nonce=678910
The response like this:
By this, you could get the id_token for the sign-in user. If you want to get the access_token, you need to replace openid in the scope with the resource url with the format(like microsoft graph: https://graph.microsoft.com/User.Read), and replace the id_token with access_token in the response_type.
The access_token response like this:
If you want to parse the token, you could use jwt.io.

Is custom login page of Azure Active Directory possible?

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.

Resources