Contents
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を渡してあげるだけで簡単にユーザ登録を実装できます
「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
「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>
ここまでで認証の実装は終わりです。
次はメインの機能を実装していきます。