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

firebaseでのプロジェクト作成

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

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

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

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

vue-todo/src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import firebase from 'firebase' // 追記

Vue.config.productionTip = false

//////// 追記↓ ////////
 
const config = {
  apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  authDomain: "vue-todo-xxxx.firebaseapp.com",
  databaseURL: "https://vue-todo-xxxx.firebaseio.com",
  projectId: "vue-todo-xxxx",
  storageBucket: "vue-todo-xxxx.appspot.com",
  messagingSenderId: "0000000000"
};
firebase.initializeApp(config);
 
//////////////////////

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

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

mailによる認証

firebaseでmail認証の有効化

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

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

vue-todo/src/components/Signup.vue

<template>
  <div class="signup">
    <h2>サインアップ</h2>
    <!-- 登録フォーム -->
    <input type="email" placeholder="email" v-model="email">
    <input type="password" placeholder="password" v-model="password">
    <button @click="signUp">登録</button>

    <!-- サインインへの遷移ボタン -->
    <p>
      アカウントをすでにお持ちの方
      <router-link to="/signin">sign in now</router-link>
    </p>
  </div>
</template>

<script>
import firebase from "firebase"; // firebaseのインポート

export default {
  name: "Singup",
  data() {
    return {
      email: "",
      password: ""
    };
  },
  methods: {
    // singUpボタンが押されたときに実行されるfunctrion
    signUp: function() {
      firebase
        .auth()
        .createUserAndRetrieveDataWithEmailAndPassword(
          this.email,
          this.password
        )
        .then(user => {
          // 成功時
          alert("Create account: " + user.user.email);
        })
        .catch(error => {
          // 失敗時
          alert(error.message);
        });
    }
  }
};
</script>


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

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

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

サインインページの編集

vue-todo/src/components/Signin.vue

<template>
  <div id="signin">
    <h2>サインイン</h2>

    <!-- emailとpasswordの入力欄 -->
    <input type="email" placeholder="email" v-model="email">
    <input type="password" placeholder="Password" v-model="password">
    <button @click="signIn">Signin</button>

  <!-- サインアップページ遷移ボタン -->
    <p>
      アカウントをお持ちではない方
      <router-link to="/signup">新規作成</router-link>
    </p>
  </div>
</template>

<script>
import firebase from "firebase"; // firebaseのインポート
 
export default {
  name: "Signin",
  data() {
    return {
      email: "",
      password: ""
    };
  },
  methods: {
    // signinボタンを押したときに実行されるfunction
    signIn: function() {
      firebase
        .auth()
        .signInWithEmailAndPassword(this.email, this.password)
        .then(user => {
          // ログインが成功した場合にメインページに遷移させる
          alert("success : " + user.user.email);
          this.$router.push("/");
        })
        .catch(error => {
          // ログインに失敗した場合
          alert(error.message);
        });
    }
  }
};
</script>
 

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

ルーティングの設定

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

import Vue from 'vue'
import Router from 'vue-router'
import Signup from '@/components/Signup'
import Signin from '@/components/Signin'
import Task from '@/components/Task'
import firebase from 'firebase'

Vue.use(Router)

let router =  new Router({
  mode: 'history',
  routes: [
    {
      path: '*',
      redirect: 'signin'
    },
    {
      path: '/',
      name: 'task',
      component: Task,
      meta: { requiresAuth: true }
    },
    {
      path: '/signup',
      name: 'Signup',
      component: Signup,
    },
    {
      path: '/signin',
      name: 'Signin',
      component: Signin
    }
  ]
})

// ログインが完了していない場合にサインインページの飛ばす
router.beforeEach((to, from, next)=>{
  let requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  let currentUser = firebase.auth().currentUser 
  if (requiresAuth){
  if (!currentUser){
    next({
      path: '/signin',
      query: {redirect: to.fullPath}
    })
  }else{
    next()
  }
}else{
  next()
}
})

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

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

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

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

<template>
  <div id="signin">
    <h2>サインイン</h2>

    <!-- emailとpasswordの入力欄 -->
    <input type="email" placeholder="email" v-model="email">
    <input type="password" placeholder="Password" v-model="password">
    <button @click="signIn">Signin</button>
   
   <!-- googleのアカウントでサインイン。アカウントがなければ新規に作成されます。 -->
    <button @click="signInWithGoogle">Googleアカウントでサインイン</button>

  <!-- サインアップページ遷移ボタン -->
    <p>
      アカウントをお持ちではない方
      <router-link to="/signup">新規作成</router-link>
    </p>
  </div>
</template>

<script>
import firebase from "firebase"; // firebaseのインポート
 
export default {
  name: "Signin",
  data() {
    return {
      email: "",
      password: ""
    };
  },
  methods: {
    // signinボタンを押したときに実行されるfunction
    signIn: function() {
      firebase
        .auth()
        .signInWithEmailAndPassword(this.email, this.password)
        .then(user => {
          // ログインが成功した場合にメインページに遷移させる
          alert("success : " + user.user.email);
          this.$router.push("/");
        })
        .catch(error => {
          // ログインに失敗した場合
          alert(error.message);
        });
    },
    // googleでサインインするときに呼ばれるfunction
    signInWithGoogle: function() {
      const provider = new firebase.auth.GoogleAuthProvider();
      firebase
        .auth()
        .signInWithPopup(provider)
        .then(user => {
          this.$router.push("/");
        }).catch(
          error => {
            alert(error.message)
          }
        );
    }
  }
};
</script>
 

<style>
</style>

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