Vue.jsとVuexを使ってFirebase Authenticationでログイン機能を実装する




Vuexとは

VuexはVue.jsでの状態を管理するライブラリです。

フロントエンドでのページの状態(state)を管理する場合、いろんなところからデータを変更してしまうとその状態に対応したviewに変更を追従するのが大変になっていまします。

Vuexを使うことで状態の変更方法を一箇所(Actions)にまとめることで管理をしやすくし、状態を画面(View)に反映することが簡単になります。

下記画像のようにViewを変更→Actions経由でStateを変更→Stateが変更されたらViewに反映するという一方向の流れを作って単純化できます。

Vuexの導入

Vuexのインストール方法

yarnとnpmは下記です。

$ yarn add vuex
$ npm install vuex --save

スクリプトをCDNからダウンロードすることもできます。vuex@3.0.1とすることでバージョンも指定できます。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuex"></script>

Vuexの設定

Vue.jsでVuexを使う設定はVue.use()にVuexを渡すだけです。Vuex.storeにvuexで保持する状態、関数を設定していきます。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        user: {},
        isSignIn: false
    },
    mutations: {
        setUser(state, user) {
            state.user = user; //firebaseが返したユーザー情報
        },
        setSignIn(state, isSignIn) {
            state.isSignIn = isSignIn; //ログインしてるかどうか true or false
        }
    },
    getters: {
        user(state) {
            return state.user;
        },
        isSignIn(state) {
            return state.isSignIn;
        }
    }
});

state

stateに保持したい状態を設定します。ここに設定した値はリロードしてもリフレッシュさることがありません。

componentからはthis.$stateでアクセスできます。

mutations

mutatinsはstateを変更するための関数です。stateの変更をmutationsにまとめることで処理を統一することができます。

getters

gettersはstateの値を取得する関数をここにまとめます。

Firebase Authentication

Firebase AuthemticationはFacebookやGoogle、GitHubなど様々なプロバイダを使ったログイン機能を簡単に実装することができます。

// ./firebase.js
import firebase from 'firebase';
import store from "./store";

var config = {
    apiKey: "API_KEY",
    authDomain: "xxxx.firebaseapp.com",
    databaseURL: "https://xxxxx.firebaseio.com",
    projectId: "xxxx,
    storageBucket: "xxxx.appspot.com",
    messagingSenderId: "xxxx"
};

export default {
    init() {
        firebase.initializeApp(config);
        firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION);
    },
    logout() {
        firebase.auth().signOut()
    },
    onAuth() {
        firebase.auth().onAuthStateChanged(user => {
            user = user ? user : {};
            store.commit('setUser', user);
            store.commit('setSignIn', user.uid ? true : false);
        });
    }
};

init()でfirebaseの初期化を行なっています。configはFirebaseのコンソールから取得できます。

Persistence.SESSIONを設定することで認証情報をローカルストレージに保存することができます。

onAuth()で呼んでいるonAuthStateChanged()は認証状態が変更されたタイミングで呼ばれる関数で、ログインしているユーザのstateを変更しています。

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import store from './store'
import firebase from './firebase'

firebase.init()
firebase.onAuth()
Vue.config.productionTip = false

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

main.jsでfirebaseを初期化するinit()と認証状態を管理するonAuth()関数を呼んでおきます。

main.jsで下記App.vueを読み込んでいます。App.vueではヘッダーに表示するLogin.vueを読み込んでいてそこでfirebaseuiを使ってログイン画面を表示しています。

<template>
  <v-app>
    <v-toolbar app>
        <v-toolbar-title class="headline">
            <span>Programming Magazine</span>
        </v-toolbar-title>
        <v-spacer></v-spacer>
        <Login />
    </v-toolbar>
    <v-container justify-center>
        <v-layout text-md-center>
            <router-link to="/"></router-link>
            <router-link to="/login"></router-link>
            <router-link to="/magazine/vue"></router-link>
            <router-view></router-view>
        </v-layout>
    </v-container>
  </v-app>
</template>

<script>
import login from './components/header/login'
export default {
    components: {
        Login: login
    }
}
</script>

firebaseuiモジュールはGoogle、Facebook、Twitter、Githubなどのログイン画面を綺麗に表示してくれます。下記サンプルではGoogleとGitHubでのログインが行えるようになっています。

<template>
    <v-content>
        <v-container justify-center>
            <div id="firebaseui-auth-container"></div>
        </v-container>
    </v-content>
</template>

<script>
import store from '../../store'
import firebase from 'firebase';
import * as firebaseui from 'firebaseui';

export default {
  mounted() {
    // FirebaseUI config.
    var uiConfig = {
        callbacks: {
            signInSuccess: function(currentUser) {
                store.commit('setUser', currentUser);
                store.commit('setSignIn', true);
                return true;
            },
        },
        signInFlow: 'popup',
        signInSuccessUrl: '/magazine/vue',
        signInOptions: [
            // Leave the lines as is for the providers you want to offer your users.
            firebase.auth.GoogleAuthProvider.PROVIDER_ID,
            firebase.auth.GithubAuthProvider.PROVIDER_ID,
        ],
        // tosUrl and privacyPolicyUrl accept either url string or a callback
        // function.
        // Terms of service url/callback.
        tosUrl: '/category',
        // Privacy policy url/callback.
        privacyPolicyUrl: function() {
            window.location.assign('/top');
        }
    };

    // Initialize the FirebaseUI Widget using Firebase.
    var ui = new firebaseui.auth.AuthUI(firebase.auth());
    // The start method will wait until the DOM is loaded.
    ui.start('#firebaseui-auth-container', uiConfig);
  }
}
</script>

 

firebaseuiでは認証後にリダイレクトさせるコールバックURLを指定して任意の処理を行なったり、利用規約、プライバシーポリシー用のURLも設定できます。

これだけのソースコードでログイン機能を簡単に実装することができるのでおすすめです。

 

The following two tabs change content below.

髙妻智一

2013年CyberAgent新卒入社 スマホゲームを作る子会社に所属し、サーバーサイドのエンジニアを担当。2年目の終わりから新規子会社の立ち上げに参加し、サーバーサイドのエンジニアリーダーとしてサービースのリリースから運用までを担当。 2018年仮想通貨のスマホウォレットを提供するGinco Incにブロックチェーンエンジニアとして入社。






よく読まれている関連記事はこちら




コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です