1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vue.js+Firebase Authentication(メール/パスワード)で認証

Posted at

#何故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を組み合わせれば、認証されていな場合は、サインイン画面に戻る等も実装可能

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?