QuasarFramework(Vue.js) + FirebaseUIでEmailとgoogleでの認証機能を実装する

前の記事

概要

FirebaseUIを使って認証機能を実装します。前回までは、UIを表示させるまででしたが、今回は実際の認証機能まで実装します。といっても、Firebaseは、コンソールから設定できることが多いので、簡単なものだったら、びっくりするくらい早く実装できます！

環境

• MacOS Catalina 10.15.1
• node v10.16.0
• npm 6.11.3

Emailでの認証を設定する

メールアドレスのAccountChooserの設定を外します。

デフォルトだとおそらく以下のような画面が表示されてしまいます。

↑これをなくします。そのために、uiConfigのオプションで、credentialHelperを設定します。

const uiConfig = {
  signInSuccessUrl: '/',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID
  ],
  credentialHelper: firebaseui.auth.CredentialHelper.NONE
}

コンソールからユーザーを登録しておきます。

あらかじめ、コンソールからユーザーを登録しておきます。

テストしてみます。

signInSuccessUrlで設定したページに遷移すれば成功です！

googleでの認証を設定する

コンソールからgoogleサインインを有効にします。

プロジェクトの公開名、プロジェクトのサポートメールを設定して保存します。

テストします。

↑こういう感じの画面で、google にログイン画面が出てきたらアカウントを選択してログインします。こちらはユーザーが無い場合は、自動で作成されます。

先程のEmail認証のときと同じ用に、signInSuccessUrlで設定したページに遷移すれば成功です！

次回

次回は、より細かいユーザー設定を実装してみます・