Firebase v9 + Vue.js + Vuetifyを試してみる ～ログイン機能編～

はじめに

Firebaseを使ってみたい！と思い、ダイアログからアカウントの新規登録およびログインができる簡単なアプリケーションを作ってみました。

Firebase Authenticationを用いています。

環境

Firebase: 9.5.0
Vue: 2.6.11
Vuetify: 2.4.0

Vue プロジェクトの作成

今回はVuetifyを用いるため、Vue2でプロジェクトを作成します。

cmd

vue create firebasetest

Firebasetestにディレクトリに移動してVuetifyをインストール

cmd

cd firebasetest
vue add vuetify

npm run serveしてlocalhostにアクセス

cmd

npm run serve

OKですね。

ログイン画面の作成

ユーザー名とパスワードを入力するダイアログを作成します。 LoginDialog.vueを新規作成。

LoginDialog.vue

<template>
  <v-row justify="center">
    <v-dialog v-model="dialog" persistent width="400px">
      <v-card>
        <!-- タイトル -->
        <v-card-title>
          <span class="text-h5">認証</span>
        </v-card-title>
        <v-card-text>
          <!-- 入力項目 -->
          <v-text-field v-model="email" label="e-mail" required></v-text-field>
          <v-text-field v-model="password" label="Password" required></v-text-field>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <!-- ボタン -->
          <v-btn color="blue darken-1" text @click="signUp()"> 登録 </v-btn>
          <v-btn color="blue darken-1" text @click="signIn()"> ログイン </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- 新規登録もしくはログインした後に出現するSnackbar(Toast) -->
    <v-snackbar v-model="showSnackbar">{{ snackbarMessage }}</v-snackbar>
  </v-row>
</template>

<script>
export default {
  name: "LoginDialog",

  data: () => ({
    dialog: true,
    email: "",
    password: "",
    snackbarMessage: "",
    showSnackbar: false,
  }),
  methods: {
    signUp() {
      // アカウント登録処理
    },
    signIn() {
      // ログイン処理
    },
  },
};
</script>

App.vueもヘッダーのみのシンプルなページになるように書き換えます。

App.vue

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
    </v-app-bar>

    <v-main>
      <LoginDialog/>
    </v-main>
  </v-app>
</template>

<script>
import LoginDialog from './components/LoginDialog';

export default {
  name: 'App',

  components: {
    LoginDialog,
  },

  data: () => ({
    //
  }),
};
</script>

このような画面になりました。

Firebareの導入

Firebaseの導入です。

ログインして画面の左上からプロジェクトを追加

プロジェクト名を入力。

続行→続行で作成。

>を選択→アプリ名を入力してアプリの登録

できたら以下のコマンドでfirebaseをnpmインストール。

cmd

npm install firebase

新規にfirebase.jsを作成します。
firebaseConfig は、firebaseのプロジェクトのページ → プロジェクトの設定 → [全般]タブ → 画面中央に記載されています。

firebase.js

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  authDomain: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  projectId: "XXXXXXXXXXXXX",
  storageBucket: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  messagingSenderId: "XXXXXXXXXXXXX",
  appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
  measurementId: "XXXXXXXXX"
};

// Initialize Firebase
initializeApp(firebaseConfig);
export const auth = getAuth()

ログイン設定・アカウントの追加

FirebaseのホームでAuthenticationを選択。 そこでメールを選択します。

有効にして保存します。

手動でアカウントを追加することもできます。
ユーザーを追加からメールアドレスとパスワードを入力して登録。

新規登録・ログイン処理の実装

最後に新規登録・ログイン処理の実装です。

少ない記述で簡単に新規登録・ログイン処理が実装できました。

LoginDialog.vue

<template>
  <v-row justify="center">
    <v-dialog v-model="dialog" persistent width="400px">
      <v-card>
        <!-- タイトル -->
        <v-card-title>
          <span class="text-h5">認証</span>
        </v-card-title>
        <v-card-text>
          <!-- 入力項目 -->
          <v-text-field v-model="email" label="e-mail" required></v-text-field>
          <v-text-field v-model="password" label="Password" required></v-text-field>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <!-- ボタン -->
          <v-btn color="blue darken-1" text @click="signUp()"> 登録 </v-btn>
          <v-btn color="blue darken-1" text @click="signIn()"> ログイン </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- 新規登録もしくはログインした後に出現するSnackbar(Toast) -->
    <v-snackbar v-model="showSnackbar">{{ snackbarMessage }}</v-snackbar>
  </v-row>
</template>

<script>
// 追加
import { auth } from "../firebase";
// 追加
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
} from "firebase/auth";

export default {
  name: "LoginDialog",

  data: () => ({
    dialog: true,
    email: "",
    password: "",
    snackbarMessage: "",
    showSnackbar: false,
  }),
  methods: {
    signUp() {
      // アカウント登録処理
      // 追加
      createUserWithEmailAndPassword(auth, this.email, this.password)
        .then((userCredential) => {
          this.snackbarMessage = "新規登録成功！" + userCredential.user.email + " 様";
          this.showSnackbar = true;
        })
        .catch((error) => {
          this.snackbarMessage = "新規登録失敗。。。";
          this.showSnackbar = true;
          console.log("error code: " + error.code);
          console.log("error message: " + error.message);
        });
    },
    signIn() {
      // ログイン処理
      // 追加
      signInWithEmailAndPassword(auth, this.email, this.password)
        .then((userCredential) => {
          this.snackbarMessage = "ログイン成功！" + userCredential.user.email + "様";
          this.showSnackbar = true;
        })
        .catch((error) => {
          this.snackbarMessage = "ログイン失敗。。。";
          this.showSnackbar = true;
          console.log("error code: " + error.code);
          console.log("error message: " + error.message);
        });
    },
  },
};
</script>

トラブったこと

新規登録ができなかった → 新規登録時のpasswordが簡単すぎた。

参考

最後に

（実際の画面ではもちろん新規登録とログイン画面はわけたほうがいいと思いますが）シンプルな画面でFirebaseの新規登録とログインを試すことができました。

次はRealtime Databaseに挑戦してみたいと思います。