Cara Membuat Authentikasi Dengan Firebase Part 1

22/01/2020    Ekky Ridyanto    181     Website

Halo semuanya sekarang kita akan masuk kebagian yang sangat menarik dari firebase yaitu authentikasi. Tentu ketika teman teman sedang membuat aplikasi mau itu website ataupun mobile pasti didalamnya terdapat fitur register users login, logout dan lain sebagainya nah itu semua akan diurus sama firebase. Pokoknya keren deh. jadi silahkan teman teman kunjungi halaman dashboardnya pilih bagian authentication

Cara-Membuat-Authentikasi-Dengan-Firebase-Part1-01

Tentu masih diproject yang sama yaitu firebasic. klo teman teman buka maka data awalnya masih kosong karena kita belum mempunyai user sama sekali. Silahkan kalian kebagian tab sign-in method. 

Cara-Membuat-Authentikasi-Dengan-Firebase-Part1-02

Disini ternyata ada beberapa provider yang bisa kalian gunakan tidak hanya email dan password 

Cara-Membuat-Authentikasi-Dengan-Firebase-Part1-03

Tapi kalian juga bisa melakukan authentikasi melalui social media seperti google gmail 

Cara-Membuat-Authentikasi-Dengan-Firebase-Part1-04

Atau facebook, twitter, githubnya dan masih banyak lagi yang firebase mudahkan diawal untuk melakukan authentikasi

Cara-Membuat-Authentikasi-Dengan-Firebase-Part1-05

Tentu setiap provider punya caranya masing masing. Nah untuk sekarang yang akan kita praktekkan adalah sign in dengan email dan passwordnya di klik saja untuk mengaktifkan provider email dan password

Cara-Membuat-Authentikasi-Dengan-Firebase-Part1-06

Setelah itu disimpan settingannya

Cara-Membuat-Authentikasi-Dengan-Firebase-Part1-07

Kalo seandainya statusnya masih disabled berarti teman teman akan mendapatkan error walaupun sudah menulis kodenya. Pastikan di enabled dulu kalo ingin memperbolehkan melakukan authentikasi dengan email dan password atau dengan provider yang lainnya. Tugas berikutnya dibagian tampilannya sangatlah sederhana saya sudah sediakan form untuk memasukkan email dan password 

Cara-Membuat-Authentikasi-Dengan-Firebase-Part1-08

Lalu bisa pilih register ataupun login 

Cara-Membuat-Authentikasi-Dengan-Firebase-Part1-09

dan ada satu tombol logout yang defaultnya tersembunyi setelah diberikan class hidden

Cara-Membuat-Authentikasi-Dengan-Firebase-Part1-010

Disini saya sudah siapkan semuanya silahkan download di link berikut

Download

Jadi siapkan dulu struktur templatenya supaya teman teman bisa mengikuti tutorial ini. kita buka yuk struktur htmlnya kebagian text editor. Saya akan jelaskan sedikit apa saja yang sudah saya lakukan disini. Pertama ada style css yang saya berikan margin 5% dan jenis tulisan sans serif

Cara-Membuat-Authentikasi-Dengan-Firebase-Part1-011

Lalu ada satu class hidden nilainya display none

Cara-Membuat-Authentikasi-Dengan-Firebase-Part1-012

Intinya dibagian strukturnya ada dua input text dengan id berbeda beda

Cara-Membuat-Authentikasi-Dengan-Firebase-Part1-013

dan dua tombol button yang salah satunya diberikan id namanya register-btn

Cara-Membuat-Authentikasi-Dengan-Firebase-Part1-014

Pastikan nama idnya unik. tentu semuanya dibungkus didalam sebuah form. Idenya sendiri pada saat users submit form login, terus users berhasil login maka form beserta tombol loginnya akan disembunyikan dengan diberikan class hidden. Nanti kita akan mainkan domnya tergantung kondisi dari usersnya. 

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