Vue.js Firebase導入概要

Vue.jsプロジェクトへのFirebaseの導入(メールアドレス認証機能)の概要をまとめる。(学習用)

Firebaseとは

• Google が運営するソーシャルログインや、リアルタイムデータベース機能を提供するサービス(mBaaS)。
  • 認証やデータ管理のためのバックエンドシステムを用意する必要がなくなり、フロントエンドの開発に専念することが可能になる。

Firebase導入

プロジェクト作成

1. **Firebaseコンソール**にログイン。

2. 「プロジェクトを追加」を選択。

3. 必要事項を入力。

   • プロジェクト名(必須)
   • Google アナリティクス設定有効化(任意)

Firebaseプロジェクト設定

1. コンソールから、作成したプロジェクトを選択。

2. 以下画像の「>」部分を選択。

3. Firebaseを導入するアプリのニックネーム(Firebaseコンソール上に表示される)を登録。

4. 以下のように、プロジェクト用の設定情報が表示される(後でコンソールから確認可能)。

Vue.jsプロジェクトへの適用

• Firebaseモジュールをインストール。

  npm install --save firebase
  

• 上記設定情報の読み込み。

  import firebase from 'firebase'
  ...
  const config = {
      apiKey: 'YOUR_API_KEY',
      authDomain: 'YOUR_AUTH_DOMAIN',
      databaseURL: 'YOUR_DATABASE_URL',
      projectId: 'YOUR_PROJECT_ID',
      storageBucket: 'YOUR_STORAGE_BUCKET',
      messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
      appId: 'YOUR_APP_ID
  }
  firebase.initializeApp(config);
  

メールアドレス/パスワード認証設定

Firebaseプロジェクト

1. Firebaseコンソールのプロジェクト画面左側にある「Authentication」を選択。
2. 「Sign-in method」タブを選択。
3. プロバイダの「メールアドレス/パスワード」を選択し、「有効にする」をチェックした後、保存。
4. 「Users」タブを選択。
5. 「ユーザーを追加」を押下し、アプリユーザーのメールアドレス/パスワードを入力し、「ユーザーを追加」。

Vue.jsプロジェクト

ログイン処理

<template>
    ...
    <input type="email" placeholder="Email" v-model="email">
    <input type="password" placeholder="Password" v-model="password">
    <button @click="signIn">Signin</button>
    ...
</template>

<script>
...
	methods: {
    signIn: function () {
      firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(
          // 認証成功時の処理
        ).catch(error=> {
          // 認証失敗時の処理
        })
    }
    ...
  }
</script>

ログアウト処理

<template>
...
<button @click="signOut">Sign Out</button>
...
</template>

<script>
...
	methods: {
      signOut: function () {
          firebase.auth().signOut().then(() => {
        		// ログアウト成功時の処理
      	  })
      }   
  }
...
</script>

参考文献

• Firebase(公式)