On

In this post I'll explain how to get user profile out of Azure AD and render it using a simple React component, if you are not familiar with Microsoft Graph, you can can start getting more familiar with Microsoft Graph using https://docs.microsoft.com/en-us/graph/ as starting point and maybe use graph explorer to test some of these endpoints.

The main endpoint we are going to use here is me/people which lists the people that is relevant to you. a sample of what this endpoint returned by default is shown below


If we take a quick look at what me/people endpoint returns , it's not only user information  it's a collection of Persons and Groups and within Person includes "OrganizationUser" and Contacts.

It's easy to render any of these properties however, what we need to display is the user image, which is not retrieved using the People endpoint. for each item we have to create another call to the /user/{id}/photo/$value endpoint if it's an "organization user" otherwise we would use /me/contacts/id/photo/$value the response for this is either 404 if there is no image uploaded or it's a ReadableStream

The key is to convert what we have  which would be an object of type ReadableStream to a blob Url and then render it in an HTML image tag


another mechanism is to build a proxy API that stores the image in an online cache and request user-based images it's somehow similar to a mechanism I've used before in this 3 years old post http://www.sharepointtweaks.com/2016/01/officedev-the-new-intranet-loosely-coupled-approach.html