田無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) { ... });
次回はログイン時のみ参照、投稿が可能な伝言板アプリの作成を行う