ログインを数行で実装できるFirebase Authenticationが便利すぎた

こんにちは！いっちーです。

皆さんはアプリのログインはどのように実装していますか？

今回プライベートでのWebアプリ作成時にFirebase Authenticationを試したら

ログインの実装を数行で済ますことができて大変便利だったので、

この記事ではFirebase Authenticationを使ってログインを実装する方法を紹介したいと思います。

こんな方におすすめ

ログインの実装をどうしようか悩んでいる人
Firebaseに興味がある人
手軽にログインを実装したい人

いっちー

込み入ったことをしなければFirebaseにログイン周りを丸投げすることができます！

Firebase Authenticationとは？
1. 対応しているログイン方法
2. 料金
Firebaseを使用してログインを実装
1. Firebaseプロジェクトの作成
ログインを実装
1. テストユーザーをfirebaseに登録する
2. ログインしてみる
最後に

Firebase Authenticationとは？

Firebase AuthenticationとはGoogleが提供している認証処理サービスです。

認証のロジック部分をFirebase Authenticationに任せることができるので、

アプリ側では難しい処理は必要なく簡単にログインが実装できます。

対応しているログイン方法

Firebase Authenticationは以下のログイン方法に対応しています。

メールアドレスとパスワードに基づく認証
3rd Partyアカウントを用いた認証
- Google
- Apple
- Facebook
- Twitter
- GitHub
電話番号認証
カスタム認証
匿名認証
- 一時的な匿名アカウントを作成することで、ユーザーにログインを要求することなく認証できる機能

料金

Firebaseには料金プランが2つあり、

無料のSparkプランと有料のBlazeプランから選択できます。

認証に関しての料金プランは、

Sparkプランで提供されるのは、電話認証が1万/月とその他の認証サービスで

Blazeプランでは電話認証が$0.01/認証となっています。

電話番号認証以外はSpark・Blaze共に使うことができます。

料金プランの詳細はFirebase公式HPをご覧ください。

いっちー

無料プランだったとしても様々なサービスの認証が使えるFirebase Authentication、すごすぎない！？

Firebaseを使用してログインを実装

ここからはFirebase Authenticationを使用したログインの実装方法に関して解説します。

Firebaseプロジェクトの作成

まずはFirebaseのプロジェクトを作成します。

以下のURLにアクセスしてプロジェクトを作成します（Googleアカウントが必要です）

プロジェクトの作成をクリックします。

プロジェクトに名前をつけて続行をクリックします。

Googleアナリティクスを新規プロジェクトで使用するか尋ねられ、使用する場合はアカウントを選択します。

プロジェクトを作成ボタンを押すとプロジェクトが作成されます。

いっちー

これでプロジェクトの作成は完了です！

プロジェクトのダッシュボートに移動します。

最初はSparkプラン（無料プラン）になっていることを確認します。

また、Firebaseにアプリの登録も必要なので登録します。

アプリはFirebaseコンソールトップの「アプリを追加」ボタンから追加できます。

プラットフォームは必要に応じて選択します。（今回はWebを選択した程で進めます）

アプリに名前をつけるとSDKを使うために必要なapiKeyなどの情報が表示されます。

後から、

サイドバーのプロジェクトの設定（歯車マーク） > 全般 > マイアプリ

から確認できますのでここはスルーでOKです。

ダッシュボードからAuthenticationに移動します。

以下の画面が表示されるので始めるをクリックします。

最後にアプリ認証をするための設定を有効にします。

Authentication > Sign-in method から使用したいログインプロバイダのステータスを有効にしておきます。

いっちー

これでFirebase側の設定は完了です！

ログインを実装

さて、準備も終わったところで実際にログインを実装していきます。

なお、今回は例としてVue.js + Vuetifyのプロジェクトを使用します。

<template>
  <v-card
    class="pa-5 ma-auto"
    width="50%"
  >
    <v-form
      ref="loginForm"
    >
      <v-text-field
        v-model="email"
        label="Email"
        :rules="requiredRule"
        required
      ></v-text-field>
      <v-text-field
        v-model="password"
        :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
        label="Password"
        :rules="requiredRule"
        :type="showPassword ? 'text' : 'password'"
        required
        @click:append="showPassword = !showPassword"
      ></v-text-field>
      <v-btn
        @click="login"
      >
        ログイン
      </v-btn>
    </v-form>
  </v-card>
</template>

<script>
import firebase from 'firebase';

export default {
  name: 'Login',
  data: () => ({
    email: "",
    password: "",
    requiredRule: [
      value => !!value || '必須項目です',
    ],
    showPassword: false,
  }),
  methods: {
    login() {
      if (this.$refs.loginForm.validate()) {
        firebase.auth().signInWithEmailAndPassword(this.email, this.password)
        .then(res => {
          alert('success')
          console.log('success', res)
        })
        .catch(e => {
          alert('error')
          console.log('error', e)
        })
      } else {
        console.log('validate error')
      }
    },
  }
}
</script>

こちらで以下のような画面が生成されます。

実際にログインに使用する箇所は以下の1行です。

firebase.auth().signInWithEmailAndPassword(this.email, this.password)

signInWithEmailAndPasswordにユーザーネームとパスワードを渡してあげるだけでログインが実現できちゃいます！

ログインボタンをクリックした時に動作するlogin()メソッドでは、

signInWithEmailAndPasswordの成功の可否に応じて.thenや.catchでハンドリングします。

login() {
  if (this.$refs.loginForm.validate()) {
    firebase.auth().signInWithEmailAndPassword(this.email, this.password)
    .then(res => {
      // ログイン成功の処理
      alert('success')
      console.log('success', res)
    })
    .catch(e => {
      // ログイン失敗の処理
      alert('error')
      console.log('error', e)
    })
  } else {
    console.log('validate error')
  }
}

また、firebaseに接続する設定として

.env(or env.local)
main.js

に設定を追記します。

.env

VUE_APP_FIREBASE_API_KEY=<API KEY>
VUE_APP_FIREBASE_AUTH_DOMAIN=<AUTH DOMAIN>

※環境変数は接頭辞にVUE_APP_をつけないと環境変数として認識されないようです。

main.js

~~~略~~~
import firebase from 'firebase';

~~~略~~~

const firebaseAuthConfig = {
  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN
}

firebase.initializeApp(firebaseAuthConfig);

これでプログラムの実装は完了です。