Serving user images from Google Cloud Storage in Vue

0
votes

Here is some background info for my project:

  • A Django backend API with Django Rest Framework to communicate with the frontend
  • A VueJS frontend (SPA) with Vuetify
  • User authenticates with username and password and I use JWT to authenticate api requests (python lib is djangorestframework-simplejwt)
  • I plan to host both frontend and API on the same Google App Engine
  • The app has a photo gallery. User can only see its own photos.

Now I am not sure how to serve the photos... I guess Google Cloud Storage is the way to go.

Option 1 Initially I thought it would be simpler to retrieve the photos with the backend as it can simply authenticate to Cloud Storage with a service account. But I guess passing photos from backend to frontend through a serializer will be very slow. There can be a few hundred photos.

Option 2 It is probably far more efficient to only send the urls to the frontend (only the urls of current user). The frontend then gets images (e.g. <v-img :src={{ photo.url }}>). The problem is the client needs to authenticate to Google to be able to have read access to Cloud Storage. At this point I am lost.

  • Should I use signed url?
  • Should I authenticate the client to Storage with OAuth 2.0 as described here. But as I understand it, it means user has to have a Google account and consent to terms, etc.
  • Can I have object-level permissions or is it necessarily bucket-level?

Thanks for any insight you may provide!

1
vue.jsauthenticationgoogle-cloud-platformdjango-rest-frameworkgoogle-cloud-storage
Arg... Just realized I missed this section developers.google.com/identity/protocols/oauth2#serviceaccount of the docs. Would that be the way to go for my use case? – Prikers
Actually, there is a library django-storages for handling remote media and it has integration with google cloud storage. so take a look at the docs – Bedilbek

1 Answers

0
votes

Reading your use case I would recomend using Signed URLs.

According to the official documentation :

A signed URL is a URL that provides limited permission and time to make a request.
Signed URLs contain authentication information in their query string, allowing users without credentials to perform specific actions on a resource

Signed URLs