田無rb#9 ~Nuxt.js firebase連携⑤~

firebaseによるgoogle認証の続きから

firebaseによるgoogle認証の解説

前回は実装中にエラーが起こったところでタイムアップでしたが、修正して動くようになったので(前回記事にて追記コメントしています)解説から

firebaseで発行されたapiKeyなどを渡して、firebaseの初期化を行います

firebase上に利用例が載っていたんですが、初期化の部分にはfirebase.initializeApp(config)のみ書いてあり、実行するとエラーになったのでhttps://github.com/zeit/next.js/issues/1999#issuecomment-326805233を参考に修正しています

// 設定用意
var config = {
  apiKey: "...",
  authDomain: "...",
  databaseURL: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "..."
};

// firebase初期化
!firebase.apps.length ? firebase.initializeApp(config) : firebase.app();

続いて、認証を行う機能を提供するGoogleAuthProviderオブジェクトを作成します

signInWithPopupメソッドで作成したオブジェクトを利用してポップアップでgoogle認証を実施します

ログインに成功した場合、以下のようにresult.userでログインユーザ情報を取得できます

var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider)
  .then(function(result) {
    console.log(result.user.providerID)  // OAuthProviderのID
    console.log(result.user.uid)         // ユーザに割り当てられたID
    console.log(result.user.displayName) // 表示名
    console.log(result.user.email)       // メールアドレス
    console.log(result.user.phoneNumber) // 電話番号
    ...
  }).catch(function(error) {
    ...
  });

次回はログイン時のみ参照、投稿が可能な伝言板アプリの作成を行う