adal-angular-core

Active Directory Authentication Library (ADAL) for JavaScript
====================================
|Getting Started| Docs| Samples| Support
| --- | --- | --- | --- |

Active Directory Authentication Library for JavaScript (ADAL JS) helps you to use Azure AD for handling authentication in your single page applications.
This library works with both plain JS as well as AngularJS applications.


Installation

You have multiple ways of getting ADAL JS:

Via NPM (https://www.npmjs.com/package/adal-angular-core):

npm install adal-angular-core

Note: Currently there is one NPM package providing both the plain JS library (adal.js) and the AngularJS wrapper (adal-angular.js).

Via CDN:

Usage

#### Prerequisite

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 by setting the property oauth2AllowImplicitFlow to true by editing your application manifest on the portal. Implicit flow is used by ADAL JS to get tokens.

#### 1. Instantiate the AuthenticationContext

Instantiate the global variable AuthenticationContext with a minimal required config of clientID. You can read about other configurable options here.

``JavaScript
window.config = {
clientId: '[Enter your client_id here, e.g. g075edef-0efa-453b-997b-de1337c29185]',
popUp: true,
callback : callbackFunction
};

var authContext = new AuthenticationContext(config);

function callbackFunction(errorDesc, token, error, tokenType)
{
}

`

#### 2. Login the user

Your app must login the user to establish user context. The login operates in popup mode if you set the option popUp: true instead of a full redirect as shown in the config above.Defaults to false. The callback function passed in the Authentication request constructor will be called after the login with success or failure results.

``JavaScript
var user = authenticationContext.getCachedUser();
if (user) {
// Use the logged in user information to call your own api
onLogin(null, user);
}
else {
// Initiate login
authenticationContext.login();
}
`

#### 3. Get an access token

Next, you can get access tokens for the APIs your app needs to call using the acquireToken method which attempts to acquire token silently. The acquireToken method takes a callback function as shown below.

If the silent token acquisition fails for some reasons such as an expired session or password change, you will need to invoke one of the interactive methods to acquire tokens.

`JavaScript
authenticationContext.acquireToken(webApiConfig.resourceId, function (errorDesc, token, error) {
if (error) { //acquire token failure
if (config.popUp) {
// If using popup flows
authenticationContext.acquireTokenPopup(webApiConfig.resourceId, null, null, function (errorDesc, token, error) {});
}
else {
// In this case the callback passed in the Authentication request constructor will be called.
authenticationContext.acquireTokenRedirect(webApiConfig.resourceId, null, null);
}
}
else {
//acquired token successfully
}
});
}
`

Note: In ADAL JS, you will have to explicitly call the handleWindowCallback method on page load to handle the response from the server in case of redirect flows like login without popup and acquireTokenRedirect. There is no need to call this function for popup flows like loginPopup and acquireTokenPopup. This method must be called for processing the response received from AAD. It extracts the hash, processes the token or error, saves it in the cache and calls the registered callback function in your initialization with the result.

`JavaScript
if (authenticationContext.isCallback(window.location.hash)) {
authenticationContext.handleWindowCallback();
}
`

#### 4. Use the token as a bearer in an HTTP request to call the Microsoft Graph or a Web API

`JavaScript
var headers = new Headers();
var bearer = "Bearer " + token;
headers.append("Authorization", bearer);
var options = {
method: "GET",
headers: headers
};
var graphEndpoint = "https://graph.microsoft.com/v1.0/me";

fetch(graphEndpoint, options)
.then(function (response) {
//do something with response
}
``

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