Vue.js(Vue-CLI 3) + firebase で、Google認証の追加。SPA開発(18)

index:

概要:

前のSPA (Vue.js/ Vuec CLI 3) 関連で、
認証機能を、firebase のGoogle認証を追加する例となります。

環境

vue.js
Vue-CLI 3
firebase

参考

https://firebase.google.com/docs/auth/web/google-signin?hl=ja

実装など

上記参考にしていますが、ポップアップ画面で認証する方法になります。

test_auth.vue
https://github.com/kuc-arc-f/vue_2_auth1/blob/master/src/components/Users/test_auth.vue

・GoogleAuthProvider の実行
this.provider = new firebase.auth.GoogleAuthProvider();

・ポップアップ起動、
　認証後、コールバックで。認証情報 を取得できました

firebase.auth().signInWithPopup(this.provider).then(function(result) {
	var token = result.credential.accessToken;
	console.log(token)
	var user = result.user;
	console.log(user.uid)
	console.log(user.email)
	console.log(user.displayName)
}).catch(function(error) {
	var errorCode = error.code;
	var errorMessage = error.message;
	console.log(errorCode)
	console.log(errorMessage)
});

参考の設定

github.com

その他

・外部サーバ設置する場合で、Google認証が起動きない場合が
　ありました。

・対応方法ですが。
firebaseで、
Authentication > ログイン方法 >承認済みドメイン
で「ドメインの追加」を開き、
対象ドメインの追加すると。認証ポップアップが起動できました。