GCPコンソールの認証情報でAPIキーの利用を制限する方法（Browser key）

以下の記事の「GCPコンソール内の認証情報でAPIキーの利用を制限」の設定方法です。

Browser keyのHTTP リファラーに制限をかけることで、FirebaseのKeyが知られても他の人が使えないようにします。

GCPコンソールで設定

https://console.developers.google.com/apis/credentials を開きます。
以下の矢印のところが、対象のアプリになっていることを確認します。

APIキーのBrowser keyをクリック

以下の2箇所を設定して保存します。

① HTTP リファラー（ウェブサイト）を選択
② 許可するサイトを設定

注意

②ではlocalhostは設定しないようにします。
localhostがあると、せっかく制限をかけても、誰でもローカルから呼び出せてしまいます。
そのため、ここでは公開用のURLのみ設定します。

動作確認

設定完了後に、localhostから呼び出せなくなっていたら成功です。

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

設定したドメインでは、問題なくアプリケーションが動きます。

ローカルで開発しにくい

この設定をしてしまうと、localhostで動かず開発しにくいです。
そのため、私はlocal開発時は別のFirestoreを使うようにしました。