Help us understand the problem. What is going on with this article?

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

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

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

Firebaseのメイン画面
main001.png

背景

発端は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/ へアクセスし「使ってみる」をクリック
F01.png

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

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

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

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

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

プロジェクト作成中、、、
F08.png

完了しました!「続行」をクリック
F09.png

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

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

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

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

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

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

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

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

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

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

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

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 >> ログイン方法 >> を選択
O04.png

Googleを選択
O05.png

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

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

GCPの認証情報

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

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

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

おお、上のほうに

クライアント 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の「プロジェクトの公開名」になっていたりすることがわかります。。
O08.png

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

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

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

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

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

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

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

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

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

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

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

登録できたようですね。

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

おつかれさまでした。

関連リンク


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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away