Skip to main content

การใช้งาน Firebase Authentication ด้วย React JS

สวัสดีครับ สำหรับในบทความนี้จะเกียวกับ การใช้งาน Firebase Authentication กันครับ โดยในตัวอย่างจะใช้ React Js ซึ่งในบทความนี้จะต่อเนื้องจากบทความที่แล้วครับ

การใช้งาน Firebase Realtime Database ด้วย ReactJs

จาก เนื้อหาในตอนที่แล้ว เราได้ทำการสร้าง App ง่าย ๆ ให้สามารถ บันทึก และ แก้ไข ข้อมูลกันไปแล้ว แต่ในตอนนี้ เราจะมาเพิ่มหน้าจอ ให้สามารถ Login และ Logout ได้ครับ

โดยวิธีการใช้งาน Firebase Authentication โดยละเอียด ดูได้ที่

https://firebase.google.com/docs/auth/web/password-auth?authuser=0

ก่อนอื่นเรามาแก้ไขไฟล์ firebase.js กันก่อนครับ

โดยเราจะเพิ่ม export const auth = firese.auth(); เพื่อใช้งาน ฟังชั่น authentication ครับ

 

ต่อมาเรามาแก้ไขไฟล์ App.js กันต่อเลยครับ

ในส่วนของ import firebase เพิ่ม การเรียกใช้งาน function auth ของ firebase

ในส่วนของ state เราจะทำการเพิ่ม state email,password, และ isLogin ใช้สำหรับตรวจสอบว่าได้มีการ Login แล้ว หรือยังโดยค่าเร่ิมต้นคือ false หมายถึงยังไม่ได้ Login

ใน constructor เพิ่มการ bind ใน function login และ logout เพื่อให้สามารถ จัดการ กับ ค่าที่อยู่ภายใน state ได้

เพิ่ม function login และ logout

ใน function login จะมีการเรียกใช้งาน  signInWithEmailAndPassword โดยมีการส่ง email ,password เพื่อไปตรวจสอบว่า เป็นผู้ใช้จริงหรือไม่ หาก จริง จะมีการ setState ให้ isLogin เป็น true

ในส่วนของ function logout เรียกใช้งาน auth.signOut หากสำเร็จ  จะมีการ setState ให้ isLogin เป็น false

เพิ่ม function loginForm เพื่อแสดงหน้า สำหรับ กรอก Username , Password

เพิ่มการตรวจสอบว่า ได้มีการ Login แล้วหรือยัง โดยหาก isLogin เป็น false ให้เรียกใช้งาน loginForm

เพิ่มการแสดงปุ่ม Logout เมื่อ isLogin มีค่าเป็น true

จากนั้นทดลอง run คำสั่ง npm start  จะพบกับหน้าจอ Login

มาถึงตอนนี้เราก็ได้เพิ่ม Code ในส่วนของการ Authentication ด้วย Firebase เรียบร้อยแล้ว แต่ยังไม่สามารถใช้งานได้ เนื่องจากเราต้องไปทำการเปิดใช้งาน Authentication ใน Firebase Control กันก่อนครับ

การเปิดใช้งาน Firebase Authentication

1.ไปที่ https://console.firebase.google.com/u/0/

2.ในตัวอย่างจะเลือก Project todo ซึ่งเป็น Project เดิมจากตอนที่แล้วครับ
จากนั้นเลือกที่ เมนู Authentication จากนั้นเลือก เมนู วิธีการลงชื่อเข้าใช้ ใน Tab ด้านบน ครับ

3.เลือกที่ หัวข้อ อีเมล/รหัสผ่าน จากนั้นให้คลิก เปิดใช้งาน และ บันทึกครับ

4. ไปที่ Tab ผู้ใช้ ด้านบน ทำการเพิ่ม User ที่เราต้องการ โดยการคลิกที่ปุ่ม เพิ่มผู้ใช้ครับ

5.เสร็จสิ้นข้อตอนการตั้งค่าที่ Firebase ครับ

ทำการทดสอบที่หน้าเว็บ React Js ที่เราสร้างขึ้น หาก Login สำเร็จจะแสดงหน้า ของ todo List
เมื่อกด Logout ก็จะเปลี่ยนหน้า Login ขึ้นมาครับ

ตัวอย่างไฟล์ App.js แบบเต็ม ๆ