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

Firebaseとは

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

Firebase導入

プロジェクト作成

**Firebaseコンソール**にログイン。
「プロジェクトを追加」を選択。
必要事項を入力。
- プロジェクト名(必須)
- Google アナリティクス設定有効化(任意)

Firebaseプロジェクト設定

コンソールから、作成したプロジェクトを選択。
以下画像の「>」部分を選択。
Firebaseを導入するアプリのニックネーム(Firebaseコンソール上に表示される)を登録。
以下のように、プロジェクト用の設定情報が表示される(後でコンソールから確認可能)。

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プロジェクト

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

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(公式)