WebアプリでCloud Firestoreを使うときの設定

Cloud Firestoreを設定した時に躓いたので記録を残します。

# Firebaseでプロジェクトを作成
[Firebaseコンソール](https://console.firebase.google.com/?hl=ja)でプロジェクトを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/70b5a9e9-3245-2e9f-5ad8-865fbe0c5529.png)

* プロジェクト名を決める
* アナリティクスも一応設定。「日本」を選択しました。

無料のSparkプランでプロジェクトができました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/cc39d602-d5dc-48f9-0c5b-7b86a747397a.png)

# アプリを追加
Webなので</>マークを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/f6c4d6ba-ae5a-d6c6-3321-b25c1222bb5d.png)
アプリのニックネームを入力して「アプリを登録」
Firebase Hostingは使わないのでチェックしませんでした

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/93f0b4cf-576a-1b5f-4de9-8e0e91fa4dba.png)

SDKが表示されました

# Cloud Firestoreを設定
「Cloud Firestore」を押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/a17f4151-9dcd-227a-5174-66de3d82f9a0.png)
「データベースの作成」ボタンを押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/1e86444b-0475-0c37-f8f7-e3745b0956a6.png)
デフォルトのままで次へ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/4a617c2a-d131-0fbc-8b96-c6ac705ff829.png)

``asia-northeast1``を選択
設定後に変更できないという警告がでたので調べたけど、以下のドキュメントによると``asia-northeast1``が東京とのことなので大丈夫そう
https://cloud.google.com/datastore/docs/locations?hl=ja

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/b757362c-4b6e-2877-ecdd-a6ae958bf0c6.png)

できました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/e0482453-8f6a-1fe8-1717-2f64315cc5bc.png)
コレクションは自動で作成されるのでここまでで大丈夫です

# セキュリティルールを変える
セキュリティルールを「本番環境モード」で作成した場合、Webアプリからアクセスすると以下のようなエラーが出ます。

```
Uncaught Error in snapshot listener: FirebaseError: Missing or insufficient permissions.
```

セキュリティルールを確認すると、以下のようになっていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/4e99f04b-fa88-29f1-8700-939ed5557d71.png)

``false``のままでも、Firebase Admin SDK と組み合わせ、サーバーのみのバックエンドとして Cloud Firestore を使用する場合は、使えるようです。
公式サイトに「クローズド アクセス」として記載がありました。

https://firebase.google.com/docs/firestore/security/insecure-rules?hl=ja#closed_access

今回はSPAなので、上記の設定では動きません。
一番簡単な設定は、``if true``にすることですが、そのまま公開するとだれでもデータを窃取、変更、削除できてしまいます。

この設定は、公式サイトでも「安全でないルール」の一つ（オープン アクセス）として載っています。

https://firebase.google.com/docs/firestore/security/insecure-rules?hl=ja#open_access


そこで、
[Cloud Firestore を使ってみる](https://firebase.google.com/docs/firestore/quickstart?hl=ja#auth-required)にあるように、認証が必要な設定にします。

```
allow read, write: if request.auth != null;
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/48abb6ba-a613-5936-18ad-258728f87075.png)

ただし上記設定は、完全ではありません。
ログインしているすべてのユーザーがそのデータにアクセスできてはまずい場合は、別の設定になります。

例えば今回私が作っているアプリケーションはチャットですが、通常、チャット機能はメッセージが見られるユーザーが限定されると思います。
その場合の設定は、以下の公式サイトに載っています。

[安全でないルールを修正する - 認証されたユーザーのアクセス](
https://firebase.google.com/docs/firestore/security/insecure-rules?hl=ja#access_for_any_authenticated_user)

# SDKの確認方法
SDKを控えるのを忘れてしまった場合は、以下の場所から確認できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/ba636fc6-bcde-0801-3b48-8af32d8aeae8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/a2639d9c-6643-7570-0536-add4023e7be2.png)

# 追記
2021/04/10 [セキュリティルールを変える](https://qiita.com/okada3333/items/93a9767427808147e2ac#%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3%E3%83%AB%E3%83%BC%E3%83%AB%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B)について、間違えていたので修正しました