Firebaseストレージgotchas😅

写真でElement5 Digital on Unsplash
あなたがいくつかの労働日を取り戻した最後の時はいつでしたか?
私は最近、コンテンツに加えて、私たちのWebエディタのすべてのユーザーのためのプライベートな資産を作るためにいくつかの時間を取った.DeckDeckGo .
つの労働日後、私は最終的に私は1つの基本的なポイントを誤解して気づいたGoogle Cloud Storage そして、私は我々の資産が実際にあったので、私が私の新しい実装を復帰しなければならないとわかりました😅. だから私はこの新しいブログ記事を書いています.

ルール：ストレージは、Firestoreへのアクセスを持っていません

物事が書かれていない時には、自分がそうでないなら、自分自身を求めています🤔.
暗記することによって記憶規則を書くことができるFirestore 別の製品からFirebase製品にアクセスする可能性は現在ありません.

ルール:ユーザは権限を読み書きする

認証されたユーザだけへのアクセス、読み取り、書き込みを制限することができます.

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

しかし、上記の規則は、ユーザーが他のユーザーによって提供されるデータを上書きできるということをまだ意味します.この問題を解決するために、それぞれのユーザのデータをそれぞれのストレージに格納することができますuserId .
たとえば、使用している場合Firebase JavaScript SDK , アップロードは次のようになります.

const ref: Reference =
      firebase.storage().ref(`${userId}/assets/photo.jpg`);

await ref.put(data);

一旦その構造体で注文された記憶ファイルが一度、次のような規則を定義することができます.

rules_version = '2';

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

ストレージ参照

パブリックファイルやプライベートファイルにアクセスするには、与えられたルールアクセスを使用して、次の部分を使用できます.

<img src={`https://firebasestorage.googleapis.com/v0/b/${projectId}.appspot.com/o/${encodeURIComponent(path)}?alt=media`}/>

どこ${projectId} FireBaseプロジェクトのIDと${path} エンコードされなければならないストレージ(文字列)内のファイルへのパスencodeURIComponent 順応するために.

取得：OAuth 2で安全にアクセスイメージ

我々が上記の規則を定義するならば、認証されたユーザーだけへの保管へのアクセスを許可する他の規則を定義するならば、彼のブログ柱で示されるブライアンバーマンとしてOAuthHow To Access Images Securely with OAuth 2.0 ”.

try {
    const imgSrc: string = 
      'https://firebasestorage.googleapis.com/.../photo.jpg';
    const rawResponse: Response = await fetch(imgSrc, {
        method: 'GET',
        headers: {
            'Authorization': `Bearer ${firebase_user_auth_token}`
        }
    });

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

    const blob: Blob = await rawResponse.blob();
    document.querySelector('img').src = URL.createObjectURL(blob);
} catch (err) {
    console.error(err);
}

パブリックがプライベート

これは私の最大の“gotcha”と私は仕事の時間を反転理由です.
ストレージにアップロードされたすべての単一の資産に対して、FireBaseを作成します.downloadUrl あなたのルールにかかわらず、パブリックで、インターネット上でアクセス可能です.しかし、URLが含まれているのでtoken 誰も推測することが本質的に不可能です、これらのURLは、私たちが誰とでもこれらを共有しない限り、個人です.
例を挙げるdownloadUrl トークンがファイルへのアクセスを許可するパラメータとして使用される場合.

<img src={`https://firebasestorage.googleapis.com/v0/b/${projectId}.appspot.com/o/${path}?alt=media&token=4733325a-78ff-444d-a67c-01fd8ab30fe`}/>

これは、私のプロセスの転換点であり、私はそれについての私の質問に答えてくれたことに感謝しなければならないStackOverflow .
確かに、サーバー側からクラウドソリューションを使用している場合、FireBaseにこのURLを生成しないように指示するのであれば、Web/クライアント側からは確実にできません.

ダウンロードする

Firebaseストレージトークンが期限切れになりません(参照)StackOverflow ). したがって、他の変更なしにdownloadUrl また、期限切れで、利用できないままでいてください.しかし、特定のURLを無効にするには、Firebaseコンソールで可能です.しかし、一度無効になった場合、downloadUrl それぞれ新しいtoken を選択します.
また、各々の上書きのために、FireBaseも新しいtoken . これは、例えば、我々のアプリケーションのユーザーがファイルをアップロードすることができるならば、彼らが名前を変えずに再びファイルをアップロードするたびに、新しいdownloadUrl が自動的に作成されます.
それは私の学習の要約です.Firebaseストレージは間違いなくソフトウェアの信じられないほどの開発者フレンドリーな作品とすべてのコンテンツとすべての単一のユーザーの資産DeckDeckGo 彼らが公に彼らのプレゼンテーションを共有することに決めるまで、個人的です.
無限に
ダビデ