not able to get photo from graph api from SPA front end web app

Question

I am using ADAL js to authenticate user and i am able to authenticate user successfully. I am able to fetch a token for graph api and read user profile with following url.

        GET
https://graph.microsoft.com/v1.0/me

But i am not able to read user profile picture:

https://graph.microsoft.com/v1.0/me/photo/$value

I get the following error

  Object { code: "NoPermissionsInAccessToken", message: "The token contains no permissions, or permissions can not be understood.", innerError: {…} }

I have set the required permissions:

Is there any way i can check why i am able to fetch profile but not photo.

Content of JWT sent in header before it received 401 error:

        {
          "typ": "JWT",
          "nonce": "IenxIPCU1ue14Z9bIIxEidRBBCTnL52w4Q",
          "alg": "RS256",
          "x5t": "huN95IvPf34GzBDZ1GXGirnM",
          "kid": "huN95hq34GzBGXGirnM"
        }

Body of JWT token:

        {
          "aud": "https://graph.microsoft.com",
          "iss": "https://sts.windows.net/6f1dc6d4-8e90-4593/",
          "iat": 1596560469,
          "nbf": 1596560469,
          "exp": 1596564369,
          "acct": 1,
          "acr": "1",
          "aio": "ATQAy/8QAAAAf64iQ9pAkP+bk/JnXpSNXFPVFqvW/urra8A2QueWm2xaJZM+",
          "altsecid": "5::100320A47F8DD5",
          "amr": [
            "wia"
          ],
          "app_displayname": "graphdemo-dev",
          "appid": "dsfkj32-4350-44a4-dd33-f45b7172b0cd",
          "appidacr": "0",
          "email": "[email protected]",
          "family_name": "faily",
          "given_name": "given",
          "idp": "https://sts.windows.net/deff24bb-2089-4400378b2/",
          "in_corp": "true",
          "ipaddr": "70.50.13.18",
          "oid": "dskfs77s-5bc6-4fbe-b59a-11fbc2",
          "platf": "3",
          "puid": "A9BDE43D",
          "scp": "profile User.Read User.Read.All User.ReadBasic.All User.ReadWrite User.ReadWrite.All",
          "sub": "r4-9Ra9nHTjU-g1PvuXwh18",
          "tenant_region_scope": "NA",
          "tid": "d4-8e90-4599-af70-13a4289b3",
          "unique_name": "[email protected]",
          "uti": "MDGPXbP3lUJMyAA",
          "ver": "1.0",
          "xms_tcdt": 8700342
        }

Note: I removed and updated confidential data with random chars.

When i tried on Graph Explorer:

        Need admin approval
        Graph explorer (official site)
        microsoft.com
        Graph explorer (official site) needs permission to access resources in your organization that only an admin can grant. Please ask an admin to grant permission to this app before you can use it.

        import AuthenticationContext from 'adal-angular/lib/adal.js';

        // KPMG
        const config = {
          tenant: process.env.VUE_APP_AZUREAD_TENANTID,
          clientId: process.env.VUE_APP_AZUREAD_CLIENTID,
          cacheLocation: process.env.VUE_APP_CACHE_LOCATION,
          redirectUri: process.env.VUE_APP_REDIRECT_URI
        };


        export default {
          authenticationContext: null,
          /**
           * @return {Promise}
           */
          initialize() {
            this.authenticationContext = new AuthenticationContext(config);

            return new Promise((resolve, reject) => {
              if (this.authenticationContext.isCallback(window.location.hash) || window.self !== window.top) {
                // redirect to the location specified in the url params.
                this.authenticationContext.handleWindowCallback();
              }
              else {
                // try pull the user out of local storage
                const user = this.authenticationContext.getCachedUser();
                if (user) {
                  this.authenticationContext.config.extraQueryParameter = 'login_hint=' + user.userName;
                  resolve();
                }
                else {
                  // no user at all - go sign in..
                  this.signIn();
                }
              }
            });
          },

I use below code to get graph api token

         acquireGraphApiToken() {
            return new Promise((resolve, reject) => {
              this.authenticationContext.acquireToken('https://graph.microsoft.com', (error, graphApiToken) => {
                if (error || !graphApiToken) {
                  this.signOut();
                  return reject(error);
                } else {
                  return resolve(graphApiToken);
                }
              });
            });
          },

Answer 1

For Microsoft Graph explorer, you need to sign in with an admin account and do the admin consent like this:

Do the admin consent:

And from the screenshot above, you can see the access token. After you finish the admin consent, you can decode the access token to see if it includes the required permissions.

For you own Azure AD application, I see that you have done the admin consent based on your screenshot. It's hard to say where the problem is. So my suggestion is to try the admin consent endpoint:

// Line breaks are for legibility only.
GET https://login.microsoftonline.com/{tenant}/v2.0/adminconsent?
client_id=6731de76-14a6-49ae-97bc-6eba6914391e
&state=12345
&redirect_uri=http://localhost/myapp/permissions
&scope=
https://graph.microsoft.com/calendars.read
https://graph.microsoft.com/mail.send

Access this url in a browser using an admin account and finish the consent. If the issue still exists, you can create a new Azure AD application and only add the required permission User.Read (Don't add other permissions).