How to get the profile picture of the user using microsoft oauth 2.0?

Question

I'm using passport-microsoft for adding oauth to my app. I've added user.read in the scope, but still I'm not getting the profile picture of the user after he authenticates. I've added the json data I'm receiving and the code below.

{
  provider: 'microsoft',
  name: { familyName: 'Integrations', givenName: 'Nolt' },
  id: 'cc97b093755e68da',
  displayName: 'Nolt Integrations',
  emails: [ { type: 'work', value: 'integrations@nolt.io' } ],
  _raw: '{"@odata.context":"https://graph.microsoft.com/v1.0/$metadata#users/$entity","displayName":"Nolt Integrations","surname":"Integrations","givenName":"Nolt","id":"cc97b093755e68da","userPrincipalName":"integrations@nolt.io","businessPhones":[],"jobTitle":null,"mail":null,"mobilePhone":null,"officeLocation":null,"preferredLanguage":null}',
  _json: {
    '@odata.context': 'https://graph.microsoft.com/v1.0/$metadata#users/$entity',
    displayName: 'Nolt Integrations',
    surname: 'Integrations',
    givenName: 'Nolt',
    id: 'cc97b093755e68da',
    userPrincipalName: 'integrations@nolt.io',
    businessPhones: [],
    jobTitle: null,
    mail: null,
    mobilePhone: null,
    officeLocation: null,
    preferredLanguage: null
  }
}

function createMicrosoftStrategy() {
  return new MicrosoftStrategy(
    {
      clientID: process.env.MICROSOFT_CLIENT_ID,
      clientSecret: process.env.MICROSOFT_CLIENT_SECRET,
      callbackURL: `${process.env.BASE_ORIGIN}/auth/microsoft/callback`,
      scope: ['user.read'],
    },
    (accessToken, refreshToken, profile, done) => {
      const photoUrl = R.path(['photos', 0, 'value'], profile);
      const email = R.path(['emails', 0, 'value'], profile);
      console.log('profile', profile);
      return done(null, {
        type: 'MICROSOFT',
        id: `microsoft|${R.path(['id'], profile)}`,
        name: R.path(['displayName'], profile),
        username: R.path(['displayName'], profile),
        email,
        imageUrl: photoUrl ? photoUrl.replace('_normal', '') : null,
      });
    },
  );
}

Answer 1

Hi @Nolt Integrations ,

This depends on which type of permission you are using if you are using delegated permissions then "user.read" is enough but if you are using application permissions then you need "User.Read.All". please see the below screenshot with notes.

Query:

GET https://graph.microsoft.com/v1.0//users/{id | userPrincipalName}/photo/$value

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".