Ways to using Google storage buckets on frontend by token without user creation - google-cloud-storage

Question

I have a client - server application that stores files on the server, however I would like to integrate google cloud.
I must say right away that the user can log in by email, as well as by phone (in this case, he will not have an email).
My main task is to make the frontend for each specific user be able to upload files directly to Google cloud storage (without the right to delete them)
My main idea is to give a specific user the right to add new files to a specific scope. At first, I thought that I would create a service account with administrator rights on the backend and give access to a specific basket folder to a specific user using my backend. However, as far as I understand, it is better to create a separate bucket for each user and give the user the right to create new files.
The main problem is how do I give the frontend a token that will contain the right to add only to this bucket.
Initially, I hoped that I could create some kind of token without creating a user entity on the Google Cloud side.
But after a little googling, I realized that I need to use IAM.
IAM offers several options for user identification:
Google Account email: user#gmail.com - But as I wrote earlier, I may not have an email, but just a phone number
Google Group: admins#googlegroups.com - Not my option
Service account: server#example.gserviceaccount.com - But as far as I understand, service accounts are not allowed on the frontend.
Google Workspace domain: example.com - Not my option
Perhaps there are some other options. Ideally, I would like a permanent token, for a specific bucket without creating a user on the Google storage side, since I already have a user in my own database.

Answer 1

I found a solution, the only one that is suitable for a similar task. These are Signed URLs.
The logic is next: The client asks server for a link to upload a file, the server creates a signed link that is available for a certain time, and the client makes a put request by upload the desired file on GCS.
Here is an example in all languages how to create such a link
Here is a simple example of how to upload a file to google cloud storage on the frontend using such a link:
<div>
<label htmlFor="inventoryPicture">Choose file to upload</label>
<input type="file" name="someFile" accept=".jpg" id="photo"/>
</div>
<script>
document.getElementById('photo').addEventListener('change', async (event) => {
const file = event.target.files[0];
//your signed url:
const url = 'https://storage.googleapis.com/your-bucket/123.jpeg?X-Goog-Algorithm=...';
try {
const response = await fetch(url, {
method: 'PUT',
body: file,
});
} catch (error) {
console.error('Error:', error);
}
});
</script>