ADAL Basics

Prerequisites

Before using ADAL JS, follow the instructions to register your application on the Azure portal. Also, make sure to enable the OAuth 2.0 implicit flow which is used by ADAL JS to get tokens.

Installation

Please refer Installation

Include a reference to ADAL (In JavaScript)

You can use ADAL JS as follows in a plain JavaScript application without any frameworks.Include a reference to adal.js in your main application index page before your application scripts.

    <script src="App/Scripts/adal.js"></script>
    <script src="App/Scripts/app.js"></script>

Initialization of ADAL

Initialize ADAL authentication context with the Azure AD app registration coordinates at config time. The minimum required config to initialize ADAL is:

    window.config = {
       clientId: "Your application's client_id"
    };
    var authContext = new AuthenticationContext(config);

Configurable Options:-

The configurable options for AuthenticationContext are:

clientId (mandatory) - The application ID assigned to your app by Azure AD during registration.

tenant - The ID or domain name of the Azure AD tenant used for authentication. The default value is 'common' which allows multi-tenant authentication. This allows any Microsoft account to authenticate to your application. If you are not interested in multi-tenant behavior, you will need to set the 'tenant' property as shown below.

      window.config = {
         tenant: "52d4b072-9470-49fb-8721-bc3a1c9912a1", // Optional by default, it sends common
         clientId: "g075edef-0efa-453b-997'-de1337c29185"
       };

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.

redirectUri - The URI for Azure AD to redirect back with tokens after authenticating the user. Defaults to application root page at window.location.href.

instance - The endpoint of the Azure AD instance for authentication requests. Defaults to 'https://login.microsoftonline.com/'.

cacheLocation - ADAL caches tokens in the browser storage which defaults to 'sessionStorage'. You can set this to either 'localStorage' or 'sessionStorage'.

    window.config = {
        clientId: 'g075edef-0efa-453b-997b-de1337c29185',
        cacheLocation: 'localStorage' // Default is sessionStorage
    };

Tokens are accessible from JavaScript since ADAL.JS is using HTML5 browser storage. It is recommended to prompt users to login again for important operations in your app.
You should also protect your site for XSS. Please check the article here: [https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet](https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet)

You can read further details about the other [configurable options here](https://github.com/AzureAD/azure-activedirectory-library-for-js/wiki/Config-authentication-context).

endpoints - Collection of {API URI-ResourceId} used by adal-angular for automatically attaching tokens when intercepting web API calls. Defaults to 'null'.

anonymousEndpoints - Array of routes or API URIs for which adal-angular will not attach a token on outgoing requests to these endpoints. Defaults to 'null'.

popUp- Set this to true to enable login in a pop-up window instead of a full page redirect. Defaults to 'false'.

localLoginUrl - Set this to allow adal-angular library to redirect the user to your custom login page when protecting routes requiring login. Defaults to 'null'.

displayCall - Set this to a user defined function for handling or customizing the navigation to Azure AD endpoint during login. Defaults to 'null'.

postLogoutRedirectUri - ADAL redirects the user to postLogoutRedirectUri after logout. Defaults is 'redirectUri'.

logoutUri - ADAL allows you to configure a custom URI where the logout request needs to be made. By default ADAL makes log out requests to 'https://login.microsoftonline.com/'.

expireOffsetSeconds - If the cached token is about to be expired in the expireOffsetSeconds (in seconds), ADAL will renew the token instead of using the cached token. Defaults to 300 seconds.

loadFrameTimeout - This is the number of milliseconds of inactivity in the Iframe before a token renewal response from Azure AD is considered timed out. The default value is 6 seconds.

correlationId - Set this to a unique identifier used to map the request with the response for debugging purposes. Defaults to RFC4122 version 4 guid (128 bits).

extraQueryParameter - This config allows you to pass additional query string parameters in the authorization requests to Azure AD. For example, you can pass a login hint to Azure AD to use an select a specific user session as {extraQueryParameter: 'login_hint='}.

Calling Login APIs

Please refer Login APIs

Calling Acquire Token APIs

Please refer acquire tokens

Refer this sample for a full implementation example.