How to get Profile photo from MSAL in Angular

Question

I am getting the users Name and Email from MSAL graph, but I don't know how to get their profile photo from Microsoft account.

This is how I am getting name and email, it is working perfectly.

getName () : string {
      if (this.authService.instance.getActiveAccount() == null) {
        return 'unknown'
      }
  
      return this.authService.instance.getActiveAccount().name
    }
    getEmail () : string {
      if (this.authService.instance.getActiveAccount() == null) {
        return 'unknown'
      }
  
      return this.authService.instance.getActiveAccount().username
    }
  
    callProfile () {
      this.http.get("https://graph.microsoft.com/v1.0/me").subscribe( resp  => {
        this.apiResponse = JSON.stringify(resp)
      })
    }

Answer 1

You can checkout the Graph-Explorer (https://developer.microsoft.com/en-us/graph/graph-explorer) where you can explore what options there are on the me endpoint.

You will see the endpoint "https://graph.microsoft.com/v1.0/me/photo/$value" will return the photo.

Here an example with the fetch api in js:

const response = await fetch('https://graph.microsoft.com/v1.0/me/photo/$value', {
            headers: { Authorization: 'Bearer eyjo...' },
    });
    const pictureBlob = await response.blob();
    console.log(pictureBlob);