Firebase Storage Rules Частный URL для аутентифицированных пользователей (без downloadURL или библиотеки)

Question

Возможно ли частное отображение изображения (<img/>) в моем веб-приложении без использования библиотеки getDownloadURL или @firebase/storage?

Например, я попробовал следующее правило:

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/images/{allPaths=**} {
      allow write: if request.auth.uid == userId;
      allow read: if request.auth.uid == userId;
    }
  }
}

и моя страница html содержит изображение вроде:

<img src="https://firebasestorage.googleapis.com/v0/b/{projectId}.appspot.com/o/{userId}/images/yolo.jpg?alt=media/>

Эта страница отображается только для аутентифицированного пользователя, но, тем не менее, даже после успешного входа в систему, я все равно получаю 403, когда пытаюсь Отобразите изображение, как показано выше.

Я предполагаю, что запрос img https не содержит никакой информации об авторизации, поэтому он не проходит.

Поэтому мой вопрос, есть ли способ получить файл личного хранилища без использования библиотеки Firebase для загрузки изображения / файла?

Answer 1

Как обсуждалось в разделе комментариев моего вопроса НЕТ , достичь цели без извлечения изображения через запрос на стороне клиента невозможно.

Однако мне удалось найти решение, которое соответствует потребностям нашего приложения, поэтому позвольте мне поделиться им.

Во-первых, немного больше контента. Содержимое нашего приложения, редактора презентаций WYSIWYG, создается пользователем и, на более позднем этапе, может быть открыто опубликовано. Вот почему нам нужно иметь личные и общедоступные c ресурсы.

Кроме того, общий контент - HTML, и он также является тем, что пользователь редактирует, поэтому его нет или, по крайней мере, для я не был так прям, чтобы прикреплять запросы для извлечения изображений.

К счастью, мы используем веб-компоненты, которые, благодаря теневому контенту, позволяли мне запутывать то, что мне не нужно, когда изображение опубликовано c.

Соответственно, в этом случае вместо использования элемента <img/> я использовал наш компонент <deckgo-lazy-img/>.

npm install @deckdeckgo/lazy-img

Именно поэтому я улучшил компонент и добавил новое свойство boolean custom-loader. При переключении на true вместо отображения изображения при пересечении окна просмотра компонент будет выдавать события custom-load, которые могут быть перехвачены для загрузки изображения с пользовательским кодом.

Поэтому я просто добавить, чтобы найти элемент компонентов в моем приложении и установить для свойства значение true. Также следует отметить, что свойства не отражаются в dom, поэтому мой оригинальный вопрос решается, поскольку содержимое пользователя не изменится.

html:

<deckgo-lazy-img img-src='https://firebasestorage..'/>

javascript:

document.querySelector('deckgo-lazy-img').customLoader = true;

Наконец, я добавляю, чтобы добавить прослушиватель событий для перехвата пользовательского события:

document.addEventListener('customLoad', this.onCustomLoad, false);

Пользовательский, который предоставляет информацию imgElement ( затененное изображение) и imgSrc (фактический источник изображения, указанный в качестве атрибута компонента).

А затем обрабатывает загрузку изображения в хранилище Firebase, аутентифицируя запрос с помощью токена зарегистрированного Пользователь, так как я хотел сохранить свои вышеупомянутые правила.

try {
  const rawResponse: Response = await fetch(detail.imgSrc, {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${your_user_auth_token}`
    }
  });

  if (!rawResponse || !rawResponse.ok) {
    console.error(`Image ${detail.imgSrc} can not be fetched.`);
    return;
  }

  const blob: Blob = await rawResponse.blob();
  detail.imgElement.src = URL.createObjectURL(blob);
} catch (err) {
  console.error(err);
}

(где detail - пользовательская деталь события).

Наш проект с открытым исходным кодом, здесь связанный commit Я добавил в PR, над которым я работаю.