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

Nolt Integrations 0 Reputation points
2023-04-23T08:58:23.8066667+00:00

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,
      });
    },
  );
}
Microsoft Graph
Microsoft Graph
A Microsoft programmability model that exposes REST APIs and client libraries to access data on Microsoft 365 services.
10,809 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. 2023-05-11T07:01:31.4933333+00:00

    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.

    User's image

    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".

    0 comments No comments