Get user profile picture in Microsoft Graph

Question

I would like to retrieve my profile picture using python and display it on profiles.html.

"...gif;base64,(variable)" alt="profile">?

I believe I need to change the (variable) response however I have struggles in converting it and what I should convert it to.

Here is what I have tried:

profiles.html:

{% extends "tutorial/layout.html" %}
{% block content %}
<h1>Profile</h1>
<img id="test" src="data:image/gif;base64,{{output_image}}" alt="profile">
{% endblock %}

graph_helper.py

def get_profiles(token):
    graph_client = OAuth2Session(token=token)

    profiles = graph_client.get(f"{graph_url}/me/photo/$value", stream=True)
    return profiles.raw.read()

views.py

def profiles(request):

    token = get_token(request)

    profiles = get_profiles(token)

    return render(request, 'tutorial/profiles.html', {"output_image": profiles})

However I receive an error code

This site can’t be reachedThe web page at data:image/gif;base64,b'\xff\xd8\xff\xe0\x00\x10JFIF\x00\x01\x01\x01\x00\x00\x00\x00\xff\xdb\x00C\x00\x08\x06\x06\x07\x06\x05\x08\x07\x07\x07\t\t\x08\n\x0c\x14\r\x0c\x0b\x0b\x0c\x19\x12\x13\x0f\x14\x1d\x1a\x1f\x1e\x1d\x1a\x1c\x1c $.' ",#\x1c\x1c(7),01444\x1f'9=82<.342\xff\xdb\x00C\x01\t\t\t\x0c\x0b\x0c\x18\r\r\x182!\x1c!22222222222222222222222222222222222222222222222222\xff\xc0\x00\x11\x08\x01\x00\x00\xc9\x03\x01"\x00\x02\x11\x01\x03\x11\x01\xff\xc4\x00\x1f\x00\x00\x01\x05\x01\x01\x01\x01\x01\x01\x00\x00\x00\x00\x00\x00\x00\x00\x01\x02\x03\x04\x05\x06\x07\x08\t\n\x0b\xff\xc4\x00\xb5\x10\x00\x02\x01\x03\x03\x02\x04\x03\x05\x05\x04\x04\x00\x00\x01}\x01\x02\x03\x00\x04\x11\x05\x12!1A\x06\x13Qa\x07"q\x142\x81\x91\xa1\x08#B\xb1\xc1\x15R\xd1\xf0$3br\x82\t\n\x16\x17\x18\x19\x1a%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz\x83\x84\x85\x86\x87\x88\x89\x8a\x92\x93\x94\x95\x96\x97\x98\x99\x9a\xa2\xa3\xa4\xa5\xa6\xa7\xa8\xa9\xaa\xb2\xb3\xb4\xb5\xb6\xb7\xb8\xb9\xba\xc2\xc3\xc4\xc5\xc6\xc7\xc8\xc9\xca\xd2\xd3\xd4\xd5\xd6\xd7\xd8\xd9\xda\xe1\xe2\xe3\xe4\x...(+more characters) might be temporarily down or it may have moved permanently to a new web address. ERR_INVALID_URL>

Can you try the above Graph API call in Microsoft Graph Explorer to see if you can repro the issue or not? — Dev
@Dev Thanks for your response, it has allowed me to re-think how I should ask this question which I will change to reflect the problem. How would I go about converting the code I received to the correct code that the .html needs to display my profile picture? "...gif;base64,(insert code)" alt="profile">? — Jaden-Dz99
When you use the /photo/$value endpoint to get the binary data for a profile photo, you'll need to convert the data into a base-64 string in order to add it as an email attachment. I see that you want to display the image on a web page, create an in-memory object from the image and make that object the source of an image element. I remember a JavaScript sample: const url = window.URL || window.webkitURL; const blobUrl = url.createObjectURL(image.data); document.getElementById(imageElement).setAttribute("src", blobUrl); — Dev
Graph will send you data back as a stream, and you need convert that stream to base64 — mxr7350

Jaden-Dz99 Jaden-Dz99 · Accepted Answer · 2020-11-29T12:33:56

Thanks guys for leading me to the right direction, this was the exact code that I was able to use to answer the question.

In my graph_helper.py:

def get_profiles(token):
graph_client = OAuth2Session(token=token)

query_params = {
    "accept-encoding": "gzip, deflate"
}
photo_response = graph_client.get(f"{graph_url}/me/photo/$value", stream=True)
photo_status_code = photo_response.status_code
if photo_response.ok:
    photo = photo_response.raw.read()
    test = base64.b64encode(photo).decode('utf-8')
    # note we remove /$value from endpoint to get metadata endpoint
    metadata_response = graph_client.get(f"{graph_url}/me/photo/")
    content_type = metadata_response.json().get('@odata.mediaContentType', '')
else:
    photo = ''
    content_type = ''

return test

In profiles.html

<img class="profile_pic" src="data:image/png;base64,{{output_image}}" alt="___" style="width:50%">

Get user profile picture in Microsoft Graph

1 Answers