Skip to content

Instantly share code, notes, and snippets.

@psignoret
Last active May 11, 2021 14:15
Show Gist options
  • Star 21 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save psignoret/50e88652ae5cb6cc157c09857e3ba87f to your computer and use it in GitHub Desktop.
Save psignoret/50e88652ae5cb6cc157c09857e3ba87f to your computer and use it in GitHub Desktop.
Minimal sample app using ADAL.JS and vanilla JavaScript

Using ADAL.JS with vanilla JavaScript

A minimal sample app using ADAL.JS and plain old vanilla JavaScript to obtain an access token from Azure Active Directory and use that access token to make an API request. In this case, the API we're requesting a token for is the Microsoft Graph API, which is used to retrieve the signed-in user's basic profile.

You can see (and test) this live at: https://bl.ocks.org/psignoret/raw/50e88652ae5cb6cc157c09857e3ba87f/

<!DOCTYPE html>
<html>
<head>
<title>Minimal sample using ADAL.JS</title>
<meta charset="utf-8" />
<style type="text/css">body { font-family: Tahoma; padding: 3em; }</style>
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.11/js/adal.min.js"></script>
</head>
<body>
<p>
A minimal sample app using ADAL.JS and vanilla JavaScript to obtain
an access token from Azure Active Directory and make an API request.
</p>
<p>
<a href="#" onclick="authContext.login(); return false;">Log in</a> |
<a href="#" onclick="authContext.logOut(); return false;">Log out</a>
</p>
<p id="username"></p>
<pre id="api_response"></pre>
<script type="text/javascript">
// Set up ADAL
var authContext = new AuthenticationContext({
clientId: '057e09f6-5d1a-43f9-abf5-451f20ab177f',
postLogoutRedirectUri: 'http://bl.ocks.org/psignoret/raw/50e88652ae5cb6cc157c09857e3ba87f/'
});
// Make an AJAX request to the Microsoft Graph API and print the response as JSON.
var getCurrentUser = function (access_token) {
document.getElementById('api_response').textContent = 'Calling API...';
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://graph.microsoft.com/v1.0/me', true);
xhr.setRequestHeader('Authorization', 'Bearer ' + access_token);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// Do something with the response
document.getElementById('api_response').textContent =
JSON.stringify(JSON.parse(xhr.responseText), null, ' ');
} else {
// TODO: Do something with the error (or non-200 responses)
document.getElementById('api_response').textContent =
'ERROR:\n\n' + xhr.responseText;
}
};
xhr.send();
}
if (authContext.isCallback(window.location.hash)) {
// Handle redirect after token requests
authContext.handleWindowCallback();
var err = authContext.getLoginError();
if (err) {
// TODO: Handle errors signing in and getting tokens
document.getElementById('api_response').textContent =
'ERROR:\n\n' + err;
}
} else {
// If logged in, get access token and make an API request
var user = authContext.getCachedUser();
if (user) {
document.getElementById('username').textContent = 'Signed in as: ' + user.userName;
document.getElementById('api_response').textContent = 'Getting access token...';
// Get an access token to the Microsoft Graph API
authContext.acquireToken(
'https://graph.microsoft.com',
function (error, token) {
if (error || !token) {
// TODO: Handle error obtaining access token
document.getElementById('api_response').textContent =
'ERROR:\n\n' + error;
return;
}
// Use the access token
getCurrentUser(token);
}
);
} else {
document.getElementById('username').textContent = 'Not signed in.';
}
}
</script>
</body>
</html>
@jrhea
Copy link

jrhea commented Apr 13, 2017

This sample seems to fail in IE 11 with an HTTP 404 Not Found after logging in and being redirected back to index.html. Have you seen this?

@germain-italic
Copy link

Thanks for this sample which is working on the first try while the official doc at https://github.com/AzureAD/azure-activedirectory-library-for-js is full of typos and missing comments/examples!

@bsungur-hub
Copy link

Hi @psignoret,

I'm trying the code above. Although I have entered my user information and logged in, I am constantly being redirected to the login page. I wonder why? Thank you

@psignoret
Copy link
Author

@bsungur-hub It's hard to say why without more details, but you really shouldn't be doing any new development with ADAL—you should use MSAL.JS instead.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment