firebaseとは

Firebaseとは

firebase.png

Firebaseは、Googleが提供するバックエンドサービスです。いわゆる、BaaS(Backend as a Service)です。 Firebaseは、バックエンドのサービスを担ってくれるので、開発者はアプリケーションの開発に専念することができ、バックエンドで動くサービスを作成、管理する必要はありません。 そのため、素早くアプリケーションをリリースるることができます。 Firebaseは、iOS/AndroidアプリからWebサービスまで幅広く使えます。

Firebaseには、以下のような様々な機能が提供されています。

  • Firebase Authentication

アカウント機能を提供します。メールアドレスとパスワードを使用した一般的な認証の他に、電話番号、匿名認証、TwitterやGoogleアカウント、FacebookなどのSNS認証を使用できます。

  • Realtime Database

オブジェクト型のNoSQLデータベースです。その名の通り、リアルタイムでクライアント全体の情報を同期することができます。データベースの状態を監視して変更があった場合、自動で更新してくれるので、簡単にチャット機能を実装することができます。

  • Cloud Firestore

上記のRealtime Databaseの性能をさらに向上させた、新しいデータベースです。基本的に特別な事情がない限りこちらがおすすめされています。Realtime Databaseと異なり、データをドキュメントで保存します。

  • Cloud Storage

写真や動画など、バイナリーデータを保存するストレージです。

  • Firebase Hosting

HTML、CSS、JavaScriptで構成されたWebアプリケーションなど、静的なページを公開するためのホスティングサービスです。CDNを利用して、コンテンツを高速に配信することができます。

  • Firebase Analytics

アプリの使用状況や、ユーザーの行動などを把握することができます。 500以上のイベントに関するレポートを無制限に生成できます。

  • Firebase Crashlytics

アプリケーションのクラッシュレポートを送信します。

これらの機能はFirebaseの提供するすべての機能のほんの一部にしかすぎません。すべての機能を知りたい場合には、ぜひ公式サイトを確認してみてください。

プロジェクトを作成する

実際にFirebaseのプロジェクトを作成します。Googleアカウントがない場合には先に作成しておく必要があります。

プロジェクトの追加

まずはFirebaseのコンソールへ移動します。 プロジェクトの作成をクリックしましょう。

スクリーンショット 20200412 21.45.15.png

適当にプロジェクトの名前を付けます。 スクリーンショット 20200412 21.47.39.png

いくつかの項目を聞かれるので(Google Analticsの使用の有無など)確認したら続行をクリックします。

以下のような画面になったらプロジェクトの作成は完了です。 スクリーンショット 20200412 21.48.28.png

Firebaseを利用するためのAPIキーを取得しましょう。今回はJavaScript使用するので、Webアプリケーションのアイコンをクリックします。

スクリーンショット 20200412 21.55.10.png

適当なアプリケーションの名前を付けましょう。 スクリーンショット 20200412 21.51.43.png

JavaSriptのコードが出てくるので、コピペして使用します。 スクリーンショット 20200412 21.52.12.png

これで基本的なFirebaseの設定は完了です。

Firebase Authentication

実際にFirebase Authenticationを試してみます。 ログイン認証に様々な方法が使えますが、今回はGoogleアカウントを用いた認証を行います。 理由はAPIキー等の入手の必要がなく、とても簡単だからです。(ちなみにTwitter APIはAPIの利用に審査が必要で、審査の申請を出すために利用理由を英語で200文字以上入力する必要があるなどかなり面倒です)

