Zenn
🔥

【Vue2】Vue(Vuetify)＋Firebaseのユーザー認証状態をチェックする

2022/03/11に公開
Firebase
JavaScript
Vue.js
Vuetify
tech

関連記事のリンク先の記事で登録したユーザーを使用してログイン（ユーザー認証）まで実装しました。
んで、ログイン状態のチェックはほぼほぼマスト機能なので、共通機能として実装することになるでしょう。

方法としては、2つあります。
公式にあるonAuthStateChanged 関数を使用するかgetAuthで取得した情報からcurrentUserを引っこ抜いて確認する。

それぞれ記載していきます。

環境

  • Windows(10)
  • Firebase
  • Vue（2.6.14）
    • Vuetify（2.6.2）
    • router（）
    • Vue CLI（4.5.15）
  • npm（8.4.1）
  • node.js（16.13.0）

事前準備

  • FirebaseAuthenticationを使用してユーザー作成機能（作成済み）
  • Firebaseのプロジェクト作成
  • Vueプロジェクトの生成

手順

ログインチェック専用ページを作成して確認します。

対象のファイル作成

1. routerのindex.jsのメンテ

今回はrouter使って画面遷移しているので、ここにログイン確認画面の遷移について追記します。

  • ありか
{project_root}
    └ src
　　    └ router
　　　　　　└ index.js
  • 改修内容
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
// 省略
  {
    path: '/auth',
    name: 'Auth',
    component: () => import('../views/Authentication.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

2. viewsフォルダにAuthentication.vueの作成

Firebase公式すごいなと相変わらず感動。
またも公開されているソースコードほぼそのままです。

  • 配置先
{project_root}
    └ src
       └ views
　　　　　　└ Authentication.vue
  • 中身
Authentication.vue
<template>
  <v-container>
    <v-row
        justify="center" align-content="center"
    >
      <v-col cols="md">
        <v-card>
          <v-card-title>ログインチェック用</v-card-title>
            <v-form
                ref="form"
            >
              <v-row
                  justify="center" align-content="center"
              >
                <v-col
                    cols="10"
                >
                  <v-text-field
                      label="ログインID"
                      v-model="email"
                  ></v-text-field>
                  <v-text-field
                      label="パスワード"
                      v-model="pw"
                  ></v-text-field>
                  <v-spacer></v-spacer>
                  <v-btn
                      depressed
                      color="primary"
                      @click="login()"
                  >
                      ログイン
                  </v-btn>
                </v-col>
              </v-row>
            </v-form>
        </v-card>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
          <v-btn
            style="margin-right:5px;"
            depressed
            color="grey"
            @click="signOut()"
          >
            ログアウト
          </v-btn>
          <v-btn
            style="margin-right:5px;"
            depressed
            color="teal"
            @click="onAuthStateChanged()"
          >
            ログインチェック①
          </v-btn>
          <v-btn
            style="margin-right:5px;"
            depressed
            color="teal"
            @click="isSignIn()"
          >
            ログインチェック②
          </v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import firebaseApp from '../plugins/firebaseConfig'
import { getAuth, signInWithEmailAndPassword, signOut, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp)

export default {
  name: 'Authentication',
  data: () => ({
    email: '',
    pw: ''
  }),
  methods: {
    login: function () {
      signInWithEmailAndPassword(auth, this.email, this.pw)
        .then((userCredential) => {
          const user = userCredential.user
          console.log('create user success.' + user)
          alert('ログイン成功')
        })
        .catch((error) => {
          const errorCode = error.code
          const errorMessage = error.message
          console.log('errorCode: ' + errorCode)
          console.log('errorMessage: ' + errorMessage)
          alert('ログイン失敗')
        })
    },
    signOut: function () {
      signOut(auth).then(() => {
        alert('ログアウト成功')
      }).catch((error) => {
        console.log(error)
        alert('ログアウト失敗')
      })
    },
    onAuthStateChanged: function () {
      onAuthStateChanged(auth, (user) => {
        if (user) {
          const uid = user.uid;
          alert('ログイン中(onAuthStateChanged), uid: ' + uid)
        } else {
          alert('未ログイン(onAuthStateChanged)')
        }
      })
    },
    isSignIn: function () {
      const user = auth.currentUser
      if (user) {
        const uid = user.uid;
        alert('ログイン中(isSignIn), uid: ' + uid)
      } else {
        alert('未ログイン(isSignIn)')
      }
    }
  }
}
</script>

3. 動作確認

たぶん問題ないと思いますが、npm run serveしてたら、念のため一回再起動してみてください。

ブラウザを開いて、ログインページにアクセスします。
デフォルトなら、http://localhost:8080/#/authもしくは、
http://{プライベートIPとか}:8080/#/authでアクセスできます。

続いて、Firebaseに登録してある、メアド・パスワードを入力しログインボタンをクリックします。
エラーにならず、下記のページが表示されたらログイン成功です。

ログインチェック①をクリックすると、↓こんな感じで実行された関数名とUIDが表示されていればログイン中の証です。

さらに、ログインチェック②をクリックすると、同様にalertが表示され関数名が変わっていることを確認してください。

そして、ログアウト状態だと・・・。
↓のように未ログインとなります。console.logも出しているので、併せて確認してみてください。

あとがき

ユーザーの状態取得について2つ記載したんですが、違いについてはまだまだ勉強中です。
公式には↓こう書いてあります。

firebase公式

オブザーバーを使うと、現在ログインしているユーザーを取得するときに Auth オブジェクトが中間状態（初期化など）ではないことを確認できます。signInWithRedirect を使用すると、onAuthStateChanged オブザーバーは getRedirectResult が解決された後にトリガーされます。

実は、テスト管理ツールを作成していて、その一環でFirebaseを使っています。
Firebase使うとハマりますね。
そろそろプラン上げようか悩みます。
だが、無料プランですら生かしきれてない気がしてならない（笑）

参考記事

関連記事

Github

Discussion