从 flutter web 应用程序将 firebase 存储授权作为 url 参数发送

Question

我想知道如何使用用户 ID 令牌作为 url 中的参数向 firebase 存储发出授权请求。现在使用 'request.auth != null' 的 firebase 规则，我收到 403 网络错误（无法加载视频：您无权访问所请求的资源）。这是我的 GET 请求 url:

https://firebasestorage.googleapis.com/v0/b/<bucket>/o/<folder_name>%2F<video_name>.mp4?alt=media&auth=eyJh...<ID TOKEN>...Ll2un8ng

-在没有 firebase 规则的情况下，我能够通过此请求成功获取资产 url https://firebasestorage.googleapis.com/v0/b/<bucket>/o/<folder_name>%2F<video_name>.mp4?alt=media

-也尝试了 token=, token_id=, tokenId=

-不使用 firebase SDK 获取文件的原因是我可以使用 flutter video_player (https://pub.dev/packages/video_player#-example-tab-) 包并将其与 firebase 中的文件一起使用，我提到了这个如果现在有更好的方法在 flutter web 中使用 video_player 库：

_controller = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
      closedCaptionFile: _loadCaptions(),
    );

[编辑] 似乎无法将身份验证作为查询参数传递。经过一番探索，我找到了一种可接受的方式，仍然可以将 video_player 与受保护的 firebase 资产一起使用（如果您不使用规则来保护它们，则可以直接使用 firebase url）。我将 post 一些常规步骤和一些示例代码：

使用Storage Firebase SDK包获取Uint8List，getDownloadURL给出的uri有正确的header auth，例如

import 'package:firebase/firebase.dart';
final url = await storagePath.getDownloadURL();
final response = await http.get(url);
if (response.statusCode == 200) {
  return response.bodyBytes;
}

使用 Uint8List 缓冲区初始化一个 Blob 对象，您将使用它来创建一个 ObjectURL，它基本上为您提供与文件相同的界面 url 用作网络 url您的视频播放器

final blob = html.Blob([data.buffer], 'video/mp4');
final videoUrl = html.Url.createObjectUrl(blob);
videoPlayerController = VideoPlayerController.network(
          videoUrl)
        ..initialize().then((_) {...

就是这样。

Answer 1

在内部，这个包为 flutter-web 做的所有事情都是从包 dart:html 中创建一个 HtmlElementView 小部件 here for which it passes a VideoElement (ref here) 提供的 URL 转换为 <Video> 标记在您网页的影子 dom 元素内。错误 403 也可能意味着您正在尝试从其他来源访问它。

我建议采用以下方法。

检查您的控制台是否存在任何与 CORS 相关的错误。如果是，那么您将必须在 firebase 存储中将 ip/domain 列入白名单。检查这个 for possible approach and more details here.
检查您是否能够按照您的建议使用授权令牌作为查询参数直接访问 URL。如果不是，那么这不是访问对象的正确方法，应该更正。您可以使用确切的错误详细信息更新问题。

Answer 2

Firebase Storage REST 不（正确地）支持来自 GET 查询字符串的授权，正如您尝试做的那样。相反，它使用标准 Authorization header（参见 here）。

Firebase 云存储内部使用 Google 云存储。 Mentioned here

如果您使用的库尚不支持 HTTP headers，您必须考虑替代方案。您在评论中提到的问题表明该功能仍在开发中，因此您也可以等待库出来支持 headers.

从 flutter web 应用程序将 firebase 存储授权作为 url 参数发送

Send firebase storage authorization as url parameter from a flutter web app

firebase

firebase-authentication

flutter

flutter-web

flutter-video-player