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のコンソールからユーザを確認することができるようになります。

サインインページの編集

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>

ルーティングの設定

次に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

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>

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