Vue Firebase Authentication (with Google, Email, Anonymous)

จากครั้งที่แล้วเราได้ลองใช้ Database realtime แล้ว ต่อไปเราจะมาลอง login กันดู

ซึ่งให้ใช้ Vuefire ตามบทความนี้ สามารถดูขั้นตอนการลงได้ตามบทความด้านล่าง

Vue Firebase (Realtime Database)

แก้ไขหน้า App.vue ตามนี้

จากนั้นแก้ส่วน Home.vue ตามนี้

ต่อไปก็แก้ใน firebase console แก้ให้เป็น เปิดใช้แล้วทั้งสามตัว

ลองรันดูครับ ก็จะได้หน้าตามประมาณนี้

และจะได้ผู้ใช้มาทั้งสามแบบ

อธิบายแต่ละ function

ส่วนของ App.vue

เริ่มแรกในส่วนของ mounted เราจะกำหนด onAuthStateChanged ตลอดว่ามีการเปลี่ยนแปลงหรือไม่

ถ้ามี user เข้ามาก็จะ set uid ทำให้ ปุ่ม logout ปรากฎขึ้น

และถ้ากด logout ก็จะทำให้ user ไม่เข้า แล้วปุ่ม logout ก็จะหายไปพร้อม uid, email

loginAnonymous, loginGoogle ก็ตามชื่อ

ปัญหาคือ และถ้าเราไปทำหน้าใหม่หละ

ไปดูที่ Home.vue

จะเห็นว่าเราได้ใช้ this.$parent.getfirebase() เพื่อเรียก firebase ที่เรา init ใน App.vue มาใช้

จากนั้นก็ signUpEmail, loginEmail การทำงานก็ตามชื่อ

ทุกวันนี้อะไรมันก็ง่ายไปหมด ทำความเข้าใจ copy paste ก็ทำได้แล้ว ถ้ามัวมานั่งฝึกทุกภาษาคงไม่มีผลงานกันพอดี

“รีบคิด รีบทำ เดี๋ยวตายก่อน” :)