Cara Membuat Authentikasi Dengan Firebase Part 2

23/01/2020    Ekky Ridyanto    214     Website

Hai, developer firebase. Mari kita lanjutkan kembali cara membuat authentikasi menggunakan firebase yang dimana tugas pertama sudah kita siapkan struktur HTML dan sedikit style CSS. Nah, pada bagian ini kita masuk ke tugas yang kedua yaitu meng-import object authentication milik firebase tapi sebelum itu dibagian script-nya kita perlu me-load firebase sdk terlebih dahulu.

Cara-Membuat-Authentikasi-Dengan-Firebase-Part2-01

Beserta script untuk auth firebase-nya.

Cara-Membuat-Authentikasi-Dengan-Firebase-Part2-02

Sekaligus mengatu konfigurasi firebase web

Cara-Membuat-Authentikasi-Dengan-Firebase-Part2-03

untuk melakukan firebase initializeApp.

Cara-Membuat-Authentikasi-Dengan-Firebase-Part2-04

Dan kemudian baru kita import object auth dari firebase-nya untuk melakukan authentikasi.

Cara-Membuat-Authentikasi-Dengan-Firebase-Part2-05

Lalu, di bagian berikutnya ada elemen-elemen yang kita butuhkan dengan mengakses id dari elemen dom-nya mulai dari inputan text yaitu email dan password.

Cara-Membuat-Authentikasi-Dengan-Firebase-Part2-06

Terus, untuk tombol button dari register-btn dan tombol logout-nya juga kita akses satu-satu.

Cara-Membuat-Authentikasi-Dengan-Firebase-Part2-07

Nah, masing-masing tombol tersebut akan diberikan sebuah event click artinya jika di klik salah satu button-nya maka lakukan function yang berbeda. Tentu untuk menambahkan sebuah event di javascript kita akan gunakan addEventListener. Berikut ini cara menuliskannya

Cara-Membuat-Authentikasi-Dengan-Firebase-Part2-08

Artinya, ketika button register diklik panggil method handleRegister tentu fungsi body-nya masih kosong.

Cara-Membuat-Authentikasi-Dengan-Firebase-Part2-09

Begitu juga dengan yang lain. Caranya sama, tambahkan addEventListener on click untuk tombol logout-nya

Cara-Membuat-Authentikasi-Dengan-Firebase-Part2-010

Ketika logout diklik, jalankan fungsi berikut. Kedua fungsi tersebut masih kosong. Kita belum melakukan apa apa. Kemudian sisanya tinggal buat untuk submit form login.

Cara-Membuat-Authentikasi-Dengan-Firebase-Part2-011

Lalu mengakses id-nya formnya melalui document object.

Cara-Membuat-Authentikasi-Dengan-Firebase-Part2-012

Terus tambahkan event on submit.

Cara-Membuat-Authentikasi-Dengan-Firebase-Part2-013

Ketika tombol login submit ditekan, maka panggil fungsi handleLogin untuk melakukan sesuatu. Untuk sementara kita console log dulu dengan tulisan submit login

Cara-Membuat-Authentikasi-Dengan-Firebase-Part2-014

Cukup itu saja kita buat sesimpel mungkin. Pokoknya di bagian ini kita sudah menyediakan beberapa fungsi untuk proses authentikasi mulai dari register, logout dan submit login. 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