2018年12月6日 星期四

[Vue] VueFire – Firebase Auth and RTDB


 Vue.js   Firebase   VueFire



Introduction


VueFire is the official vue.js package for Google Firebase.
We will learn how to login/logout add use Realtime Database Bindings.




Environment


Vue.js 2.5.11
Vue CLI 3.2.1
Firebase Javascript SDK 5.5.8
VueFire 1.4.5


Firebase


Firebase setup
Assume that you had created a Realtime Database in Firebase, import the following JSON to your RTDB Data and set the Rules.


Data

{
  "Demo" : {
    "products" : {
      "3a30b4b6-8fe5-48cf-9aab-06f431257928" : {
        "id" : "3a30b4b6-8fe5-48cf-9aab-06f431257928",
        "price" : "2500",
        "title" : "Implementing Domain-Driven Design",
        "type" : "Book",
        "typeId" : "1"
      },
      "6cfd8b64-0ff2-4bde-8278-befaa2f4e42f" : {
        "id" : "6cfd8b64-0ff2-4bde-8278-befaa2f4e42f",
        "price" : "500",
        "title" : "Toy Robot",
        "type" : "Toy",
        "typeId" : "2"
      },
      "800afd3c-1615-49ba-b33d-497842af6c82" : {
        "id" : "800afd3c-1615-49ba-b33d-497842af6c82",
        "price" : "1000",
        "title" : "Star Wars",
        "type" : "Book",
        "typeId" : "1"
      },
      "fa7ece70-6f5c-41a2-a7a6-cd03ca3d0136" : {
        "id" : "fa7ece70-6f5c-41a2-a7a6-cd03ca3d0136",
        "price" : "800",
        "title" : "Essential Scrum",
        "type" : "Book",
        "typeId" : "1"
      }
    }
  }
}


Rules

{
  "rules": {
    "Demo":
        {
        "products":{
          ".read": "auth != null"
        }
      }
    }
}



Implement


Install

$ npm install firebase
$ npm install vuefire


Import and Register

import VueFire from 'vuefire'

/* firebase */
// import * as firebase from 'firebase' //Dev mode
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/database'

//firebase
const firebaseConfig = {
    apiKey: "xxxxxx",
    authDomain: "xxxx.firebaseapp.com",
    databaseURL: "https://xxxx.com",
    projectId: "xxxxx",
    storageBucket: "xxxxx",
    messagingSenderId: "xxxxx"
};

const firebaseApp = firebase.initializeApp(firebaseConfig);
window.firebase = firebase;
window.firebaseDb = firebaseApp.database();
window.firebaseAuth = firebaseApp.auth();

Vue.use(VueFire)


Login/Logout

Here is the sample code for login with Google provider.

<template>
  <div class="card">
    <div class="card-block">
        <div class="card-text">
            <div v-if="!isAuth" class="text-center">

                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <button class="btn btn-toolbar" @click="login('google')">
                                <img width="30" src="../assets/images/google-logo.png" />
                                Use Google Account
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else class="text-center">
                <table class="table">
                    <tr>
                        <td class="text-center">
                            <label class="control-label">{{ user.displayName }}</label>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-center">
                            <img :src="user.photoURL" width="100px" height="100px"/>
                        </td>
                    </tr>
                    <tr>
                            <td class="text-center">
                                Phone number: <label class="control-label">{{ user.phoenNumber || '(no phone number)'}}</label>
                            </td>
                        </tr>
                    <tr>
                        <td class="text-center">
                            Email: <label class="control-label">{{ user.email || '(no email)'}}</label>
                        </td>
                    </tr>                
                </table>
                <div>
                    <input type="button" class="btn btn-warning" @click="logout" value="Logout" />
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "login",
  data() {
    return {
      user: null,
      isAuth: false //Is authorized flag
    };
  },
  methods: {
    login(providerName) {
      let provider = null;
      switch (providerName) {
        case "google":
          provider = new firebase.auth.GoogleAuthProvider();
          break;
      }

      firebaseAuth.signInWithPopup(provider)
        .then(result => {
          this.user = result.user;

        }).catch(err => console.error(err));
    },

    logout() {
      firebaseAuth.signOut()
        .then(() => {
          this.user = null;
          this.isAuth = false;
        }).catch(err => console.log(error));
    }
  },
  beforeCreate(){
      firebaseAuth.onAuthStateChanged((user) => {
        if (user) {
          this.user = user;
          this.isAuth = true;
        }
      })
  },
  created() {
      console.log(firebaseDb);
      console.log(firebaseAuth);
  }
};
</script>

Demo





Array/Object bindings

JS

new Vue({
    el: "#app",
    firebase: {
      fbArray: firebaseDb.ref('Demo/products').limitToLast(10), //bind as an array
      fbObject: {
        source: firebaseDb.ref('Demo/products/800afd3c-1615-49ba-b33d-497842af6c82'),
        asObject: true, //Bind as object
        cancelCallback: function () { },
        readyCallback: function () { }
    }
  }
});


Html (For showing fbArray and fbObject)

<pre>{{ fbObject }}</pre>
<table class="table">
<thead class="thead-dark">
    <tr>
    <th>Type</th>
    <th>ID</th>
    <th>Title</th>
    <th>Price</th>
    </tr>
</thead>
<tbody>
    <tr v-for="item in fbArray" :key="item.id">
    <td>{{ item.type }}</td>
    <td>{{ item.id }}</td>
    <td>{{ item.title }}</td>
    <td>{{ item.price }}</td>
    </tr>
</tbody>
</table>


The above Html will results in



Reference







沒有留言:

張貼留言