Securing Single Page Applications with Azure AD

index.js

var aadTenant = "yourTenant.onmicrosoft.com",
    spaClientId = "{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}", //AAD app client id for this app
    serviceClientId = "{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}", //AAD app client id for the service API app
var serviceUrl = "http://localhost:8081/api/doSomething"; // the service API endpoint

var authContext = new AuthenticationContext({
    instance: 'https://login.microsoftonline.com/',
    tenant: aadTenant,
    clientId: spaClientId,
    postLogoutRedirectUri: window.location.origin,
    cacheLocation: 'localStorage',
});

var isCallback = authContext.isCallback(window.location.hash);
if (isCallback) {
    authContext.handleWindowCallback();
}

//var user = authContext.getCachedUser();
var serviceToken;

function login() {
    authContext.login();
}

function getServiceToken() {
    authContext.acquireToken(serviceClientId, function (err, res) {
        serviceToken = res;
    });
}

function callService() {
    var r = new XMLHttpRequest();
    r.open("GET", serviceUrl, true);
    r.setRequestHeader("Authorization", "Bearer " + serviceToken);
    r.onreadystatechange = function () {
      console.log(r);
    };
    r.send();
}

Thanks for this and especially the blog post which you wrote. Very very helpful.