Adal.js Example

by dshilkret

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: '9624a483-5297-45f7-91da-a8ec0e75798b',
               // 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...