Vue.js + FirebaseでToDoアプリを構築

firebaseでのプロジェクト作成

「プロジェクトを追加」をクリック

プロジェクト名を入力してプロジェクトを作成。

vueへfirebaseアプリの初期化情報を登録するためにwebへの追加をクリック

表示された情報を元にvueに追加していきます

vue-todo/src/main.js

見た目的には変わりませんが、これでfirebaseを使うための初期設定は完了です。

mailによる認証

firebaseでmail認証の有効化

左メニュの「Authentication」を選択。
ログイン方法から「メール/パスワード」を有効化

サインアップページの編集

vue-todo/src/components/Signup.vue

firebaseの
「createUserAndRetrieveDataWithEmailAndPassword」
メソッドにemailとpasswordを渡してあげるだけで簡単にユーザ登録を実装できます

新規にユーザを登録してみましょう

登録に成功するとfirebaseのコンソールからユーザを確認することができるようになります。

サインインページの編集

vue-todo/src/components/Signin.vue

firebaseの「signInWithEmailAndPassword」
メソッドで簡単にユーザのログインを実装することができます。

ルーティングの設定

次にrouter.jsを編集してログインしていない場合にサインインページに飛ばす処理を実装しましょう。
vue-todo/src/router.js

vue-routerではページの遷移前に任意の処理を実行できます。
ここではその機能を使ってログインしているかのチェックを行っています
vue-router ナビゲーションガード
「firebase.auth().currentUser 」で現在ログインしているユーザの情報を参照することができます。

googleアカウントを使った認証

ログイン方法から「Google」を有効化

サインインページにgoogle認証を追加

ここまでで認証の実装は終わりです。
次はメインの機能を実装していきます。