Graph API always return 403 when accessing OneNote page even if the permission is granted in the Azure app

[jslhcl]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Browser:

• [x] Chrome version 73.0.3683.103
• [ ] Firefox version XX
• [x] IE version 11
• [ ] Edge version XX
• [ ] Safari version XX

Library Name

• [x] adal.js v1.0.0
• [ ] adal-angular XX

Library version

Library version: 1.0.0

Current behavior

When I query Graph API to acquire OneNote pages info with the token from adal.js v1.0.0, I always get 403 error, even if I have already specified OneNote read permission in the corresponding App in Azure portal.

Expected behavior

Minimal reproduction of the problem with instructions

Pasted the code snippet below:

$(document).ready(function () {
    "use strict";
                // Create config and get AuthenticationContext
                window.config = {
                    clientId: "xx-xx-xx-xx",
                    endpoints: {
                        graphApiUri: "https://graph.microsoft.com",
                    },
                    cacheLocation: "localStorage",
                };
                var authContext = new AuthenticationContext(config);

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

                if (isCallback && !authContext.getLoginError()) {
                    window.location = authContext._getItem(authContext.CONSTANTS.STORAGE.LOGIN_REQUEST);
                }

                var user = authContext.getCachedUser();
                if (!user) {
                    authContext.login();
                }

                authContext.acquireToken(config.endpoints.graphApiUri, function (error, token) {
                    if (error || !token) {
                        console.log("ADAL error occurred: " + error);
                        return;
                    }
                    else {
                        var filesUri = config.endpoints.graphApiUri + "/v1.0/me/onenote/pages";
                        //var filesUri = config.endpoints.graphApiUri + "/v1.0/me";

                        $.ajax({
                        type: "GET",
                        url: filesUri,
                        headers: {
                            "Authorization": "Bearer " + token
                        }
                        }).done(function (response) {
                            console.log("Successfully fetched OneNote info.");
                        }).fail(function () {
                            console.log("Fetching OneNote info failed.");
                        });
                    }
                });
});

the above code always outputs "Fetching OneNote info failed". when decoding JWT, it only contains "read user profile" permission (so it works if i uncommented "filesUri = config.endpoints.graphApiUri + "/v1.0/me")

Also pasted the screenshot of the permission level of the according Azure app

I searched the Internet and tried this solution, but no luck

[rayterrill]

I actually found the same thing today against the /security/alerts graph api - 403 even though the correct permissions were set in the application and the decoded JWT appeared to show the scopes were present. Never could figure out why it wasn’t working.

[jmckennon]

This bug should be fixed in the latest version of msal js. You can also try upgrading from 1.0.0 of adal js to the latest 1.0.17 version.

All current authentication work from Microsoft is delivered through the msal js library here. adal js is still supported only for security fixes. We recommend moving to msal js for any advanced feature requests and bugfixes.