vue+firebaseにて詰まった部分 v1.2.0

初めに

こちらの記事を元に色々と試していきます。

「Vue.js + Firebase を使って爆速でユーザ認証を実装する」
https://qiita.com/sin_tanaka/items/ea149a33bd9e4b388241

個人的に色々と細かい部分で詰まるためここに書き記す。

問題

コピペしたのにうまく動かない

vueではjavascriptやhtmlより記載方法が厳しいらしく、怒られる事がよくある。
とりあえず下記の二種類が発生。

最後に空の改行コードが必要

javascript部分で、最後に改行コードが無いと怒られる。
追加すると解決します。

空白を入れるなと怒られる

html部分で、空白が入っているのを怒られる。
削除すると解決します。

色々細かいエラーの根本(ESLintが有効)

怒られるのはVue.js環境構築時にESLintを有効にしてしまっているためだと思われます！
※[ESLint]はコーディング規則を細かく注意してくれる静的解析ツールのようです。(スペースはこう書いたほうが綺麗だよ！みたいな話を注意してくれます)

? Project name test
? Project description A Vue.js project
? Author hashito <[e-mail]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) <-これをnoに！

初回、環境構築時に注意してください！

firebaseConfigの取得

当初、各ページからコピペしていたが、そもそも下記のような手順で手に入れるものらしい。
・FirebaseでJavaScript プロジェクトを作成
・作成するとコピペページが出てくる

参考：
https://firebase.google.com/docs/web/setup?authuser=0

firebaseConfigの場所

この情報はコンパイル時にコンパイルしてしまったり、サーバサイドで保持するものなのか不安でした。

export const firebaseConfig = {
    apiKey: "xxxxx",
    authDomain: "xxxx",
    databaseURL: "https://xxxx.firebaseio.com",
    projectId: "xxxx",
    storageBucket: "xxxx.appspot.com",
    messagingSenderId: "xxxx",
    appId: "1:xxxxxxxxxxx"
  };

https://fir-ui-demo-84a6c.firebaseapp.com/
こちらのソースコードをみるとconfig.jsも公開しているようなので大丈夫な様子。

複数回firebaseをimportするとうまく動作しない

色々と作っていくとWEB画面が真っ白になって、うまく動作しないことがある。
consoleを確認すると下記のようなエラーが出ている。

Uncaught FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).

原因は複数回initializeAppを呼び出している事らしい。
下記のような中間ファイルを作ってこちらを毎回呼び出せば解決します。

firebase.js

import * as firebase from "firebase";
import "firebase/firestore"
import {firebaseConfig} from '../config.jsx';
!firebase.apps.length?firebase.initializeApp(firebaseConfig):firebase.app();
export default firebase

呼び出し側

import firebase from '../firebase'

権限の問題でFirestoreにアクセスできない

ブラウザ上で、DBへの書き込み・読み込みのテストをすると、失敗します。
consoleを確認すると下記のようなエラーが出ている。

Error adding document: FirebaseError: Missing or insufficient permissions.

原因はFirebaseのdatabaseのアクセスルールが全拒否になっている。
しかし…私は2段階で間違えていたのでこちらも記載しておきます。

（1）Firestoreはdatabaseでありstorageとは別物

表記の通りで、私は懸命にstorage側の設定を変更していました。
ただしくはdatabaseの設定変更が必要です

（2） GCP（GoogleCloudPlatform）と連携している場合にそちら側の有効化が必要

firebaseでdatabaseにアクセスしてみると分かるのですが、そちらの有効化が必要です。

（３） 権限の問題でFirestoreにアクセスできない（本題）

こちらは公式の方でも切々と書いてあるので分かるかと思うのですが。
databaseのルールのタブで権限を変更する必要があります。

オール許可にすると許可のないユーザでもバシバシ来るっぽいので気をつけてください
各バージョンで変わりそうですが…参考に下記に記載しておきます。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

参考：Cloud Firestore セキュリティ ルールを使ってみる

vue-cli環境でコンパイルに失敗する

環境構築時にbabelというコンパイルツールを利用していたようです。

こちらのサンプルコードを参照して構築したのですが、ここでコンパイルが通らなくなりました。
参考：Cloud Firestore を使ってみる:データを読み取る

サンプルコード

db.collection("users").get().then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
        console.log(`${doc.id} => ${doc.data()}`);
    });
});

原因はbabelの環境設定の問題。
下記のツールをnpmでインストールした所、解決しました。

npm install --save core-js@2

懸念点

ユーザ単位での設定値の操作

Googleなどの他サービスへの認証方法

今後の課題…

最後に

追記していきます…