ばうあーろぐ TOP へ戻る

Firebase を認証だけで利用すると色々捗る

Firebase の認証周りは導入がめっちゃ楽です。

自分でやろうとすると大きく手間のかかる部分である認証部分の実装ですが、 Firebase を利用することで認証部分の実装を大きくショートカットすることができます。

さくっとサービスを立ち上げたい人にとっては、 よくある認証管理だとか、SNS との連携だとか、 その辺のバックエンドはさらっと済ませて もっとサービスのコアのフロントエンドに注力したいところです。

Firebase とは

Firebase を知らない人のためにざっくり紹介すると、 認証、ストレージなどのよくあるバックエンドの実装を一通り提供してくれていて、 気軽に利用することができる Google のサービスです。

(解説ページはいくらでもあるのでざっくりに留めておきます)

作り手はクライアントサイドに注力すれば良いので、 作りたいものをさっと作ろうというとき にはとても便利です。

Firebase を認証だけで利用する

下記に詳しく掲載されていますが、 Firebase の認証を利用するときは大きく2種類の方法があります。

https://firebase.google.com/docs/auth/

前者は間接的に後者を利用しているようなので、 実質後者が使えれば良いと思います。 (ちゃんと追ってないので事実でないかも)

前者に関しては読み込んで設定ちょっと追加すれば すぐに使えるという利点があるのですが、 中で何やってるのか良く分からなかったという点と カスタマイズがしづらそうという点が気になったので 後者の Firebase SDK Authentication を少し検証してみました。

https://github.com/girigiribauer/firebase-sample-auth

ついでに検証で一通り試したファイル群は、 破棄するのももったいないので GitHub に上げておきました。

お試し

見ればすぐ分かるレベルかと思いますが、 SNS での認証についてはそれぞれ必要なキーを取得する必要があります。

Facebook の例でいえば、 https://developers.facebook.com/ でアプリを作成後、アプリケーション ID とアプリシークレットの値を それぞれ取得し、Firebase 側に入力します。

設定をした後で、 https://github.com/girigiribauer/firebase-sample-auth の README.md に書いてあるように Firebase 側の API_KEY などを設定のうえ、 npm installnpm start を実行します。

設定がしてあるものであれば、 正しくログインできるようになっているはずです。

詳しくは Firebase のドキュメントに書いてありますが、 ポップアップ形式とリダイレクト形式の2種類が用意されているので、 場合に応じて好きな方を使えば良いと思います。 今回は検証なので、両方試せるようになっています。

ログインするとサイドにログイン済みの情報が一通り出るようになっています。

管理画面で作成済みのユーザーを確認する

Firebase の管理画面の Authentication のメニューから ユーザータブを見ると一通り確認できます。

どういう方法でログインしたかなどもこちらにまとめられるようです。

複数の方法でログインしたユーザーを統合する方法も用意されているようですが、 今回はそこまで試していません。

まとめ

検証ついでに書いた記事なので、大した内容じゃなくてすいません。

AWS と比較すると認証周りに関しては Firebase の方が有利かもしれません。

ユーザーを識別するようなアプリでちょっとした規模のものであれば、 Firebase で Hosting も利用して firebase deploy コマンドで そのまま公開まで持って行くのも楽で良いと思います。積極的に使っていきたいな。

もし記事内に誤りなどございましたら、 @girigiribauer までご一報いただけると助かります。