Vue.js+Firebase Authentication（メール／パスワード）で認証

何故Firebase Authenticationで認証しようとしたのか

当初はBasic認証させたかった（Functionsの利用）が、
Firebaseの無料枠では出来なかったため、
Firebase Authenticationでメールアドレス＋パスワード認証をすることにした

実装方法

Firebaseの設定

①プロジェクト作成

②Authenticationの設定

・[Authentication]>[Sign-in method]>[メール/パスワード]を有効に変更
・[Authentication]>[Users]>[ユーザー追加]で使用するメール/パスワードを登録しておく

③プロジェクトの設定

・[設定]>[全般]でウェブ API キーをコピー
・[設定]>[サービスアカウント]でAdmin SDK 構成スニペットをコピー
・新しい秘密鍵の生成を押下して、秘密鍵情報のjsonファイルを取得（serviceAccountKey.jsonにリネームしておく）

コーディング（Vue.js）

main.js

import firebase from 'firebase'
var admin = require("firebase-admin");

//③で取得した秘密鍵情報のjsonファイルを指定
var serviceAccount = require("path/to/serviceAccountKey.json");

const config = {
  apiKey: 【③で取得したAPIキー】,
  credential: admin.credential.cert(serviceAccount)
};

firebase.initializeApp(config);

SignIn.vue(新規作成)

  <div class="signin">
        <div>
          <div class="message">
            {{ message }}
          </div>
          <div class="input-area">
            <b-container>
                <b-row>
                  <b-col>メールアドレス：</b-col>
                </b-row>
                <b-row>
                  <b-col><b-form-input type="email" v-model="mailaddress"/></b-col>
                </b-row>
                <br>
                <b-row>
                  <b-col>パスワード：</b-col>
                </b-row>
                <b-row>
                  <b-col><b-form-input type="password" v-model="password"/></b-col>
                </b-row>
            </b-container>
            <br>
            <b-button variant="primary" @click="signIn">サインイン</b-button>
          </div>
        </div>
  </div>

<script>
import firebase from 'firebase'

export default {
  name: 'SignIn',
  data() {
    return {
      mailaddress: '',
      password: '',
      message: '',
    };
  },
  methods: {
      signIn: function () {
        //firebaseSDKのサインイン関数を利用
        firebase.auth().signInWithEmailAndPassword(this.mailaddress, this.password)
        .then(()=>{
            // 成功時の処理
            console.log("OK");
            this.$router.push({ name: 【TOPページ】 });
          }
        )
        .catch(()=>{
            // エラー時の処理
            console.log("NG");
            this.message = "サインイン情報が間違っています。";
            this.password = "";
          }
        )
      }
    }
}
</script>

追記

・basic認証代わりなので、今回は手動でメール／パスワードを用意したが、
認証ユーザー作成（firebase.auth().createWithEmailAndPassword）も可能
・認証状態の取得（firebase.auth().onAuthStateChanged）とrouter.beforeEachを組み合わせれば、認証されていな場合は、サインイン画面に戻る等も実装可能