<

I Made an API That Only Returns Google Account Images

How do you manage your profile picture? For example, do you update your Zenn profile picture? I often neglect to update my profile picture because it's a hassle. (It would be nice if we could use a SaaS like Gravatar...)

Recently, I was considering refreshing my portfolio page, and I was wondering what to do with my profile picture. The base document of the portfolio is written in Markdown.

I thought about setting the profile picture via an API instead of keeping it fixed, so I created the Google Account Photo API, which only returns Google account images.

The source code for the API is here(Github). I made it in about an hour, so I only looked at the normal pattern. (laughs) Please understand.

Which is the Google Account Image?

The Google account image is the image in the upper right corner displayed on www.google.com (only for those who are logged in).

Google Chrome Home Page

How to Use the API

To call the API, you need to prepare something called your Google account ID.

How to Find Your Google Account ID

You can find your Google account ID by running the Google People API Explorer.

When you run it, a field called resourceName(ex. people/<account_id>) is returned, and the account_id written there is yours.

Calling the API

The API is called by a GET request to the following URL. YOUR_ACCOUNT_ID is the account_id you obtained earlier.

https://google-account-photo.vercel.app/api/?account_id=YOUR_ACCOUNT_ID

When you call it, an image is returned. In my case, the following image is returned.

my google account image

Utilizing it in Markdown

With this API, you can display a profile picture just by writing the following Markdown!

![google account image](https://google-account-photo.vercel.app/api/?account_id=YOUR_ACCOUNT_ID)

Just this might be a bit bland, so let's use Cloudinary. Cloudinary allows you to process images just by setting URL parameters. For example, if you want to make the image a circle, you would write the following URL.

![circle google account image](https://res.cloudinary.com/demo/image/fetch/r_max/https%3A%2F%2Fgoogle-account-photo.vercel.app%2Fapi%2F%3Faccount_id%3DYOUR_ACCOUNT_ID)

I will omit the explanation about Cloudinary.

In my case, the following image will be displayed.

my_google_account_image_circle

For more details about Cloudinary, please check the following URL.

In Conclusion

I thought it's a convenient world where you can quickly build an API.

If it was helpful, support me with a ☕!

Share

Related tags