t8.dev

🇺🇸

Firebase Authentication(v9)とVueで認証機能を実装する

公開日:2021/10/02
更新日:2021/10/05

はじめに

心理学を使ったTODOアプリを開発している、@takasqrです。

心理学を使ったTODOアプリ | todo8

心理学を使ったTODOアプリ | todo8

FirebaseのSDKのバージョンが9に変わって実装方法が変わったので記事を書くことにしました。

構成

  • Firebase Authentication(v9)
  • Vue
  • Vuetify

Vuetifyを使ってない人でもscriptの部分を見てもらえればわかると思います。

Firebase Authenticationとは?

Firebase Authenticationは、一言で言うと「ログイン機能を簡単に作ることが出来るクラウドサービス」です。

Firebaseは現在Googleによって運営されています。

できる事

Firebase上にユーザーを作って管理していくことができます。

ログイン方法は、

  • メールアドレス
  • Googleアカウント
  • Twitterアカウント
  • Microsoftアカウント
  • Gitgubアカウント
  • Appleアカウント
  • Facebookアカウント
  • 電話番号認証
  • カスタム認証
  • 匿名認証

と豊富にあります。

また、ユーザーに「管理者ユーザー」、「一般ユーザー」等のラベル付けすることもできます。

【Firebase】カスタムクレーム(Custom Claims)で管理者ユーザーを作る | ライトリ

料金

電話認証以外は無料で使うことができます。

料金プラン | Firebase

メリット

FirebaseはGoogleのサービスなので、ほとんどの人にとってセキュリティは上がると思います。ほかにもFirebase Authentication公式ライブラリがあるので、自分で作るより開発工数を短縮することができます。

Vue.jsとは?

Vue.jsは一言で言うと、「フロントエンド(ブラウザ)で動く、javascriptのフレームワーク」です。

ユーザー作成

<template>
  <div>
    <v-btn @click="SignUp">
      ユーザー作成
    </v-btn>
  </div>
</template>
<script>
import { getAuth, onAuthStateChanged, createUserWithEmailAndPassword } from 'firebase/auth'

export default {
  data () {
    return {
      emailAddress: 'test@example.com',
      password: 'Password',
    }
  },
  methods: {
    SignUp () {
      const auth = getAuth()
      createUserWithEmailAndPassword(auth, this.emailAddress, this.password)
        .then((userCredential) => {
          console.log('user created')
        })
        .catch((error) => {
          alert(error.message)
          console.error(error)
        })
    }
  }
}
</script>

ログイン

<template>
  <div>
    <v-btn
      @click="SignIn"
    >
      ログイン
    </v-btn>
  </div>
</template>
<script>
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth'
export default {
  data () {
    return {
      emailAddress: 'test@example.com',
      password: 'Password',
    }
  },
  methods: {
    SignIn () {
      try {
        const auth = getAuth();

        signInWithEmailAndPassword(auth, this.emailAddress, this.password)
          .then((user) => {
            console.log('ログイン成功')
          })
          .catch((error) => {
            console.error(error)
          })
      } catch (e) {
        console.error(e)
      }
    }
  }
}
</script>

Googleアカウント

googleアカウントでログインするコードです。

<template>
  <div>
    <v-btn
      @click="SignInGoogle"
    >
      Googleアカウントでログイン
    </v-btn>
  </div>
</template>
<script>
import { getAuth, GoogleAuthProvider, signInWithPopup } from 'firebase/auth'
export default {
  methods: {
    SignInGoogle () {
      const provider = new GoogleAuthProvider()

      const auth = getAuth()
      signInWithPopup(auth, provider)
        .then((result) => {
          this.$router.push({ path: '/' })
        }).catch((error) => {
          console.error(error)
        })
    }
  }
}
</script>

ログアウト

<template>
  <div>
    <v-btn @click="signout">
    signout
    </v-btn>
  </div>
</template>
<script>
import { getAuth, signOut } from 'firebase/auth'

export default {
  methods: {
    signout () {
      const auth = getAuth()
      signOut(auth).then(() => {
        // Sign-out successful.
        alert('サインアウトしました。')
      }).catch((error) => {
        // An error happened.
        console.error(error)
      })
    }
  }
}
</script>

VueでFirestore(v9)を操作するにはこちら。

関連記事

firebaseに入門して一年後の使い方
【Firebase】カスタムクレーム(Custom Claims)で管理者ユーザーを作る
Firebase Authentication(v9)とNextで認証機能を実装する
Firebase Authentication(v9)とNuxtで認証機能を実装する
Firebase Authentication(v9)とReactで認証機能を実装する
Firestore Liteとは?
【hooks対応版】Firebase Firestore(v9)とNextでデータを操作する
Firebase Firestore(v9)とNuxtでデータを操作する
【hooks対応版】Firebase Firestore(v9)とReactでデータを操作する
Firebase Firestore(v9)とVueでデータを操作する

オススメ記事

5年間ほぼ毎日プログラミングの勉強をするためにやったこと
論文と本から学ぶ、プログラミング独学のコツ
目標達成率を高める if thenプランニングとは!?【本とアプリも紹介】