Firebase 1 Login Google

Firebase คืออะไร ?

Firebase คือ สิ่งที่ Google ได้สร้างขึ้นมา เพื่ออะไรก็ไม่รู้ แต่ที่รู้คือ มันมี

Database ที่เป็นแบบ Realtime!!!!

สำหรับหัวข้อนี้จะยังไม่พูดถึงการใช้ Database แต่จะเป็นพื้นฐานการใช้ Database นั้นก็คือเราต้องทำการ Login ให้ได้ก่อน

เริ่มเลย!

ทำการ Login Firebase ผ่าน google ไปเลยครับ ง่ายดีไม่ต้องสมัครใหม่ด้วย กด อนุญาติ ไปเลยครับ และจะพบกับ หน้าจอนี้

ก็ Create new project ตั้งชื่อ project ว่า ChatFirebase เลือกประเทศ Thailand แล้วกด Create project จากนั้นเลือก

Copy มาวางใส่ไว้ในไฟล์ index.html เลยครับ แล้วทำการสร้าง

1.Image
2.Button

จะได้ดังนี้ครับ

index.html

จะสังเกตุเห็นว่า code ดังกล่าวมีการนำ bootstrap เข้ามาใช้ในส่วนของ head ก็ copy ไปวาง แปะได้เลยครับ เพื่อความสวยงามนิดนึง ลองรันดู ผมรันด้วย Xampp นะครับ ใครไม่เคยใช้ก็ลองใช้ดูนะครับ ผลรันได้ดังนี้

ต่อไปเป็นส่วนของ JavaScript ทำการสร้าง login.js ขึ้นมา ซึ่งอยู่ด้วยกันกับ index.html

ที่ไฟล์ index.html ทำการเรียกไฟล์ login.js ใส่ ต่อจาก firebase นะครับ เดี๋ยวรันไม่ผ่าน

และกำหนด function แรกที่จะรันให้เป็น init()

กำหนด onclick ให้ btLogin

ต่อไปจะเขียนไฟล์ login.js ซึ่งเป็น JavaScript

เริ่มแรกทำการกำหนด

1.Auth
2.Database
3.Storage

สำหรับหัวข้อนี้จะใช้แค่ Auth เท่านั้น

สร้าง function init

function นี้ทำหน้าที่คอยตรวจสอบว่า login อยู่หรือไม่

สร้าง function show/hide profile

สร้าง function check login

สร้าง function login logout

ทำการเปิด Auth ในส่วนของ Google

ไปยังหน้าเว็บ firebase แล้วเลือก Auth

เลือกแท็บ SIGN-IN METHID เลือก Google จากนั้นเปิด Enable แล้ว Save

ลองรันดูครับก็จะสามารถ login logout ได้ครับ

สรุป

blog นี้เขียนไว้นานมากแล้วนะครับ

ตั้งแต่ปี 2016 ช่วงที่ Firebase เข้ามาใหม่ๆ แต่เว็บนั้นไม่มีใครอ่าน

เลยลองเอามาลง medium ดูครับ

สามารถ copy code ได้ข้างล่างนี้