knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

Laravel 5.8で、Google認証の追加 javascript編 #php #Laravel #Vue.js

index:

概要

前の firebase Google認証 で、Vue CLI / node.js版
の関係になりますが。JS版の実装となります

実装など

・上記の参考等で、
 firebaseログインし、
 プロジェクトの概要>設定>全般の
 マイアプリ>Firebase SDK snippet あたりの関連key
 をコピーしておきます

・外部に設置する場合、ドメイン追加が。必要でした
 Authentication > ログイン方法 >承認済みドメイン
 で「ドメインの追加」を開き、 対象ドメインの追加する。


・外部CDN読込
https://github.com/kuc-arc-f/lara58a/blob/master/resources/views/users/test.blade.php

https://gist.github.com/kuc-arc-f/fac786eff9dca4e6716e967466ad7fcb

<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-auth.js"></script>

・認証の処理
  signInWithPopup() コールバック内で、認証データを取得できました。

// Initialize Firebase
var config = {
  apiKey: "YOUR-PROJECT",
  authDomain: "YOUR-PROJECT.firebaseapp.com",
  databaseURL: "https://YOUR-PROJECT.firebaseio.com",
  projectId: "YOUR-PROJECT",
  storageBucket: "YOUR-PROJECT.appspot.com",
  messagingSenderId: "123"
}
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

//vue
new Vue({
	el: '#app',
	data: {
		message: '',
	},
	created:function(){
//console.log("create");
		this.provider = new firebase.auth.GoogleAuthProvider();
        this.popup_open();
	},
	methods: {
		update() {
			this.message = '';
		},
		popup_open: function(){
			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)
			});			
		}
	}
});

参考のページ

knaka0209.hatenablog.com