Zenn
🔥

【Vue2】Vue(Vuetify)＋FirebaseのAuthenticationでユーザー認証を実装した話（ユーザー認証編）

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

関連記事のリンク先の記事で登録したユーザーを使用してログイン（ユーザー認証）を実装します。
タイトルの通りFirebaseのAuthenticationでユーザー認証を行うための手順を記載していきます。

環境

  • 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使って画面遷移しているので、ここにログイン・TOP画面の遷移について追記します。

  • ありか
{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: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  { // ★ ユーザー登録編で追記
    path: '/',
    name: 'Users',
    component: () => import('../views/Users.vue')
  },
  { // ★ Loginへの遷移を追記
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
  },
  {// ★ Topへの遷移追記
    path: '/top',
    name: 'Top',
    component: () => import('../views/Top.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

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

ユーザー作成と同様にScriptタグの中身は公式で公開されているソースコードほぼそのままです。
こちらもすごく親切。

ログイン成功時のレスポンス情報は、デフォルトではブラウザのStorage＞IndexedDBに保存されるようです。

  • 配置先
{project_root}
    └ src
       └ views
　　　　　　└ Login.vue
  • 中身
Login.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-container>
</template>

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

const auth = getAuth(firebaseApp)

export default {
  name: 'Login',
  data: () => ({
    email: '',
    pw: ''
  }),
  methods: {
    login: function () {
      signInWithEmailAndPassword(auth, this.email, this.pw)
        .then((userCredential) => {
          const user = userCredential.user
          console.log('create user success.' + user)
          // ★成功レスポンスだった場合は『this.$router.push('/top')』で遷移します
          this.$router.push('/top')
        })
        .catch((error) => {
          const errorCode = error.code
          const errorMessage = error.message
          console.log('errorCode: ' + errorCode)
          console.log('errorMessage: ' + errorMessage)
          alert('認証失敗')
        })
    }
  }
}
</script>

3. さらにviewsフォルダにTop.vueの作成

ログイン成功後に遷移するためのページを作成します。

  • 配置先
{project_root}
    └ src
       └ views
　　　　　　└ Top.vue
  • 中身
Top.vue
<template>
  <h1>TOPページですよ</h1>
</template>

<script>
  export default {
    name: 'Top'
  }
</script>

4. 動作確認

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

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

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

補足ですが、URLの『#』はrouterのindex.jsいじれば取っ払えます。

あとがき

バックエンドをずっとやってきましたけど、ユーザー認証がこんなにも楽だなんて・・・
Google様様です。

リソースへのアクセス制御とかもできるらしい。
ただ、ユーザー情報を氏名とかは登録できるっぽいけど、住所とか付随情報は別途保存しないとダメです。
Authenticationなんで、そりゃそうだって感じですけどね（笑）

Vuetifyも初めて使ってるんですが、公式のリファレンスも情報が豊富でだいぶ助かります。
こりゃ開発のスピード上がりそう。

そして余談ですが、signInWithEmailAndPasswordの処理を共通コンポーネントなどにするときは非同期で処理がされるので、.thenとかにreturnを書いても値が取得できないです。

参考記事

関連記事

Github

Discussion