Cara Login dengan GMAIL Pada Firebase

07/02/2020    Ekky Ridyanto    37     Website

Untuk sistem authentifikasi selanjutnya saya akan memperbolehkan masuk dengan akun google gmailnya sebagai identifikasi setiap usersnya. Untuk bisa menggunakan pastikan teman teman tambahkan konfigurasi dari firebasenya dihalaman html seperti berikut

cara-login dengan-gmail-pada-firebase01

Kemudian kita sediakan dulu strukturnya yakni satu tag button punya id namanya btn-gmail dengan tulisan Login GMAIL cukup itu

cara-login dengan-gmail-pada-firebase02

Referensikan id elemennya dengan getElementById 

cara-login dengan-gmail-pada-firebase03

Supaya bisa diberikan event onclick jika diklik buttonnya silahkan panggil function loginGoogle 

cara-login dengan-gmail-pada-firebase04

Sebelum melakukan sesuatu di bagian fungsinya kita coba buka dulu halaman consolenya yang pertama teman teman harus memberikan tahu dulu kalo kita boleh login dengan google gmailnya. Silahkan kebagian authentication lalu ke tab sign-in method

cara-login dengan-gmail-pada-firebase05

Seperti sebelumnya kita akan aktifkan tombol enablednya yang biarkan default. Lalu di save supaya kita bisa menggunakan 

cara-login dengan-gmail-pada-firebase06

Setelah add firebase projectnya dan enable google-signin maka yang harus kita lakukan adalah mengimport providernya yang kita mau 

cara-login dengan-gmail-pada-firebase07

Langkah langkah kalian bisa lihat di bagian dokumentasi dari firebasenya. https://firebase.google.com/docs/auth/web/google-signin

Providernya sendiri namanya GoogleAuthProvider bentuknya class kita instance object ke variabel provider seperti yang ada dicontoh. Untuk bagian yang lainnya seperti menambahkan scopenya 

cara-login dengan-gmail-pada-firebase08

Ubah kode bahasa untuk pengguna itu semua opsional boleh digunakan silahkan kalian gunakan

cara-login dengan-gmail-pada-firebase09

Tapi disini saya langsung skip kelangkah berikutnya yaitu menuliskan metode signInWithPopup berdasarkan provider yang di import 

cara-login dengan-gmail-pada-firebase010

Tentu provider disini sifatnya dinamis tergantung kalian ingin login dengan google, bisa facebook, twitter atau githubnya. Tapi pada kasus ini kita implementasi untuk google-signin

cara-login dengan-gmail-pada-firebase011

dan jika berhasil masuk ke function then dengan mengembalikan hasil response lakukan sesuatu dengan console log cetak tulisan success terus console responsenya

cara-login dengan-gmail-pada-firebase012

Sedangkan jika gagal metode catch menangkap object error lalu cetak errornya seperti berikut

cara-login dengan-gmail-pada-firebase013

Jadi pada saat button gmail di klik secara otomatis akan tampil sebuah login popup dari provider gmailnya

cara-login dengan-gmail-pada-firebase014

Kalo teman teman sebelumnya sudah melakukan login gmailnya maka provider firebase akan langsung redirect dan memberikan hasil responsenya

cara-login dengan-gmail-pada-firebase015

Berbeda bila kondisinya belum login maka teman teman tinggal memasukkan beberapa input seperti email dan password yang valid untuk masuk ke akun googlenya

cara-login dengan-gmail-pada-firebase016

Yang jelas tidak ada error hasil responsenya berhasil kita tampilkan diconsole browsernya. Sebagai catatan kalian harus jalankan melalui local server supaya proses login google signin nya dapat berjalan dan tidak terjadi error. Okay sejauh ini kita berhasil login dengan akun gmailnya teman teman bisa buktikan ke tab users sudah ada email dan password yang tersimpan disana

cara-login dengan-gmail-pada-firebase017

Tentu kita pun belum melakukan apa apa untuk data responsenya. Jadi hari ini cukup sampai disini. Selamat mencoba

Artikel, Web Design, Javascript, HTML CSS, Tips dan Trik, website, Firebase

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More