次のような簡単なログインボタンとログアウトボタンだけが表示されるHTMLファイルを用意しました。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style>
    .hide {
      display: none;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <button id="login">ログイン</button>
  <button id="logout" class="hide"></button>

  <script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-auth.js"></script>

  <script>
    // Your web app's Firebase configuration
    var firebaseConfig = {
      apiKey: "AIzaSyDPOIelluKaZv8--wAksjl9CZrrOdqYJ40",
      authDomain: "awesome-wares-264812.firebaseapp.com",
      databaseURL: "https://awesome-wares-264812.firebaseio.com",
      projectId: "awesome-wares-264812",
      storageBucket: "awesome-wares-264812.appspot.com",
      messagingSenderId: "850229978924",
      appId: "1:850229978924:web:8c88bd3497c24449766e89"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  </script>
  <script src="./firebase.js"></script>
</body>
</html>

これをもとにfirebase.jsにコーディングしていきましょう。

Googleプロバイダオブジェクトのインスタンスを作成

Firebase Authentication機能を利用するためには、基本的にはfirebase.auth()の名前空間で作業をします。 auth用のCDNも忘れずにfirebase-app.jsの後に読み込むようにします。 <script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-auth.js"></script> Firebase Auth 自体は多くのサービスプロバイダのOAuthのラッパーとなっています。 Googleアカウントを利用するので、Googleサービスプロバイダを呼び出しましょう。

const provider = new firebase.auth.GoogleAuthProvider()

ログインボタンがクリックされたときに認証を行う

早速認証を行いましょう。ログインボタンが押されたときに認証がされるようにしたいので、ログインボタンのDOMを取得してclickイベントを購読しましょう。

const loginBtn = document.getElementById('login')

loginBtn.addEventListener('click', () => {
  // この中に認証コードを書く
})

認証するさいには、ポップアップウィンドウを表示するか、ログインページにリダイレクトするか選択できます。

  • ポップアップでログイン

signInWithPopupを呼び出す。

  • ログインページにリダイレクトでログイン

signInWithRedirectを呼び出す。

今回はポップアップをでログインをしましょう。以下のように呼び出します。

loginBtn.addEventListener('click', () => {
  firebase.auth().signInWithPopup(provider).then(result => {
    // GoogleプロパイダのOAuthトークンを取得します。
    const token = result.credential.accessToken
    // ログインしたユーザーの情報を取得します。
    const user = result.user
  }).catch(function(err) {
    console.error(err)
    // エラー処理
  })
})

ここまでできたら早速ログインボタンをクリックしてみましょう!

認証方法をプロジェクトで有効化する

おっと!エラーが発生してしまいました!コンソールには次のように書いてあります。 スクリーンショット 20200412 23.08.41.png

この認証方法は使えない、みたいなことが書いてあります。 そうです、うっかりしてましたFirebase Authenticationによる認証を利用するにはコンソールから利用する認証方法を有効化する必要があります。一度コンソールへ戻りましょう。

左のメニューバーから「Authentication」を選択します。 次に、上のタブから「Sign-in method」を選択しましょう。 プロパイダの一覧から「Google」を選択します。

スクリーンショット 20200412 23.14.18.png

右上にある「有効にする」をオンにします。 さらに、プロジェクトのサポートメールを選択してください。 オンになっていることが確認できたら「保存する」をクリックしましょう。

スクリーンショット 20200412 23.17.37.png

これで、Googleプロパイダが有効になりました。

スクリーンショット 20200412 23.20.52.png

もう一度ログインボタンをクリックしてみましょう。 Googleアカウントの選択画面がでてきて、ログインができるはずです。

現在ログインしているユーザーを取得する

通常、ログイン機能が必要なアプリケーションの場合、ユーザーが現在ログインしているかどうか、またログインしているユーザーの情報を知りたいはずです。

そのような場合、Authオブジェクトでオブザーバーを設定します。

firebase.auth().onAuthStateChanged(user => {
  if (user) {
    // ユーザーがログインしています。
  } else {
    // ユーザーはログインしていません。
  }
})

onAuthStateChangedはユーザーのログイン状態を監視します。 どうやらログイン情報はIndexedDBに保存されているようです。 firebase.auth().onAuthStateChangedはどうやってログイン中であることを判定しているんでしょうか?

firebase.auth().currentUserでも現在ログインしているユーザーが取得できるみたいですが、ログインしているはずなのにcurrentUsernullになることがあるのでおすすめはしません。

ユーザーインスタンスからはユーザーの情報が取得できます。

// uid
user.uid

// 名前
user.displayName

// プロフィール画像
user.photoURL

// メール
user.email

// 認証済みのメールアドレス化
user.emailVerified

// 電話番号
user.phoneNumber

// 匿名認証かどうか
user.isAnonymous

さらに、ユーザープロフィールなど、これ以上のユーザーの情報をもたせたいと思うかもしれません。 そのような場合には、Realtime DBかCloud Firestoreを利用します。 userコレクションを作成して、uid`をキーにドキュメントを追加すれば、ログインユーザーのさらなる情報を取得することができます。

ログアウト

ログインしたなら当然ログアウトもしたはずです。 ログアウトはsingOutを呼び出すだけです。

const logoutBtn = document.getElementById('logout')

logoutBtn.addEventListener('click', () => {
  firebase.auth().signOut().then(() => {
    // 成功
  }).catch(err => {
    // 失敗
  })
})

以上のように、普通に実装したらまあまあめんどくさい認証機能も簡単に実装することができました。

ここまででまあまあ長くなったのでFire StrageとFirestoreは来週に回します。

この記事をシェアする
Hatena

関連記事