Firebase adalah infrastruktur cloud real-time untuk aplikasi sisi klien, yang memungkinkan pengembang mengubah aplikasi kerangka Front-end apa pun seperti Vue, React, Angular, iOS atau Android menjadi produk tumpukan penuh yang mampu melakukan penskalaan tanpa batas di cloud.
Persiapan
Install Project menggunakan Vue Cli
vue create vue-firebase
Pilih Manually select feature, lalu ceklis pilihan berikut :
Install Theme BootstrapVue
vue add bootstrap-vue
Install Firebase into Vue Project
npm install firebase --save
Buat Project di FireBase
Sebelum memulai membuat Program, kita akan menyiapkan Proyek di Firebase, masuk ke Firebase Console buat Proyek baru, setelah selesai masuk ke Menu Project Overview => Setelan proyek
Menambahkan Firebase ke Aplikasi Web
Sekarang kita akan membuat setingan untuk firebase di Program Vue kita sesuaikan dengan gambar di atas. Buka main.js tambahkan baris berikut diantara import dan Vue.config.productionTip = false;
import firebase from 'firebase'
const firebaseConfig = {
apiKey: "*****",
authDomain: "firebaseUIAuth-*****.firebaseapp.com",
databaseURL: "https://****-709a3.firebaseio.com",
projectId: "firebaseUIAuth-709a3",
storageBucket: "",
messagingSenderId: "2547636***397",
appId: "1:254763***397:web:***c15c671b5c"
};
firebase.initializeApp(firebaseConfig);
Menyiapkan Route
router.js
import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import Login from "@/components/Login.vue";
import Profile from "@/components/Profile.vue";
import Todos from "@/components/Todos";
import firebase from 'firebase/app';
import 'firebase/auth';
Vue.use(Router);
let router = new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/home",
name: "Home",
component: Home,
meta: {
auth: true
}
},
{
path: '/about',
name: 'about',
component: () => import('./views/About.vue')
},
{
path: "/",
name: "Login",
component: Login,
meta: {
guest: true
}
},
{
path: "/profile",
name: "Profile",
component: Profile,
meta: {
auth: true
}
},
{
path: '/todo',
name: 'Todos',
component: Todos,
meta: {
auth: true
}
}
]
});
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.auth)) {
firebase.auth().onAuthStateChanged(user => {
if (user) {
next()
} else {
next({
path: "/",
})
}
})
} else if (to.matched.some(record => record.meta.guest)) {
firebase.auth().onAuthStateChanged(user => {
if (user) {
next({
path: "/profile",
})
} else {
next()
}
})
} else {
next()
}
});
export default router
router.beforeEach berfungsi untuk meredirect page yang memiliki property :
meta: {
auth: true
}
Singkatnya jika belum login atau user kosong route akan diredirect kembali ke route Login.
Menyiapkan Store
Kita perlu menyiapkan store untuk menyimpan status login & data user yang nantinya akan ditampilkan pada component Profile.vue
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
isLogin:false,
user:null
},
mutations: {},
actions: {}
});
Login component menggunakan FirebaseUI
FirebaseUI adalah library yang dibuat sebagai tambahan dari Firebase Authentication SDK yang menyediakan alur UI drop-in untuk digunakan dalam aplikasi Anda. Baca penjelasannya disini.
Sekarang kita akan menambahkan FirebaseUI di program Vue kita
npm install firebaseui --save
Karena kita akan login menggunakan gmail atau email, maka kita harus mengaktifkan options Authentication pada Firebase Console. Masuk ke Menu Authentication=>Pilih Tab Metode Login lalu aktifkan pilihan Email & Google
Setelah itu kita buat component Login.vue yang nantinya akan menampilkan halaman login.
<template>
<div>
<br/><br/><br/><br/>
<h5 class="center-align">Login</h5>
<section id="firebaseui-auth-container"></section>
</div>
</template>
<script>
import firebase from "firebase";
import * as firebaseui from "firebaseui";
import "firebaseui/dist/firebaseui.css";
export default {
name: "Login",
data() {
return {};
},
mounted() {
let ui = firebaseui.auth.AuthUI.getInstance();
if (!ui) {
ui = new firebaseui.auth.AuthUI(firebase.auth());
}
var uiConfig = {
signInSuccessUrl: "/profile", // This redirect can be achived by route using callback.
signInFlow: "popup",
signInOptions: [
//firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID
]
};
ui.start("#firebaseui-auth-container", uiConfig);
}
};
</script>
<style>
</style>
Perhatikan baris signInSuccessUrl: “/profile”, Jika login berhasil route akan diarahkan ke route /profile.
Buat Program
Selanjutnya kita akan membuat sebuah component NavBar.vue yang nantinya bisa diakses di setiap component jika dalam posisi login, untuk mempercantik tampilannya kita akan menambahkan BootstrapVue proyek kita.
vue add bootstrap-vue
components/NavBar.vue
<template>
<section>
<b-navbar toggleable="lg" type="dark" variant="info">
<b-navbar-brand href="#">ombagoes.com</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item to="/Home">Home</b-nav-item>
<b-nav-item to="About">About</b-nav-item>
<b-nav-item to="#" disabled>Disabled</b-nav-item>
</b-navbar-nav>
<b-navbar-nav class="ml-auto">
<b-nav-item v-show="!user" href="/">Login</b-nav-item>
<b-nav-item-dropdown v-if="user" right>
<template v-slot:button-content>
<em>{{user.displayName}}</em>
</template>
<b-dropdown-item to="/profile">Profile</b-dropdown-item>
<b-dropdown-item @click="signoutButtonPressed">
Sign Out
</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</section>
</template>
<script>
import firebase from "firebase";
export default {
data() {
return {
user: null
};
},
created() {
firebase.auth().onAuthStateChanged(user => {
if (user) {
this.user = user;
this.$store.state.isLogin=true;
this.$store.state.user=user;
}
});
},
methods: {
signoutButtonPressed(e) {
e.stopPropagation();
firebase.auth().signOut();
this.$router.push({ name: "Login" });
}
}
};
</script>
NavBar.vue mengatur penyimpanan status login jika ada perubahan status jika login akan menyimpan data user di store dan menghapus data user jika sebaliknya.
Lalu buat layout pada App.vue
<template>
<div id="app">
<navigation v-show="getAuth"/>
<router-view/>
</div>
</template>
<script>
import navigation from "@/components/NavBar.vue";
export default {
name: "App",
components: {
navigation
},
computed: {
getAuth: function (){
return this.$store.state.isLogin;
}
}
};
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
perhatikan baris <navigation v-show=”getAuth” /> component ini hanya akan tampil jika posisi user login dimana getAuth diambil dari store.
Menyiapkan component Profile
components/Profile.vue akan menampilkan data user yang sebelumnya disimpan pada store.
<template>
<section>
<div v-if="getUser">
<b-card v-bind:img-src="getUser.photoURL" img-alt="Card image" img-left class="mb-3">
<b-card-text>
<p>
name:<strong>{{getUser.displayName}}</strong>
<br />email:
<strong>{{getUser.email}}</strong>
<br />uid:
<strong>{{getUser.uid}}</strong>
<br />provider:
<strong class="teal-text">{{getUser.providerData[0].providerId}}</strong>
</p>
</b-card-text>
</b-card>
</div>
</section>
</template>
<script>
import firebase from "firebase";
export default {
data() {
return {};
},
computed:{
getUser:function(){
return this.$store.state.user;
}
},
};
</script>
Jalankan hasilnya sbb:
Source