プログラミング

Firebase を利用する手順

投稿日:2019年9月3日 更新日:

1. Firebase について

Firebase は Googleが提供している BaaS サービスです。

BaaS は Backend as a Service の略で、以下を 提供してくれるサービスです。

  • アプリケーションに必要ないろいろな機能を提供してくれるサーバー
    • 認証 (各種認証機能)
    • Cloud Firestore(NoSQL クラウド データベース オススメ)
    • Realtime Database (NoSQL クラウド データベース)
    • Cloud Functions(サーバー側に登録したコードを実行する)
    • Hosting (静的ファイルのホスティングサービス)
    • Cloud Storage (リソースとなるファイルの保存など)
    • etc.
  • それを操作するためのAPI(ライブラリ)
    • Firebase JavaScript SDK

様々なプログラミング言語に向けた Firebase ライブラリが用意されています。JavaScript用のライブラリもあるため、ウェブアプリに関して言えば サーバー側のプログラミング言語には関係なく導入することができます。

ということなので、ウェブアプリにおける Firebase とは

ウェブサイト(ウェブアプリ)に JavaScript のライブラリを追加するだけで、様々な機能が利用できてしまうサービス

であると言えます。

※ 自分でウェブサーバーを持っていない場合には、ホスティングサービスも用意されています。

※ 無料枠があり、ある程度のところまでは無料で使うことが可能です。

2. Firebase を利用する手順

本記事では、ウェブアプリで Firebase を利用する手順について説明します。この場合、ライブラリは Firebase JavaScript SDK を利用することになります。

a. 既存のWebページに Firebase を追加する

(1) Firebase コンソールサイト上から プロジェクトを作成します。

(2) アプリを登録します。

今回は「ウェブ」を選択します
アプリのニックネームを入力します
  • Firebase SDK を読み込んで初期化するスクリプトが表示されるので、自分の HTMLファイルにコピー&ペーストします。

参考

b. 認証 (Authentication) を利用する

ここでは、認証方法として「Google アカウント」を利用する例を示します。

(1) Firebase コンソールサイト の Authentication ページを開きます。

(2) ログインプロバイダとして、Google を有効にします。

(3) 「承認済みドメイン」に、ウェブサイトのドメインを追加します。

  • OAuth認証用のホワイトリストにドメインを追加している。

(4) Google Cloud Platform サイトの [API とサービス] – [ドメインの確認] から、ドメインを追加します。

  • 外部ドメインに Webhook 通知を送信できるようにする。
  • DNS の TXTレコードを使って、ドメインの所有権を確認する。
ドメインの所有権確認は、利用しているドメイン名プロバイダによって方法が異なる場合があります

(5) [API とサービス] – [認証情報] に作成されている OAuth 2.0 クライアント ID に対して、以下を追加します。

  • [承認済みの JavaScript 生成元] :URLスキーム + ドメイン
  • [承認済みのリダイレクトURI] :認証後戻ってくるURL

(6) [API とサービス] – [OAuth 同意画面] において、[承認済みドメイン] にドメインを追加します。

(7) ブラウザのキャッシュ(画像とファイル)をクリアします。

  • これをやらないとエラーが起きるため。

(8) index.html に、以下のサンプルコードをコピー&ペーストします。

c. Cloud Firestore を利用する

(1) Firebase コンソールサイト から、Cloud Firestore を作成しておきます。

(2) firebase-firestore.js を読み込ませます。

(3) firebase.firestore オブジェクトを使って、いろいろ処理を書きます。

参考

d. Realtime Database を利用する

(1) Firebase コンソールサイト から、Realtime Database を作成しておきます。

(2) firebase-database.js を読み込ませます。

(3) firebase.database オブジェクトを使って、いろいろ処理を書きます。

参考

3. おわりに

まずは、大雑把に書いてみました。

今後もう少し細かい情報を補足していければいいなと思っています。

4. 参考

📂-プログラミング

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Web Programming

サーバーからブラウザを通じてデスクトップ通知する方法(Push API を利用)

Push API を使ってサーバーからブラウザにメッセージを送る方法について説明しています。

定期的にDOM要素をアニメーションするサンプルを用意しました

定期的にDOM要素をアニメーションするサンプルを用意しました。 DOM要素が対象ですので、div要素や img要素などが動かせます。 目次1. デモ2. ソースコード3. まとめ4. 参考 1. デモ …

Canvasでの回転

Canvas に回転した画像を表示するサンプルページを作りました

Canvas に回転した画像を表示するサンプルページを作りました。 Canvas の標準の機能では用意されていない操作なので、自分でこの処理を書く場合は少々面倒な記述が必要になります。 目次1. スク …

Web Programming

以前作っていた静的サイトの開発に関するメモ

以前、静的なツールでウェブサイトを作っていたのですが、その開発に関するメモです。完全にメモであることをご了承下さい。 目次方針使用しているツール新たなページを作成する時の大まかな流れ1. 新たなページ …

Web

OpenID Connect の処理フロー

OpenID Connect の処理フローを図にしました。