firebase authentication UIをNuxt.jsで使ってみる

プログラミング

firebase authentication UI を使うときに、エラーが出たりしてハマったので、authentication UIを使うまでの手順を残しておきたいと思います。

Nuxt.jsのプロジェクト作成

npm init nuxt-app firebase-authUI

必要なパッケージのインストール

firebase authentication UI を利用していく上で、firebasefirebaseuiのパッケージを使うのでインストールします。

npm install firebase firebaseui

Nuxtでfirebase authentication UIを使っていく

firebaseのプロジェクトを作っておく

今回はfirebaseを使うということで、API keyが必要になってきます。
firebase consoleから、firebase CLIのどちらでも良いのでプロジェクトを作成しておいてください。

~/plugins に firebase.jsを作成する。

import firebase from 'firebase'

if(firebase.apps.length === 0){
    firebase.initializeApp(
        {
            //各自のAPI key
            apiKey: "**************",
            authDomain: "****************",
            projectId: "************",
            storageBucket: "***********",
            messagingSenderId: "*************",
            appId: "************",
            measurementId: "***********"   
        }
    )
}

export default firebase

firebase authentication UI の呼び出し

<template>
  <div>
    <div id="firebase-authui"></div>
  </div>
</template>

<script>
import firebase from '~/plugins/firebase'
import 'firebaseui/dist/firebaseui.css'

export default{
  mounted(){
    const firebaseui = require("firebaseui");

    //firebaseuiの設定
    const uiConfig = {
      //signin成功後に遷移先
      signInSuccessUrl:'/', 
      //signin方法
      signInOptions:[
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID
      ]
    }

    //再度アクセスした時に、もう一度 new するとerrorが出るため分岐
    if(firebaseui.auth.AuthUI.getInstance()){
      const ui = firebaseui.auth.AuthUI.getInstance();
      ui.start('#firebase-authui', uiConfig);
    }
    else{
      const ui = new firebaseui.auth.AuthUI(firebase.auth());
      ui.start('#firebase-authui', uiConfig);
    }
  }
}
</script>

ここでアクセスしてみると、下のようなログイン画面が作られている。

ただ、Sign in with Googleをクリックしてみるとわかるが、まだ動作しない。
動作させるには サインインメソッドを有効化する必要がある。

firebase-authentication-ui-signin-google-email

firebase consoleでサインインメソッドを有効化する

firebase consoleのAuthenticationからSign-in methodにアクセスする。
すると大量にサインインメソッドがあるので、「メール/パスワード」と「Google」を有効にする。

Twitter等はAPIを申請したりするのが、面倒なので今回はメールとGoogleのみしかやりません。

Googleの「プロジェクトのサポートメール」は適宜設定してください。

Googleでログインしてみる

表示したfirebase auth UIでGoogleでログインを試してみると、ログインができるようになってる!

そしてログイン後にfirebase consoleのAuthenticationからUsersを見てみると、ユーザーとして登録されています!!!

コメント

タイトルとURLをコピーしました