@nuxt.js/firebaseを使ってNuxt.jsでFirebase JavsScript SDKを利用する

thumnail
2020-09-14

firebaseの認証情報をNuxt.js & Vue.jsで動くアプリケーションに設定するときに調べた内容をこの記事にまとめておきます。

Nuxt Firebaseとは

Qiitaの記事などを読んでいるとfirebaseの設定方法は色々あったので正直どれがベストプラクティスなんだと迷っていましたが、なるべく世界中の多くの人が使用している方法で実装したいと思ったので「Nuxt.js Firebase Module」を使うことにしました。

The Nuxt.js Firebase Module is a module that helps you integrate the Firebase JavaScript SDK into your application with ease. By simply configuring this module in your nuxt.config.js file, you can use all Firebase Services throughout your app. 参考文献:「Introduction」 https://firebase.nuxtjs.org/guide/introduction/#what-is-this

このModuleを使うとNuxtのアプリにFirebase JavsScript SDKを簡単に設定でき、Firebaseのサービス(firebase authentication, firestore ...etc)を使うことができるようになります。

nuxt.config.jsに設定を記述する

npmで@nuxtjs/firebaseをインストールします。

npm i @nuxtjs/firebase

nuxt.jsに次の設定を記述します。

modules: [
    [
      '@nuxtjs/firebase',
      {
        config: {
          apiKey: '<apiKey>',
          authDomain: '<authDomain>',
          databaseURL: '<databaseURL>',
          projectId: '<projectId>',
          storageBucket: '<storageBucket>',
          messagingSenderId: '<messagingSenderId>',
          appId: '<appId>',
          measurementId: '<measurementId>'
        },
        services: {
          auth: true // Just as example. Can be any other service.
        }
      }
    ]
  ],

これは最もシンプルな設定方法です。諸々カスタムしたい場合は次のOptionsのドキュメントを見ながら設定してください。

https://firebase.nuxtjs.org/guide/options/#config

環境変数で読み込ませる認証情報を変更する

開発環境と本番環境で使用するfirebaseのプロジェクトを変更したい場合があると思います。この場合は環境変数FIRE_ENVを指定すれば良いです。

"scripts": {
  "serve": "FIRE_ENV=production nuxt",
  "serve dev": "FIRE_ENV=development nuxt",
}

npm run serveの時はproduction, npm run serve devの時はdevelopmentの情報が読み込まれます。

  firebase: {
    config: {
      production: {
        apiKey: '<apiKey>',
        authDomain: '<authDomain>',
        databaseURL: '<databaseURL>',
        projectId: '<projectId>',
        storageBucket: '<storageBucket>',
        messagingSenderId: '<messagingSenderId>',
        appId: '<appId>',
        measurementId: '<measurementId>'
      },
      development: {
        apiKey: '<apiKey>',
        authDomain: '<authDomain>',
        databaseURL: '<databaseURL>',
        projectId: '<projectId>',
        storageBucket: '<storageBucket>',
        messagingSenderId: '<messagingSenderId>',
        appId: '<appId>',
        measurementId: '<measurementId>'
      },
    },
    services: {
      auth: true, // Just as example. Can be any other service.
    },

またcustomEnvtrueに設定してください。

 customEnv: true,

Firebase JavsScript SDKを使う

this.$fireAuthでFirebase Authenticationのオブジェクトを指定することができます。アカウント登録で使うcreateUserWithEmailAndPasswordはこのオブジェクトに含まれているので次のようにしてアカウント登録のコードを記述することができます。

      this.$fireAuth.createUserWithEmailAndPassword(email, password).then(res=>{
      console.log(res)
    }).catch((error)=> {
      console.log(error)
    })

参考文献

この記事内容とは関係ありませんが、筆者である僕が普段愛用しているPC周りのアイテムを別記事で紹介しているので、もし興味があればご覧になってください。

現在使用しているディスプレイ・ヘッドフォン・キーボードなどを紹介

KATUBLO

Copyright since 2018 KATUO All Rights Reserved.