VueJs-#12 Vue Login FirebaseUI

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 :

Select Options

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

Setelan Proyek

Menambahkan Firebase ke Aplikasi Web

Parameter Pengaturan Firebase

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

Metode Login

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:

Login
Pilih Email
Profile

Source

  1. https://softauthor.com/firebaseui-vue-login-with-facebook-google-and-email-pasword/

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>