Firebase や Google Cloud Platformの初回のサインアップその他の備忘メモ

16181 ワード
Firebase Vue.js OAuth GoogleCloudPlatform openid_connect OAuth テキストリンク

Firebase や Google Cloud Platform(以下GCP) を使ってみたときのTIPSをいくつか記事にしてるんですが、初回のサインアップなどの環境構築を記事化するのをサボってたので、その備忘。

の、はしょっていたところの補足メモの位置づけ。。

Firebaseのメイン画面

背景

発端はFirebaseのWEBアプリでFirebase認証のGoogleアカウントでログインする機能1を使おうとしてて、

  • あれ、FirebaseのapikeyってHTML/JS内に書かれちゃうけど漏れちゃっていいんだっけ？
  • ん？てかそもそもGoogle認証のClientID/ClientSecretっていつ払い出されてんだっけ？

などなど、インフラ化・自動化されてるがゆえに隠されていてわからないところが気になってしまって。
んじゃ、そもそもサインアップから環境を作り直してみるか、ついでにメモっておくか、、、というのが、が背景です。

なので最終的には、FirebaseのGoogle認証におけるOAuthクライアント機能について、GCP内のOAuthの機構とどういうつながりになってるかや、apikey 漏れるけど、実際なにかマズイんだっけ？？などを整理してみようとおもった、第一回目の記事。

今回はFirebaseとGCPへのサインアップ作業と、GoogleログインするときのFirebaseとGCPの関連の整理、あとは

const firebaseConfig = {
  apiKey: "AIzaSyBhRB23I7wUQCMhgFP5At2P5-TyJ93ii9k",
  authDomain: "fb-samples.firebaseapp.com",
  databaseURL: "https://fb-samples.firebaseio.com",
  projectId: "fb-samples",
  storageBucket: "",
  messagingSenderId: "1027493386569",
  appId: "1:1027493386569:web:2124601897bd1b97"
};

などapikeyなどを生成するところまで、をやってみます。

Firebaseのサインアップ

というわけでFirebaseのサインアップ。

https://firebase.google.com/ へアクセスし「使ってみる」をクリック

Googleのアドレス/パスワードを入力し、次へ

Firebaseのサインアップが完了。さっそくプロジェクトを作成します。「プロジェクトを作成」をクリック

プロジェクト名をつけます。今回は「fb-samples」としました。「続行」をクリック

Googleアナリティクスを設定し続行

ゴニョゴニョ入れて「プロジェクトを作成」をクリック

プロジェクト作成中、、、

完了しました！「続行」をクリック

プロジェクトの作成が完了しました。。

Google Cloud Platform (GCP)のサインアップ

つづいて Google Cloud Platform です。
https://console.cloud.google.com へアクセスし、アカウント情報を入力。

利用規約に「同意して続行」

右上のプレゼントのマークをクリックすると、

トライアル開始できるので「有効化」をクリック

ステップ1: 利用規約に同意して「続行」

ステップ2: いろいろ情報を入力します。

カード情報とか入力して「無料トライアルを開始」します。

サインアップできたようです。うえの「My First Project」をクリックしてみると、、、

先ほどFirebaseで作成したプロジェクト「fb-samples」と同じ名前のプロジェクトがすでに作成されていることがわかります。

GCPをサインアップした時にあらかじめ作成されるプロジェクトではなく「fb-samples」を選んでおきましょう。

認証機能をみてみる

さてさて「Firebaseにサインアップしてプロジェクト fb-samples を作成 」して「GCP側もサインアップが完了」して見てみたら、GCPにもfb-samplesというプロジェクトができていましたね。そのほかにも、実はFirebaseのFunctionsもGCPのCloud Functionsと共通だったり、FirebaseとGCPは密接に結びついています。

またFirebaseの認証機能はいろいろなOAuth Providerを簡単に利用できる機能が組み込まれていますが、もちろんその一つとしてGoogleのOAuthプロバイダを選択することができます。それに使われるOAuthのProvider(OIDC Provider)設定も、GCPのプロジェクト側に自動で作成されていたので、それを確認してみます。

FirebaseのAuthentication

まずはFirebase側から。プロジェクトの管理画面 >> Authentication >> ログイン方法 >> を選択

Googleを選択

下記のように「プロジェクトの公開名」が表示される画面になりました。また「ウェブ SDK 設定」をクリックすると

「ウェブ クライアント ID」「ウェブ クライアント シークレット」が表示されました。これはいわゆるOAuthにおけるClientIDとClientSecretです。正確には「GoogleをOAuth(OIDC) ProviderとしたOAuth ClientであるFirebaseアプリに対して、OIDCプロバイダが払い出したClientID/ClientSecret」 なわけですね。従って、このID/Secretは、GCP側の「fb-samples」プロジェクトのどこかで設定されているはずです。

GCPの認証情報

さてGCP側に移動して、左上のメニューから、 APIとサービス >> 認証情報 を選択します

「OAuth 2.0 クライアント ID」というのが表示されていますね。

名前の「Web client (auto created by Google Service)」をクリックすると詳細を見ることができますが、、

おお、上のほうに

