Does anyone have a working example of how to call Microsoft Graph from Angular using ADAL?

Question

I have ran through all the examples I could fine on howto call the Microsoft Graph from a recent angular version using ADAL.js (not msal), but no luck so far. So any examples out there that works? The recent examples I find are all for msal - which is irrelevant long as azure ad apps can't be upgraded to v2 endpoints...

Answer 1

Just an example for your reference:

https://gist.github.com/psignoret/50e88652ae5cb6cc157c09857e3ba87f

<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.11/js/adal.min.js"></script>
<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>

This works well for Firefox on my side.