Firebase Authentication—สร้างระบบ Sign In เข้าเว็บแอปแบบง่ายๆ

👋 สวัสดีเพื่อนๆ อีกครั้งครับผม วันนี้เรามาลองสร้างระบบ Sign In ด้วย Firebase Authentication กันดูครับ ว่าจะสะดวกและใช้งานง่ายช่วยให้ชีวิตได้มีเวลาไปกิจกรรมได้อีกเยอะครับ ก่อนอื่นอยากให้ไปทำความรู้จัก Firebase Authentication ที่บทความนี้กันก่อนครับ

👉👉👉 รู้จัก Firebase Authentication ตั้งแต่ Zero จนเป็น Hero

ซึ่งในบทความนี้ของผมจะเป็นการยกตัวอย่างการทดลองทำใน Web Application นะครับ มาเริ่มกันเลย


1. สร้าง Firebase Project พร้อมกับสร้าง Firebase SDK snippet

— หากใครที่มี Firebase Project อยู่แล้วให้ไปที่ Project Setting ทำการเพิ่ม Web App ของเราที่ต้องการใช้งาน Firebase เข้าไป หลังจากนั้นเราจะได้ Firebase SDK snippet มาเพื่อเอาไปใช้งานใน Web App ของเราครับ

2. เปิดใช้งาน Authentication Sign-in method ที่ต้องการ

— หลังจากสร้าง Firebase Project หรือใช้งาน Project เดิมที่มีอยู่แล้ว ในหน้า Consoleg ให้ไปที่ Authentication —> Sign-in method แล้วกำหนดเปิดใช้งานการ Sign in ที่ต้องการ ในที่นี้ผมจะใช้ Email/Password และ Google ครับ อย่าลืมเพิ่ม Authorized domains ด้านล่างให้ตรงกับ Web App ของเราด้วยนะครับ

3. สร้างหน้า Sign in

— สร้างหน้า Sign in สำหรับให้ Sign in ก่อนเข้าใช้งาน

— ในส่วน <head> ให้ทำการเพิ่ม Firebase SDK snippet ที่ได้จากข้อ 1 ลงไป ตามด้วย Firebase Authentication ที่เราจะใช้งาน

— ทำการเพิ่ม FirebaseUI เข้าไป

— เรียกใช้งาน FirebaseUI โดยกำหนดให้หาก Sign In สำเร็จให้ไปที่หน้า dashboard.html ที่ได้สร้างไว้แล้ว

— โดยผมได้กำหนด Style เพิ่มเติมนิดหน่อยตามนี้

— ขั้นตอนสุดท้าย ในส่วน <body> กำหนดหน้าตาได้ตามต้องการเลยครับ อย่าลืมกำหนด id ของ FirebaseUI ให้ตรงกับใน Script ด้วยนะครับ

— จะได้ออกมาประมาณนี้

4. ทดสอบการ Sign in

— หลังจากได้ทดสอบด้วยการ Sign in ด้วย Google Account และ Email ซึ่งหาก Email ที่ใช้ยังไม่มีการลงทะเบียนไว้จะมีการให้ Sign up ให้ด้วยเลย เมื่อเข้าไปที่หน้า Console ก็จะพบกับ User ที่ได้ลงทะเบียนไว้ครับ

5. ดึงข้อมูลโปรไฟล์มาใช้งาน

— หลังจาก Sign in ผมให้ Redirect มาที่หน้า Web App ที่ใช้งาน โดยผมจะทำการนำ User Display และ User Photo ที่ได้มาแสดงในหน้า Web App ด้วย โดยมีตัวอย่างดังนี้


6. มาลองดูสิ่งที่ได้กันครับ


ท้ายสุด สำหรับการทำระบบ Sign in แบบง่ายๆ ด้วย Firebase Authentication ก็ได้มาช่วยให้ชีวิตในการพัฒนาได้สะดวกสบายกันขึ้นอีกเยอะเลยครับ ทั้งนี้ยังไม่ได้ลงรายละเอียดถึงขั้นการที่จะทำ Database ให้ตรงกับของ User นะครับ ไว้เป็นการทดลองเล่นกันในครั้งต่อไปแล้วกันครับ Happy Coding…🚀🚀🚀


อ้างอิง
1. https://firebase.google.com/docs/auth/web/firebaseui
2. https://github.com/firebase/firebaseui-web
3. https://firebase.google.com/docs/web/setup


ฝากร้านหนังสือมือสองของผมด้วยครับ เป็นหนังสือซื้อมาอ่านเอง แล้วต้องการขายต่อในราคาที่เป็นกันเอง เพื่อนๆ ที่สนใจสามารถติดตามหนังสือที่จะขาย และสั่งซื้อได้ที่ https://shop.line.me/@921ijoic

โปรโมชั่น คูปองส่วนลด และดีล ที่ดีที่สุดของร้านค้าออนไลน์กว่า 300 แบรนด์พร้อมรับเงินคืนจาก ShopBack
https://bit.ly/3c4tlmV

Ruk-Com จดโดเมน-เช่าโฮสต์ ราคาประหยัด พร้อมให้บริการใน 1 นาที
http://bit.ly/36q8A12