Vuetify + Firebase UI で簡単にログイン機能を追加とナビゲーションメニュー
1.ナビゲーションメニュー
Vue Routerを導入して画面遷移ができるようになったのだが、Vue CLI で作成したトップページのままだと、スマホ(サイズ)で表示した場合に、右上のメニューが隠れてしまうため、ハンバーガーメニューを、 以下を参考に導入。
- <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万歳。
上記で認証を利用するためには、各SNSの開発者ページに設定が必要。
Firebase https://console.firebase.google.com/u/1/
Facebook Developer https://developers.facebook.com/apps
Twitter Developer https://developer.twitter.com/en/apps