firebase Cloud Firestore 読み書き, firebase 認証設定など　#firebase #noSQL #Vue

■ 概要:

firebase Cloud Firestore 関連となり。ルール設定や、
書込み設定の、認証等のメモとなります
・前にVue-CLI実装を、認証対応に修正しています

■ 環境

firebase
firebase Cloud Firestore
firebase.auth.GoogleAuthProvider

■ 参考

https://firebase.google.com/docs/firestore/security/rules-conditions?hl=ja

https://qiita.com/karayok/items/0996c8f0ea219c284dbd

■ 参考のコード

kuc-arc-f/vue_2_ver2

■ 設定など
・firebase　側、
　Authentication は、Google認証を使用

・Cloud Firestore　＞　ルール

service cloud.firestore {
 match /databases/{database}/documents {
   // Allow public read access, but only content owners can write
   match /tasks/{document} {
     allow read: if true
     allow write: if request.auth != null
   }    
 }
}

・collection毎に、ルール設定の例。
read : 認証なしで読める
write: 認証後のみ。実行可能

・firebase　接続キー等は main.js に設定
src/main.js

■ vue実装

・ログイン
master/src/components/Users/Login.vue

import firebase from 'firebase'

export default {
   created() {
       this.provider = new firebase.auth.GoogleAuthProvider();
       this.popup_open();
   },
   data() {
       return {
           user : [],
           message :''
       }
   },
   methods: {
       popup_open: function(){
           var self = this
           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)
//                alert("Sucess, Login complete")
               self.$router.push('/')
           }).catch(function(error) {
               var errorCode = error.code;
               var errorMessage = error.message;
               console.log(errorCode)
               console.log(errorMessage)
           });

       }
   }
}

firebase.auth.GoogleAuthProviderで、ポップアっプ画面で、Google認証

・書込み
master/src/components/Tasks/new.vue
this.database.collection('tasks').add で、書き込み
起動時に、firebase.auth().onAuthStateChanged　で、認証完了をチェックし
未認証の場合、書き込み失敗する為。別画面に移動しています

import firebase from 'firebase'

export default {
   async created() {
       this.database = firebase.firestore()
       var self = this
       firebase.auth().onAuthStateChanged(function(user) {
           if (user) {
               console.log("#Auth-OK");
//                console.log(user.email);
           } else {
               alert("Error, auth error, please Google Login")
               self.$router.push('/')
               console.log('#no-User');
           }
       })        
   },
   data() {
       return {
           title:'',
           content:''
       }
   },
   methods: {
       createTask: function() {
console.log('#create')
           var self = this
           if (this.newTodoName == "") { return; }        
           this.database.collection('tasks').add({
               title: this.title,
               content: this.content
           }).then(function(docRef) {
               console.log("Document written with ID: ", docRef.id)
               self.$router.push('/tasks')
           }).catch(function(error) {
               alert("Error save: "+ error)
               console.error("Error adding document: ", error)
           })
           this.newTodoName = ""
       },
   }
}

■　関連のページ

Vue.js (Vue CLI 3) と、firebaseで SPA開発、アプリ実装編 フォーム登録など SPA開発(5)
https://knaka0209.hatenablog.com/entry/vue_cli_spa5

firebase / Cloud firestore の開始編、web版のデータ登録 SPA開発(7)
https://knaka0209.hatenablog.com/entry/firebase_spa7

....