MitrahSoft is an Adobe offcial partner MitrahSoft is Lucee offcial partner & core contributing developer

Azure AD authentication using msal.js

Azure Active Directory (Azure AD) is Microsoft's enterprise cloud-based identity and access management (IAM) solution. Azure AD is the backbone of the Office 365 system, and it can sync with on-premise Active Directory and provide authentication to other cloud-based systems via OAuth.

The MSAL library for JavaScript enables client-side JavaScript web applications, running in a web browser, to authenticate users using Azure AD work and school accounts (AAD), Microsoft personal accounts (MSA) and social identity providers through Azure

Quick demo
Installation

Via NPM:

npm install msal

Via Latest Microsoft CDN Version:

<script type="text/javascript" src="https://alcdn.msauth.net/lib/1.2.0/js/msal.js"></script>

Alternate region URLs

<script type="text/javascript" src="https://alcdn.msftauth.net/lib/1.2.0/js/msal.js"></script>

Notes:

Internet Explorer does not have native Promise support, and so you will need to include a polyfill for promises such as bluebird.

Usage

Hera we can Explain the example below walks you through how to login a user and acquire a token to be used for Microsoft's.

  • Prerequisite

    Before using MSAL.js you will need to register an application in Azure AD to get a valid clientId for configuration, and to register the routes that your app will accept redirect traffic on. Just signup and complete five steps mentioned in the previous link, finally you get a ClientID for your Application.

  • Step 1 : Instantiate the UserAgentApplication

    After instantiating your instance, if you plan on using a redirect flow (loginRedirect and acquireTokenRedirect), you must register a callback handlers using handleRedirectCallback(authCallback) where authCallback = function(AuthError, AuthResponse). The callback function is called after the authentication request is completed either successfully or with a failure. This is not required for the popup flows since they return promises.

  • Step 2 : Login the user

    Your app must login the user with either the loginPopup or the loginRedirect method to establish user context. When the login methods are called and the authentication of the user is completed by the Azure AD service, an id token is returned which is used to identify the user with some basic information.

  • You can learn further details about MSAL.js functionality documented in the MSAL Wiki and find complete code samples.