psignoret/ADAL_with_vanilla_JS.md

## ADAL_with_vanilla_JS.md

      
    Raw
  

              ADAL_with_vanilla_JS.md
            
          
    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/

  
## index.html
<!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>
	<!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>