![Board with an Explanation of a Process](https://images.pexels.com/photos/7125676/pexels-photo-7125676.jpeg?auto=compress&cs=tinysrgb&w=1920)
Azure MSAL Browser allows developers to use a browser-based authentication flow, making it easier to authenticate users across web applications.
This approach eliminates the need for developers to manually handle authentication tokens, reducing the complexity of the process.
The MSAL Browser library provides a simple way to authenticate users, enabling them to access protected resources without having to enter their credentials multiple times.
By using Azure MSAL Browser, developers can focus on building their applications rather than worrying about authentication details.
Suggestion: Azure Msal Angular
Single Sign-On (SSO)
Single Sign-On (SSO) is a feature that allows users to access multiple applications without having to sign in each time. This is achieved through various methods, including using a broker application or the system browser.
To enable SSO between browser tabs for the same app, you need to set the cacheLocation in MSAL.js configuration object to localStorage. This makes application instances in different browser tabs share the same MSAL cache and authentication state.
Explore further: Azure Msal
There are two ways to achieve SSO between different apps: using the ssoSilent method or by integrating with brokered auth. However, if the user has multiple user accounts, they'll be prompted to pick an account to sign in with.
The choice between using a broker application or the system browser depends on your app's needs. If you want device-wide SSO, account management, and Conditional Access, using a broker application is recommended. However, it requires users to download additional applications.
Here are the two methods for SSO:
- Through a broker application
- Through the system browser
Using a broker application provides benefits like device-wide SSO, account management, and Conditional Access.
Single Sign-On Between Tabs
You can achieve Single Sign-On (SSO) between browser tabs for the same app by setting the cacheLocation in MSAL.js configuration object to localStorage.
To do so, you need to set the cacheLocation in MSAL.js configuration object to localStorage. This allows application instances in different browser tabs to make use of the same MSAL cache, sharing the authentication state between them.
MSAL events can also be used for updating application instances when a user logs in from another browser tab or window. This ensures that all tabs are updated with the new authentication state.
Using this method, you can provide a seamless SSO experience for users who have multiple tabs open for the same app.
Single Sign-On Across Apps
Single sign-on (SSO) allows users to access multiple apps without having to log in each time. MSAL.js relies on a session cookie set on the Microsoft Entra domain in the browser to provide SSO between different applications.
To achieve SSO between different apps, you can use the ssoSilent method in MSAL.js, which signs in the user and obtains tokens without interaction. However, if the user has multiple user accounts in a session with Microsoft Entra ID, they'll be prompted to pick an account to sign in with.
There are two ways to achieve SSO using the ssoSilent method. One way is to use the system browser, which is required if the application isn't using brokered authentication.
A unique perspective: Azure My Apps
Android applications have the option to use the WEBVIEW, system browser, or Chrome Custom Tabs for authentication user experience. If the application isn't using brokered authentication, it needs to use the system browser rather than the native webview in order to achieve SSO.
To achieve SSO across the device or between native apps and web apps, applications need to integrate with brokered auth into their app. This can be done by using MSAL with a broker like Microsoft Authenticator, Intune Company Portal, or Link to Windows.
MSAL with a broker utilizes WebView and provides Single Sign-On (SSO) for all the applications consuming MSAL library and participating in brokered auth. The SSO state from broker is not extended to other apps which do not use MSAL.
Here are the two methods for SSO using MSAL for Android:
- Through a broker application
- Through the system browser
It's recommended to use a broker application for benefits like device-wide SSO, account management, and Conditional Access. However, it requires your users to download additional applications.
To achieve SSO between browser tabs for the same app, you need to set the cacheLocation in MSAL.js configuration object to localStorage. This allows application instances in different browser tabs to make use of the same MSAL cache, sharing the authentication state between them.
Check this out: Azure App Id
Azure MSAL Browser Configuration
To use a broker in your app, you must attest that you've configured your broker redirect by including both your broker enabled redirect URI and indicating that you registered it in your MSAL configuration file.
You can choose to use WEBVIEW for a better SSO experience, though a custom tabs strategy is also available. MSAL uses a shared cookie jar, which allows other native apps or web apps to achieve SSO on the device by using the persist session cookie set by MSAL.
For better performance and to avoid issues, set the redirectUri to a blank page or other page that doesn't use MSAL. Here's a quick guide on how to set it:
- Set the redirectUri on the PublicClientApplication configuration object if your application only uses popup and silent methods.
- Set the redirectUri on a per-request basis if your application also uses redirect methods.
Configure Broker
To configure a broker in your app, you must attest that you've configured your broker redirect. This involves including both your broker-enabled redirect URI and indicating that you registered it in your MSAL configuration file.
To do this, include the following settings in your MSAL configuration file. You'll need to specify your broker-enabled redirect URI and confirm that you've registered it.
Here's a quick rundown of how to set up the redirect URI for your PublicClientApplication configuration object:
- Set the redirectUri on the PublicClientApplication configuration object if your application users only popup and silent methods.
- Set the redirectUri on a per-request basis if your application also uses redirect methods.
By following these steps, you'll be able to configure your broker redirect and ensure your app is set up for success.
Login Hint
A login hint is an optional claim that provides a hint to Microsoft Entra ID about the user account attempting to sign in. It can be used to bypass the account selection prompt during interactive authentication requests.
The login_hint claim can be retrieved from the ID token and used as a hint during silent and interactive requests. It's the most reliable account hint for both silent and interactive requests.
To pass a login hint, you can use the login_hint claim provided in the ID token as the loginHint parameter in the ssoSilent method. This is the most reliable way to pass a login hint.
Here are the ways to obtain a login hint:
- Retrieve the login_hint claim from the ID token
- Use the upn claim in the ID token
- Use the username property of the account object
If the information in the login_hint claim doesn't match any existing user, they'll be redirected to go through the standard sign-in experience, including account selection.
Authentication Flow
Authentication Flow is a crucial part of the Azure MSAL Browser experience. It's a step-by-step process that ensures only authorized users can access protected resources.
The authentication flow begins with the client app redirecting the user to the Azure AD authorization endpoint. The user is then presented with a login prompt where they enter their credentials.
The client app can use the authorization code flow or the client credentials flow to authenticate. The authorization code flow is used for interactive user authentication.
The client app receives an authorization code from Azure AD and then exchanges it for an access token. This access token is then used to access the protected resource.
The client credentials flow is used for non-interactive user authentication, such as a daemon service. In this flow, the client app uses its own credentials to authenticate with Azure AD.
The access token is valid for a short period of time, typically 1 hour. After this time, the client app must obtain a new access token to continue accessing the protected resource.
The client app can also use the refresh token flow to obtain a new access token without prompting the user to log in again.
Discover more: Azure Auth Json Website Azure Ad Authentication
Frequently Asked Questions
What is msal in Azure?
MSAL (Microsoft Authentication Library) is a tool that helps developers authenticate users and access secured web APIs by acquiring security tokens from the Microsoft identity platform. It's a key component in Azure for secure user authentication and API access.
Sources
- https://unpkg.com/browse/@azure/[email protected]/README.md
- https://learn.microsoft.com/en-us/entra/identity-platform/msal-js-sso
- https://learn.microsoft.com/en-us/entra/identity-platform/reference-v2-libraries
- https://learn.microsoft.com/en-us/entra/identity-platform/msal-android-single-sign-on
- https://github.com/AzureAD/microsoft-authentication-library-for-js
Featured Images: pexels.com