Slider Widget

Responsive Advertisement

Memasang Fitur Login/Authentication di Blogger dengan Firebase v9

Memasang Fitur Login/Authentication di Blogger dengan Firebase v9

Pada artikel kali ini, kita akan membahas cara untuk menambahkan fitur Authentication (Autentikasi) Login-Logout untuk Blogger atau halaman statis menggunakan layanan gratis dari Google yaitu Firebase.

Memasang Fitur Login/Authentication di Blogger dengan Firebase v9

Demo GitHub | Demo Tema Contempo

Daftar Isi

Apa itu Firebase?

Firebase adalah sekumpulan Tool atau alat yang disediakan oleh Google yang terdiri dari Cloud Database, Authentication, Hosting, Serverless Function, dll - dapat digunakan untuk aplikasi berbasis web dan seluler.

Mengatur Project di Firebase

Untuk membuat project baru, kalian dapat masuk ke halaman firebase.google.com. Di bagian atas (Navbar), klik tombol Go to Console (Masuk Console).

Membuat Project Firebase Baru

Menambahkan Project Firebase adalah proses yang mudah dan cepat. Kalian dapat mengeklik tombol Add Project (Tambahkan Proyek).

Menambahkan Project Firebase

Masukkan nama Project kalian.

Membuat Project Baru di Firebase

Aktifkan/nonaktifkan Google Analytics (Jika diperlukan), dan selesai.

Mengaktifkan/Menonaktifkan Google Analytics

Menghubungkan Blog atau Halaman Web

Sebelum menggunakan layanan Firebase, kalian harus mengubungkan Blog/Website dengan Firebase. Untuk melakukannya, klik ikon yang tampak seperti tag penutup html.

Menambahkan Blog/Website ke Firebase

Masukkan Nama Aplikasi project dan klik tombol Register App.

Membuat Aplikasi Project Firebase

Di bagian Add Firebase SDK, pilih Use a <script> tag dan salin kode konfigurasi firebaseConfig seperti berikut:

Kode Konfigurasi Firebase

Jika sudah, klik tombol Continue to Console.

Mengaktifkan Fitur Authentication di Firebase

Selanjutnya, kalian perlu mengaktifkan fitur Authentication di Dashboard Firebase. Silahkan ikuti beberapa tahap berikut:

Pada Dropdown Build, klik Authentication. dan klik tombol Get started.

Mengaktifkan Fitur Authentication di Firebase

Pada Tab Sign In Method, pilih sign in provider yaitu Google.

Mengaktifkan Login Provider Google

Klik toggle Enable, isi informasi yang diperlukan dan klik tombol Save.

Mengaktifan Login Google

Selanjutnya, kita perlu mengizinkan akses domain. Pada tab Settings, klik Authorized Domain, klik tombol Add Domain dan masukkan nama domain kalian.

Menambahkan Domain

Sampai disini, kita telah berhasil mengatur serta mengkonfigurasi Firebase. Selanjutnya kita dapat menambahkannya kedalam Blog kita.

Menambahkan Script Firebase dan Styles kedalam Blog

Sebelum menambahkan Script dan Style, kalian perlu membuat satu halaman statis.

Halaman statis pada blogger adalah halaman yang urlnya adalah seperti berikut: www.namablog.com/p/halamanstatis.html.

Setelah halaman statis dibuat. Kalian perlu menyalin nama URL dari halaman statis tersebut: Contoh: halamanstatis.html.

Selanjutnya, masuk ke Edit HTML cari tag </head> dan pastekan kode berikut tepat sebelum tag tersebut:

<b:tag cond="data:view.isPage" name="link" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/elhakimyasya/Contoh-Kode@ffd057bc708e1d3294b292edd407870fefd1b29f/dist/firebase-auth.css" />

Masih di Edit HTML, cari tag </body> dan pastekan kode berikut tepat sebelum tag tersebut:

<b:if cond="data:view.isPage">
    <script>
        // Masukkan kode firebaseConfig dibawah ini

        // Edit index.html menjadi nama halaman statis kalian
        var pageDashboard = 'index.html';

        // Edit .post-body menjadi selector untuk kontainer kalian.
        var container = document.querySelector('.post-body');
    </script>
    <script src="https://cdn.jsdelivr.net/gh/elhakimyasya/Contoh-Kode@6c9aa683e0480874e1047e38cc789c91cf4ba1af/dist/firebase-auth.js"></script>
</b:if>

Selanjutnya, kalian perlu mengubah beberapa hal pada script diatas sesuai dengan petunjuk yang ada pada setiap komentar // ....

Pada kode diatas, kalian perlu mempastekan kode firebaseConfig yang telah disalin sebelumnya, tepat dibawah komentar // Masukkan kode firebaseConfig dibawah ini. Contoh:

// Masukkan kode firebaseConfig dibawah ini
const firebaseConfig = {
  apiKey: "AIzaxxxxx",
  authDomain: "elcxxxxx.firebaseapp.com",
  projectId: "elcrxxxxx",
  storageBucket: "elcxxxxx.appspot.com",
  messagingSenderId: "461xxxxx",
  appId: "1:46xxxxx"
};

Itulah beberapa hal untuk memasang Firebase Authentication pada Blogger. Jika artikel ini bermanfaat, silahkan bagikan ke teman atau kerabat. Jika kalian memiliki pertanyaan atau terdapat hal yang kurang jelas, silahkan tulis pada kolom komentar. Terimakasih.

Yorum Yap