经过身份验证的用户的 Firebase 存储规则私有 URL（没有 downloadURL 或 library）

Question

是否可以在不使用getDownloadURL或@firebase/storage getDownloadURL @firebase/storage库的情况下在我的 Web 应用程序中私下显示图像 ( <img/> )？

例如，我尝试了以下规则：

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

正如我的问题的评论部分讨论不，没有达到我的目的，而无需通过请求客户端获取图像。

但是，我设法找到了适合我们应用程序需求的解决方案，因此让我分享一下。

首先，内容有点多。 我们的应用程序的内容，即所见即所得的演示编辑器，由用户生成，并且在稍后阶段也可能公开共享。 这就是为什么我们需要拥有私人和公共资产。

此外，共享内容是 HTML 并且也是用户正在编辑的内容，因此它不是，或者至少对我来说不是，直接附加请求以获取图像。

幸运的是，我们确实使用了 Web Components，多亏了阴影内容，当图像公开时，它允许我混淆我不需要的内容。

分别地，在这种情况下，我没有使用<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是自定义事件详细信息）。

我们的项目是开源的，这里是我添加到我正在处理的 PR 中的相关提交。