🔥

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

2022/03/03に公開

Firebase

バックエンドの実装ばっかりで、フロント実装の経験がほぼなかったので、Vue(Vuetify)使ってフロントを実装してみた話です。

やり始めるまでの与太話。

大まかな理由は先に書いた通りなんですが、現職の会社でフロントをTS（TypeScript）を標準にしていこうという流れや、サーバレスやらマイクロサービスやらワードが飛び交いはじめ・・・。
『・・・っ！？』ってなったので、『とりあえず作ろ♪』というノリ。
・ TS＋Vueじゃないの？→TSの前にそもそもVueがわからなかったorz
・なんでVue（Vuetify）なの？→今までVue使っている案件に入ることが多かったので。
・なんでFirebase？→AWSでやりたかったけど、クレカ登録必要だったんですもの・・・。（でも、今年中にはやる）
でもFirebase思いのほか楽ちん過ぎてびっくりです。（本域声）

環境

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）

事前準備

Firebaseの登録
Vueプロジェクトの生成
※上記は別途記事化します

手順

Vuetifyをインストールしてnpm run serveしたものがコチラになります。（3分クッキング風）

firebaseインストール

Firebaseの公式から言われた通りに、firebaseのプラグインをインストールします。
コマンドプロンプトを開いて、対象のプロジェクトまで移動し、下記コマンドを実施してください。

npm install firebase

対象のファイル作成

ちなみに、今回はメアド＋パスワードでユーザ登録をする方式で行っていきます。
上記のほかにも、Twitterアカウントなどのアカウントでもユーザー作成できるようです。

1. pluginsフォルダにfirebase.configの作成

Firebaseのプロジェクトを作成した際に表示されたConfigから初期化までを行うためのファイルを作成します。

配置先

{project_root}
    └ src
　　    └ plugins
　　　　　　└ firebaseConfig.js

中身

firebaseConfig.js

import { initializeApp } from "firebase/app";

// firebaseから取得した値をコピペ
const firebaseConfig = {
  apiKey: "*****************",
  authDomain: "*****************",
  databaseURL: "*****************",
  projectId: "*****************",
  storageBucket: "*****************",
  messagingSenderId: "*****************",
  appId: "*****************",
  measurementId: "*****************"
};

// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);
export default firebaseApp

2. 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 = [
  { // ★「/」→「/home」に
    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')
  },
  { // ★「/」を追加し、Usersページへのルーティングを追加
    path: '/',
    name: 'Users',
    component: () => import('../views/Users.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

3. viewsフォルダにUsers.vueの作成

Scriptタグの中身は公式で公開されているソースコードほぼそのままです。
すごく親切。

配置先

{project_root}
    └ src
       └ views
　　　　　　└ Users.vue

-　中身

Users.vue

<template>
  <v-container>
    <v-row>
      <v-col cols="12">
        <v-text-field
            label="Email*"
            v-model="email"
        ></v-text-field>
        <v-text-field
            label="Password*"
            type="password"
            v-model="pw"
        ></v-text-field>
        <v-btn
          color="primary"
          @click="createUser()"
        >
            作成
        </v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

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

const auth = getAuth(firebaseApp)

export default {
  name: 'Users',
  data: () => ({
    email: '',
    pw: ''
  }),
  methods: {
    createUser: function () {
      createUserWithEmailAndPassword(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('作成失敗')
        })
    }
  }
}
</script>