Can I display a G Suite User Photo with the just the thumbnailPhotoUrl?

Question

Question

Can a web app display a G Suite user's profile image using just the thumbnailPhotoUrl, or is it necessary to save and serve the image?

Context

This Guide describes how to get the image from the Directory API. But I'm not sure how to move from the get request to an image file I can display. There is mention of the Closure Library to use for Base64 encoding/decoding.

I'd like to use a link to the image, to use as the src of an img element.

What I've Tried

A firebase cloud function using a service account with domain-wide delegation is retrieving user data via https://www.googleapis.com/admin/directory/v1/users. This returns the thumbnailPhotoUrl, and I'm able to paste the URL into chrome and view the image. If I share the thumbnailPhotoUrl with someone else, they do not see the image but see the silhouette placeholder instead.

Note: the thumbnailPhotoUrl includes /private like this:

https://www.google.com/s2/photos/private/xyz123...

Is that a clue that this URL will not work in the web app to display the image?

Answer 1

You can embed the contents of the URL directly into your HTML document. It looks like this:

<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />

The magic part is taking the image binary data and base-64 encoding it for the img tag.

The format of the above example:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

This link provides more details and shows how to do this.