VueCLIでアプリ作成（アドレス帳）③

2021年6月7日 13:59

Firebaseの導入準備

Firebaseでプロジェクトを設定し、SDK追加ででてきたスクリプト用意

Firebaseのライブラリをインストール

npm install firebase

FirebaseをVue.jsにセットアップ

src/main.js

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

Vue.config.productionTip = false;

var config = {
 apiKey: "AIzaSyDw_pQ3DnziOt5LsHd6tACKfY-hKn2BlTU",
 authDomain: "address-pj-2de8c.firebaseapp.com",
 projectId: "address-pj-2de8c",
 storageBucket: "address-pj-2de8c.appspot.com",
 messagingSenderId: "688571968908",
 appId: "1:688571968908:web:d002ce1aaded8027c73aa9",
 measurementId: "G-371Y0DHM62",
};
// Initialize Firebase
firebase.initializeApp(config);

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

①SDKのfirebaseConfig{ apiKey........ },firebase.initializeApp(firebaseConfig);をコピペ。

②firebaseConfigの変数名変更（2箇所）

③インストールしたFirebaseをインポート

Firebase　Google認証を使う準備

Firebase →　Authentication　→　始める　→　Sing-in-method →　Google選択　→　ポップアップで有効　・　プロジェクト名「アドレス帳」・サポートメール：自分のGmail →　保存

Firebase　Google認証機能を実装

src/store/index.js

import Vue from "vue";
import Vuex from "vuex";
import firebase from "firebase";

Vue.use(Vuex);

export default new Vuex.Store({
 state: {
   drawer: false,
   addresses: [],
 },
 mutations: {
   toggleSideMenu(state) {
     state.drawer = !state.drawer;
   },
   addAddress(state, address) {
     state.addresses.push(address);
   },
 },
 actions: {
   login() {
     const google_auth_provider = new firebase.auth.GoogleAuthProvider();
     firebase.auth().signInWithRedirect(google_auth_provider);
   },
   toggleSideMenu({ commit }) {
     commit("toggleSideMenu");
   },
   addAddress({ commit }, address) {
     commit("addAddress", address);
   },
 },
});

①Firebaseをインポート

②actions内でloginメソッド作成。

・firebase.auth.GoogleAuthProvider();インスタンスを生成して変数にいれる。（Google認証のプロバイダーの使用に必要）

・生成したインスタンスをsignInWithRedirectの引数に渡す。signInWithRedirectが呼ばれたタイミングでGoogle認証画面にリダイレクト。

ログインボタンをTOPページに設置

src/views/Home.vue

<template>
 <v-container text-xs-center justify-center>
   <v-layout row wrap>
     <v-flex xs12>
       <h1>マイアドレス帳</h1>
       <p>マイアドレス帳をご利用の方は、Googleアカウントでログインしてください。</p>
     </v-flex>

     <v-flex xs12 mt-5>
       <v-btn color='info' @click="login">Googleアカウントでログイン</v-btn>
     </v-flex>
   </v-layout>
 </v-container>
</template>

<script>
 import { mapActions } from 'vuex'

 export default {
   name: 'Home',

   methods:{
     ...mapActions(['login'])
   }
 }
</script>

①Helloworldコンポーネントは削除

②ストアのマップアクションをインポート

import { mapActions } from 'vuex'

③ストアのマップアクションのloginメソッドを指定

...mapActions(['login'])

④テンプレート作成　ログインボタン設置

<v-btn color='info' @click="login">Googleアカウントでログイン</v-btn>

Googleアカウントログインをクリックしたらログイン画面がでてくればOK

ログインユーザーを取得してストアに格納する

src/store/index.js

import Vue from "vue";
import Vuex from "vuex";
import firebase from "firebase";

Vue.use(Vuex);

export default new Vuex.Store({
 state: {
   login_user: null,
   drawer: false,
   addresses: [],
 },
 mutations: {
   setLoginUser(state, user) {
     state.login_user = user;
   },
   toggleSideMenu(state) {
     state.drawer = !state.drawer;
   },
   addAddress(state, address) {
     state.addresses.push(address);
   },
 },
 actions: {
   setLoginUser({ commit }, user) {
     commit("serLoginUser", user);
   },
   login() {
     const google_auth_provider = new firebase.auth.GoogleAuthProvider();
     firebase.auth().signInWithRedirect(google_auth_provider);
   },
   toggleSideMenu({ commit }) {
     commit("toggleSideMenu");
   },
   addAddress({ commit }, address) {
     commit("addAddress", address);
   },
 },
});

①stateにlogin_userを設定し、初期値はnull

  state: {
   login_user:null,
   drawer: false,
   addresses: [],
 },

②actions内でsetLoginUserメソッドを作成し、setLoginUserをコミットする。

  actions: {
   setLoginUser({commit},user){
     commit('serLoginUser',user)
   },

③mutaions内でsetLoginUserメソッドを記述し、stateのlogin_userを更新する。

  mutations: {
   setLoginUser(state, user) {
     state.login_user = user;
   },

Firebaseでログインユーザーを取得

src/App.vue

①Firebaseをインポート

②methods内でストアのsetLoginUserアクションを呼び出す

  methods:{
   ...mapActions(['toggleSideMenu','setLoginUser'])
 }

③createdメソッド内でfirebase.auth()のonAuthStateChangedメソッドで引数に「認証の状態が変わったら呼び出されるコールバック関数」を指定する。

・ログインしたらユーザーオブジェクトが渡される。そして、setLoginUserでユーザをストアに格納。

・ログアウトしたらnullが渡される

  created(){
   firebase.auth().onAuthStateChanged(user =>{
     if(user){
       this.setLoginUser(user)
     }
   })
 },

ブラウザのVueディベロッパーツールから時計マーク（Vuex）でstateのlogin_userにオブジェクトが入っていればOK。（タイムラグがあったり、何度かnpm run serveやブラウザを起動しなおさないと確認できなかった。）