Azure Active Directory (Azure AD)

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.

<!-- IE support: add promises polyfill before msal.js -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>

Usage

Here 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.

import * as Msal from "msal";

// if using cdn version, 'Msal' will be available in the global scope

const msalConfig = {
    auth: {
        clientId: "your_client_id"
    }
};

const msalInstance = new Msal.UserAgentApplication(msalConfig);

msalInstance.handleRedirectCallback((error, response) => {
    // handle redirect response or error
});

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.

var loginRequest = {
    scopes: ["user.read", "mail.send"]
};

msalInstance.loginPopup(loginRequest)
    .then(response => {
        // handle response
    })
    .catch(err => {
        // handle error
    });

Additional Resources

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