田無rb#8 ~Nuxt.js firebase連携④~

今回も「Vue.js&Nuxt.js超入門」Chapter6の続きをやっていきます

Firebaseへのデータの追加

https://[プロジェクトID].firebaseio.com/person/[キー].json というURLに対して axios の put メソッドを使ってアクセスを行う

axios.put([url], [object]);

これで指定のキーに対して object が値として保存される

※キーが存在する場合上書きされるので注意とのこと

Firebaseのデータ削除

追加で使っていた put メソッドを delete に変更すれば良いだけ

axios.put([url]);

まとめ

Firebaseを使う際は、どのURLにどのメソッドを使ってアクセスするかが重要

personの中でキーが 1 の値を取得する場合は以下のURL
https://[プロジェクトID].firebaseio.com/person/1.json

その中でnameを取得したい場合は以下のURL
https://[プロジェクトID].firebaseio.com/person/1/name.json

全ての person のデータを取得したい場合のURL
https://[プロジェクトID].firebaseio.com/person.json

また行う操作に対して以下のメソッドを使い分ける

- データの取得 ... get
- データの保存 ... put
- データの削除 ... delete

---

Firebaseのソーシャルログイン機能の利用

FirebaseはDBだけでなくソーシャルログイン機能も提供されているのでそれを使ってみる

Firebase側の設定

Firebaseのコンソールにアクセスしてサイドバーの [ Authentication ] をクリック => [ ログイン方法 ] リンクをクリック

ログイン方法がリスト化されている。今回は google ログインを使うので、有効にしてサポートメールアドレスを追加しておく

そしてアプリで利用する firebase の設定情報を取得しておく

歯車クリック => [ プロジェクトの設定 ] クリック => [ マイアプリ ] で設定を行うと以下のように apiKey などが発行されるのでそれらを使う

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "...",
    authDomain: "...",
    databaseURL: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "..."
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

アプリ側の設定

続いて、nuxt.js アプリからログインするために firebase パッケージをインストールする

$ npm install firebase --save

(余談：saveオプション必要だっけと思って調べてみたところ、npm5.0.0以降はデフォルトでsaveしてくれるので不要らしい)

実装したところ以下のエラーが発生

Error: This operation is not supported in the environment this application is running on. "location.protocol" must be http, https or chrome-extension and web storage must be enabled.

いろいろ調べたりしましたが今日は解決法が分からなかったのでまた次回〜

(2019/07/07追記)

エラーが発生してサーバが止まる状態になっていたため、以下のように例外補足を行うようにしたところ、処理は続くようになった(例外補足の処理が実行されるので根本解決にはなっていませんが...)

// before
firebase.auth().signInWithPopup(provider)
  .then(function(result) {
    ...
  });

// after
firebase.auth().signInWithPopup(provider)
  .then(function(result) {
    ...
  }).catch(function(error) {
    ...
  });

それとは別件で Firebase App named '[DEFAULT]' already exists (app/duplicate-app) という例外も発生したので、以下のコメントを参考に修正しました

github.com

(2019/07/13追記)

then 側の処理で typo をしていたため修正したら直りました

ただ、例外処理を実行していたのは typo のせいでは無さそうなので、その他にも色々いじっている間にどこか変わってしまったのかも