I'm trying to get Office 365 Contact Photos using Microsoft Graph's /photo. I want to display these images on a web page. The response returned from the api contains links for each image, but these links need a Bearer access token, and when I try to access these links, I got the following error:

{"error": {"code": "InvalidAuthenticationToken","message": "Bearer access token is empty.",}}

This is the code:

fetch("https://graph.microsoft.com/v1.0/me/contacts/" + item.id +"/photo/$value", options).then(function (response) {console.log("the response is", response);}).catch(function (error) {console.log("error : ", error);});

Is there any way to add this token the URL returned by the API? Any suggestion?

    There isn't a preauthorized URI for user/group/contact photos available.

    Instead, retrieve the image on your backend and serve it out to the page like a normal image asset. Aside from removing the authentication issue, it will allow you to cache those images for a period of time rather than pulling down every time.

    Alternativly, you can convert the image to base64 and return it as a Data URI that you can use directly in an <image> tag like this:

    <image src="http://stackoverflow.com/data:image;base64,{data}" />
    • Thank you for your response, do you mean to convert the image in the backend side also?– Mahmoud Abd AL KareemFeb 13 at 17:33
    • do you mean to add another request with that token for each image?– Mahmoud Abd AL KareemFeb 13 at 17:44
    • 1
      The idea is to offload this to your server. It's a heck of a log easier and more efficient to retrieve the file on the server, convert it to base64 and return the Data URI than downloading and converting it in memory on the client side.– Marc LaFleurFeb 13 at 17:47

    You need to add the Authorization Header to your HTTP-Request

    HeaderName: "Authorization"

    Content: "Bearer < token >"

    Your Request message will look sth. like this

    fetch("https://graph.microsoft.com/v1.0/me/contacts/" + item.id + "/photo/$value", {headers: {'user-agent': 'Mozilla/4.0 MDN Example','content-type': 'application/json''Authorization' : 'Bearer <AuthToken>'},method: 'GET', // *POST, PUT, DELETE, etc.})

    See https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch for detailed description how to add the header

    And https://developer.microsoft.com/en-us/graph/docs/concepts/auth_overview for more information about Graph Auth Tokens

      Your Answer


      By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

      Not the answer you're looking for? Browse other questions tagged or ask your own question.