Firebaseを利用したログインシステムの実装

Google の BaaS である Firebase を使うと、自分でサーバ上にデータベースを構築することなく簡単に会員サイトのログインシステムが作れます。

今回は Firebase AuthenticationCloud Firestore を利用します。

スポンサーリンク

Firebase Authentication

メールアドレスとパスワードによるログインシステムを簡単に作ることができます。また、電話番号を登録して SMS で認証するなど、ほかの手段も提供されています。

Cloud Firestore

Firebase で提供されている NoSQL データベースで、以前から提供されている Firebase Realtime Database をより強化したもの、みたいなイメージです。

違いを詳しく知りたい方は データベースを選択: Cloud Firestore または Realtime Database | Firebase をご覧ください。

Firestore はベータ版ですが、面白そうなので使ってみました。

Authentication と Firestore を同時に使う理由

Authentication ではメールアドレスとパスワードでログインを管理しますが、通常のサービスを考えてみるとユーザー名とパスワードでログインするケースが多いと思います。

実際メールアドレスは長くて打つのがめんどくさかったりしますし。

カスタム認証を使えばいいんじゃ?

とも思ったりしましたが、例えば誕生日とか自分のウェブサイトとか、認証に使わないようなデータをアカウント登録時に入力させたいなら、カスタム認証を使うよりも同時にデータベース使ったほうがいいと思ったんです。

実装

HTML

最初の二行で Firebase のファイルを読み込むだけで、機能を使う準備ができます。すごいですね。

main.js に仕様を書いておいて、フォームの入力値を使って会員登録しようと思います。

JavaScript

書くことこれだけです。ドキュメント見れば簡単に書けると思います。

フォームの値がうまく取得できず、寧ろそっちのほうが苦労してしまいました…。

最後に

一部持論を展開していますが、素人なので間違いなどあれば教えてください。

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.