クライアント ID:1027493386569-aoep2scui7vb8pccchavm4a7n2sn1u88.apps.googleusercontent.com
クライアント シークレット:i3jrIseRHBw2U70J4pdz1Sss

が表示されています。この値、Firebase側で見た 「ウェブ クライアント ID」「ウェブ クライアント シークレット」になっていますね。うん、たしかに、Firebaseアプリに対して「ウェブ クライアント ID」「ウェブ クライアント シークレット」が自動で払い出されていることがわかりました。。

さらには OAuth/OIDC はOAuthの処理シーケンスにおける「承認済みのリダイレクトURI」をあらかじめ設定する必要がありますが、下のところを見てみると、、、

https://fb-samples.firebaseapp.com/__/auth/handler

が自動的に承認済みに設定されていることがわかります。あとでちゃんと見てみますが FirebaseでOAuth Providerを使ったログインをする際はリダイレクト先が上記のURIとなる2ので、それがあらかじめ設定されているということですね。なるほど。

ついでに 左メニューより 「OAuth同意画面」を見てみると、下記のように「アプリケーション名」が、先のFirebaseの「プロジェクトの公開名」になっていたりすることがわかります。。

その他OAuth/OIDCの設定も作成済み

などなど。Firebaseの認証機能と Google Cloud Platform のOAuth/OIDC の設定についての整理でした。

Firebaseのプロジェクト内に、アプリを作成する

さてつづいて、Firebaseの「fb-samples」プロジェクト内に、アプリを作成してみます。
左メニューの歯車から「プロジェクトの設定」を選択

プロジェクトの定義が表示されます。ここの「ウェブ API キー」はいわゆる firebaseConfig の apikeyになります。

下のマイアプリより、タグのアイコンをクリックして、ウェブアプリを追加します

  • アプリのニックネームはなんでもOK(app001とかしました)。
  • 次のチェックボックスですが、Firebase Hosting(FirebaseのWEBサーバ)にのちに配置するつもりで、チェックをつけます。
  • 地球儀のところの文字列は最終的にURLに紐付きます。今回ひとつめのアプリなので「fb-samples」というプロジェクトの名前が自動設定されているので、そのままにしておきます。ちなみにその結果、Hostingした際のURLは fb-samples.firebaseapp.com となります。さらにちなみにですが、二つ目以降のアプリは先頭のprefixを世の中でUniqueになるように自分で適宜指定する必要があるみたいです。

そして「アプリを登録」をクリック。

WEBアプリにFirebase SDKを追加する説明が。とりあえず次へ。

Firebase CLI (開発マシンでのコマンドラインツール)の説明。とりあえず次へ。

Firebase CLIを使った、Hostingへのデプロイコマンドの説明。とりあえず「コンソールに進む」へ。

登録できたようですね。

さきほどのSDKの説明なども、ここからも確認できそうです。

FirebaseのSDK(JS)を読み込ませる設定1(自動)

FirebaseのSDK(JS)を読み込ませる設定2(CDN)

FirebaseのSDK(JS)を読み込ませる設定3(手動でやるパタン)

ネットのサンプルにもよくあるJavaScript内にapikeyを書いちゃうコードが取得できました。

最後にFirebaseのHostingの設定を見てみます。まだHTMLファイルなどをデプロイしていませんが、ドメイン「fb-samples.firebaseapp.com」「fb-samples.web.app」がすでに割り当てられてるのがわかります。

以上でアプリを追加してfirebaseConfigを取得するところまで、できました。

ためしに Firebase Hostingへデプロイするための環境構築手順 をやってみて、アプリをデプロイしてみましょう！

上記のサイトはVue.jsを用いてHTMLのサイトを作成しますので fb-samples.firebaseapp.com へデプロイできて、下記のようなVue.jsの画面が表示できればOKです。

以上おつかれさまでした。

まとめ

  • Firebase と Google Cloud Platform について、サインアップ方法を整理しました。
  • Firebase の Google でログインの機能は、GCPの同名のプロジェクトに設定された OAuth/OIDC プロバイダと連係して設定されていることがわかりました。
  • Firebase の一つのプロジェクトで、WEBアプリを1つ作成し、firebaseConfigを生成しました。
  • apikeyが漏れてもヘーキ？については、少なくとも OAuth ClientのClient Secret などは漏れることはなさそうだけど、まだちゃんと確認できずモヤモヤしています。
  • npm run devや firebase serve --only hostingなどのコマンドで、ローカルでWEBアプリを起動は出来るけど、HostingへのデプロイはちゃんとGoogleアカウントで認証できてないと、できない
  • Firestoreとかは、apikeyがあると読み書きできてしまいそうなので、Firestoreのルールなど何らかで保護しないとダメ、、。

ですかね。あらためてもう少し、整理してみようと思います。

おつかれさまでした。

関連リンク

  1. 正確にはOpenID Connect ProviderとしてのGoogleを用いて、GoogleアカウントでFirebaseアプリにログインする機構 ↩

  2. Firebaseをつかわないで普通にWEBアプリをつくってOAuth認可をやろうとすると、リダイレクト先も自分で用意してその結果、開発中だとlocalhostで、本番だとドメインになって、、とか割と煩雑なんですが、、その辺をFirebaseが受け取ってくれるのはラクですね。。 ↩