Vuetify ＋ Firebase UI で簡単にログイン機能を追加とナビゲーションメニュー

1.ナビゲーションメニュー

Vue Routerを導入して画面遷移ができるようになったのだが、Vue CLI で作成したトップページのままだと、スマホ(サイズ)で表示した場合に、右上のメニューが隠れてしまうため、ハンバーガーメニューを、以下を参考に導入。

https://garicchi.com/?p=20801

<template>
  <v-app>
    <v-navigation-drawer fixed clipped app v-model="navBar">
      <v-list dense class="pt-0">
        <router-link to="/">
          <v-list-tile>
            <v-list-tile-action>
              <v-icon>home</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>HOME</v-list-tile-content>
          </v-list-tile>
        </router-link>
        <router-link to="/entry">
          <v-list-tile>
            <v-list-tile-action>
              <v-icon>edit</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>ENTRY</v-list-tile-content>
          </v-list-tile>
        </router-link>
        <router-link to="/login">
          <v-list-tile>
            <v-list-tile-action>
              <v-icon>account_box</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>LOG IN</v-list-tile-content>
          </v-list-tile>
        </router-link>
        <router-link to="/about">
          <v-list-tile>
            <v-list-tile-action>
              <v-icon>settings</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>ABOUT</v-list-tile-content>
          </v-list-tile>
        </router-link>
      </v-list>    
    </v-navigation-drawer>
    <v-toolbar clipped-left fixed app>
      <v-toolbar-side-icon @click.stop="navBar = !navBar"></v-toolbar-side-icon>
      <v-toolbar-title>FavoPhrase</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn flat to="/">Home</v-btn>
        <v-btn flat to="/entry">Entry</v-btn>
        <v-btn flat to="/login">Login</v-btn>
        <v-btn flat to="/about">About</v-btn>
      </v-toolbar-items>
    </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
        <v-fade-transition mode="out-in">
          <router-view></router-view>
        </v-fade-transition>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        navBar: null
      }
    }
  }
</script>
<style>
  a {
    text-decoration: none;
  }
</style>

ブラウザサイズ。

スマホサイズ。

ハンバーガーメニュー。

うん。わるくない。

2.Firebase を使って簡単にログイン機能を実現

以下のサイトを参考に実装。

https://firebase.google.com/docs/auth/web/firebaseui?hl=ja

https://qiita.com/okdyy75/items/24e78fdd0f12742b9e82

/main.js

上記サイトを参考に、routes の meta に、認証が必要かどうかをbool で設定し、router.beforeEach で、遷移前ログイン状態を確認し、ログインされていなければ、Loginページに遷移させる。

import Vue from 'vue'
import VueRouter from 'vue-router'
import '@/plugins/vuetify'
import firebase from '@/plugins/firebase'
import 'firebase/auth';

import App from '@/App.vue'

import Home from '@/components/Home'
import Entry from '@/components/Entry'
import Login from '@/components/Login'
import About from '@/components/About'

Vue.config.productionTip = false
Vue.use(VueRouter)

const routes = [
  { name:'Home',  path: '/',      component: Home,  meta: { requiredAuth: false } },
  { name:'Entry', path: '/entry', component: Entry, meta: { requiredAuth: true  } },
  { name:'Login', path: '/login', component: Login, meta: { requiredAuth: false } },
  { name:'About', path: '/about', component: About, meta: { requiredAuth: false } }
]
const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) =>{
  if (to.matched.some(record => record.meta.requiredAuth)) {
    if (firebase.auth().currentUser) {
      console.log(firebase.auth().currentUser);
      next();
      return;
    }
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        next();
      } else {
        next({name: 'Login'})
      } 
    })
  }
  next();
})

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

/plugins/firebase.js

Firebaseを導入する。

https://firebase.google.com/docs/web/setup?hl=ja

import firebase from 'firebase/app'

var config = {
    apiKey: "XXXXXXXXXXXXXxXXXXXXXXXXXXXXXXXX",
    authDomain: "xxxxxxxxxxxx.com",
    databaseURL: "https://xxxxxxxxxxxxxx.com",
    projectId: "favophrase",
    storageBucket: "xxxxxxxxxxxxxxxxxxx.com",
    messagingSenderId: "99999999999999999"
  }
  firebase.initializeApp(config)

  export default firebase

/components/Login.vue コンポーネント

FIrebase UI の最低限の実装。これだけで、ログイン機能が実現される。

<template>
    <v-container>
        <div>
            <v-btn @click="logout">LOGOUT</v-btn>
        </div>
        <div id="firebaseui-auth-container"></div>
    </v-container>
</template>
<script>
import firebase   from 'firebase/app';
import firebaseui from 'firebaseui-ja';

export default {
    mounted() {
        var ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth());
        ui.start('#firebaseui-auth-container',{
            signInOptions: [
                firebase.auth.EmailAuthProvider.PROVIDER_ID,
                firebase.auth.FacebookAuthProvider.PROVIDER_ID,
                firebase.auth.TwitterAuthProvider.PROVIDER_ID,
                firebase.auth.GoogleAuthProvider.PROVIDER_ID,
            ],

        });
    },
    methods: {
        logout: function() {
            firebase.auth().signOut().then(
                () => console.log("Sign out.")
            );
        }
    }
}
</Script>

Firebase UI の画面。

うーん、これだけのコード記述だけで、認証機能が実現できるのはかなりうれしい。

本筋の機能実装に専念できるってことだなー。

Baas万歳。