หากคุณกำลังสร้างแอปพลิเคชันด้วย React หรือ React Native และต้องการเพิ่มระบบล็อกอิน ฐานข้อมูลแบบเรียลไทม์ หรือเพียงแค่ต้องการไม่ต้องกังวลเรื่องแบ็กเอนด์อีกต่อไป Firebase คือหนึ่งในตัวเลือกที่สะดวกและทรงพลังที่สุดในปัจจุบันมันช่วยให้คุณมีระบบตรวจสอบสิทธิ์ ฐานข้อมูล พื้นที่จัดเก็บไฟล์ และอื่นๆ อีกมากมายโดยไม่ต้องสร้าง API ของตัวเองแม้แต่ตัวเดียว
ในบทความนี้ เราจะมาดูขั้นตอนการเชื่อมต่อแอป React (รวมถึง React Native/Expo) กับ Firebase ทีละขั้นตอนวิธีการจัดโครงสร้างโปรเจ็กต์ การตั้งค่าการตรวจสอบสิทธิ์ด้วยอีเมลและ Google การเก็บรักษาเซสชันของผู้ใช้ และการอ่าน/เขียนข้อมูลไปยังทั้ง Firestore และ Realtime Database เราจะทำเช่นนี้ด้วยตัวอย่างในโลกแห่งความเป็นจริงและโค้ดที่มีคำอธิบาย โดยอธิบายด้วยภาษาที่เข้าใจง่าย เพื่อให้คุณสามารถทำตามได้แม้ว่าคุณจะไม่ใช่ผู้เชี่ยวชาญด้านเทคโนโลยีก็ตาม
Firebase คืออะไร และทำไมจึงเข้ากันได้ดีกับ React?
Firebase คือบริการBackend as a Service ของ Googleที่ให้บริการหลากหลายรูปแบบพร้อมใช้งาน เช่น การตรวจสอบสิทธิ์ ฐานข้อมูลแบบเรียลไทม์ Firestore (ฐานข้อมูลเอกสาร NoSQL) ที่เก็บไฟล์ การวิเคราะห์ เครื่องมือการเติบโต การสร้างรายได้ และอื่นๆ อีกมากมาย เริ่มต้นจากการเป็นฐานข้อมูลแบบเรียลไทม์ แต่หลังจากพัฒนามาหลายรุ่น ก็ได้วิวัฒนาการเป็นแพลตฟอร์มแบ็กเอนด์ที่ครอบคลุมทุกด้าน
แทนที่จะต้องตั้งค่าเซิร์ฟเวอร์เอง ออกแบบ API จัดการโครงสร้างพื้นฐาน และปรับขนาดเอง คุณสามารถใช้ Firebase เพื่อเชื่อมต่อแอป React ของคุณกับแบ็กเอนด์ได้โดยตรงโดยใช้ SDK อย่างเป็นทางการซึ่งหมายความว่างานแบ็กเอนด์ทั่วไปหลายอย่าง (การตรวจสอบสิทธิ์, CRUD, กฎความปลอดภัย, การแจ้งเตือน ฯลฯ) จะลดลงเหลือเพียงไม่กี่การเรียกใช้ฟังก์ชัน JavaScript ที่มีเอกสารอธิบายอย่างละเอียด
การผสานรวมกับ React นั้นเป็นไปอย่างราบรื่นมาก เพราะFirebase เปิดเผยข้อมูลในรูปแบบ JSONและ SDK ของ Firebase ถูกออกแบบมาให้ทำงานฝั่งไคลเอ็นต์ ด้วย React คุณเพียงแค่ดึงข้อมูลเหล่านั้นมา เติมข้อมูลลงในสถานะของคอมโพเนนต์ และปล่อยให้ไลบรารีจัดการการเรนเดอร์ทุกอย่างเมื่อมีการเปลี่ยนแปลงเกิดขึ้น เมื่อคุณใช้ตัวฟังแบบเรียลไทม์ การอัปเดตฐานข้อมูลแต่ละครั้งจะกระตุ้นการเรนเดอร์ใหม่โดยอัตโนมัติ ซึ่งเข้ากันได้ดีกับโมเดลแบบประกาศ (declarative model) ของ React
สร้างและกำหนดค่าโปรเจ็กต์ Firebase
ก่อนที่คุณจะเริ่มเขียนโค้ด React คุณต้องเตรียมสภาพแวดล้อม Firebase ให้พร้อมเสียก่อน กระบวนการนี้คล้ายคลึงกันมากไม่ว่าคุณจะใช้งานจากเว็บแอป React, React Native หรือ Expo ในทุกกรณีขั้นตอนแรกคือการสร้างโปรเจ็กต์ในคอนโซล Firebase
ไปที่https://firebase.google.com/ลงชื่อเข้าใช้ด้วยบัญชี Google ของคุณ แล้วเข้าถึงคอนโซล จากนั้น สร้างโปรเจ็กต์ใหม่ตั้งชื่อให้เข้าใจง่าย (ตัวอย่างเช่น “react-firebase” หรือ “auth-firebase-react”) และเลือกภูมิภาคที่เหมาะสมที่สุดสำหรับกลุ่มเป้าหมายของแอปพลิเคชันของคุณ
เมื่อสร้างโปรเจ็กต์เสร็จแล้ว Firebase จะนำคุณไปยังแดชบอร์ดหลัก คุณจะเห็นตัวเลือกต่างๆ สำหรับการเพิ่มแอป ได้แก่ iOS, Android และ Web สำหรับเว็บแอป React คุณเลือกไอคอนเว็บ ในขณะที่สำหรับ React Native คุณสามารถลงทะเบียนแอป iOS และ/หรือ Android ได้ตามต้องการ เป้าหมายในทุกกรณีคือการได้รับค่ากำหนดค่า Firebase ที่มีคีย์ต่างๆ เช่น apiKey, authDomain, projectId และอื่นๆ ที่คล้ายกัน
หน้าต่างคอนโซลจะแสดงโค้ดตัวอย่างที่หน้าตาประมาณนี้:
const config = { apiKey: "AIzaSy*", authDomain: "tu-proyecto.firebaseapp.com", databaseURL: "https://tu-proyecto.firebaseio.com", projectId: "tu-proyecto", storageBucket: "tu-proyecto.appspot.com", messagingSenderId: "796"};firebase.initializeApp(config);ใน React Web คุณต้องการเพียงแค่ object การกำหนดค่าและการเรียกใช้initializeAppโดยใช้ SDK แบบโมดูลาร์ในปัจจุบัน คุณจะได้เห็นวิธีการนำไปปรับใช้กับโครงสร้างโปรเจ็กต์ของคุณในภายหลัง
การเลือกใช้ฐานข้อมูล: Realtime Database กับ Firestore
Firebase มีฐานข้อมูลหลักสองประเภท ได้แก่Realtime DatabaseและCloud Firestoreทั้งสองเป็นฐานข้อมูล NoSQL แต่มีความแตกต่างที่สำคัญในด้านรูปแบบข้อมูล การสืบค้นข้อมูล และการคิดค่าบริการ
ฐานข้อมูลแบบเรียลไทม์ (Real-time Database) คือฐานข้อมูล JSON ขนาดใหญ่ที่จัดระเบียบทุกอย่างไว้ในโครงสร้างแบบต้นไม้เดียว เหมาะอย่างยิ่งเมื่อคุณต้องการใช้งานฐานข้อมูลขนาดใหญ่ อัปเดตเร็วมากและซิงโครไนซ์แบบเรียลไทม์ได้ง่ายโครงสร้างนี้ประกอบด้วยโหนดและเส้นทาง และคุณสามารถเข้าถึงพวกมันได้ด้วยการอ้างอิง เช่น firebase.database().ref('object/name')นี่เป็นตัวเลือกคลาสสิกหากคุณต้องการใช้งานฟังก์ชันต่างๆ เช่น การแชท สถานะผู้ใช้ หรือข้อมูลพื้นฐานทั่วไป
ในทางกลับกัน Firestore จัดระเบียบข้อมูลเป็นคอลเลกชันและเอกสารแต่ละเอกสารมีฟิลด์ และคุณสามารถสร้างคอลเลกชันย่อยภายในได้ ช่วยให้สามารถสืบค้นข้อมูลที่ซับซ้อนมากขึ้น สร้างดัชนีแบบผสม การเรียงลำดับ และตัวกรองแบบผสมผสานได้ เหมาะสำหรับแอปพลิเคชันขนาดใหญ่ขึ้นเล็กน้อยที่ต้องการการสืบค้นที่ยืดหยุ่น ความสามารถในการปรับขนาด และกฎความปลอดภัยที่แสดงออกได้ชัดเจนยิ่งขึ้น
ฐานข้อมูลทั้งสองสามารถใช้งานร่วมกันได้อย่างราบรื่นภายใน React แม้กระทั่งในแอปเดียวกัน ตัวอย่างเช่น คุณสามารถจัดเก็บผู้ใช้ โพสต์ หรือภารกิจใน Firestore และใช้ Realtime Database สำหรับข้อมูลที่มีการเปลี่ยนแปลงสูงที่คุณต้องการตรวจสอบอย่างต่อเนื่อง สิ่งสำคัญคือ ใน React คุณเพียงแค่ฟังการเปลี่ยนแปลงและอัปเดตสถานะส่วนที่เหลือ Firebase จะจัดการให้เอง
สร้างแอป React Native / Expo ด้วย Firebase
หากคุณกำลังใช้งาน React Native คุณสามารถผสานรวม Firebase โดยใช้Firebase Web SDKซึ่งเข้ากันได้อย่างสมบูรณ์กับโปรเจ็กต์ที่สร้างด้วย Expo หรือ React Native CLI อย่างเป็นทางการ ด้วยวิธีนี้ คุณจะไม่ต้องผูกติดกับไลบรารีตัวกลาง และยังคงอยู่ภายใต้กรอบการสนับสนุนอย่างเป็นทางการของ Google
เริ่มต้นใช้งาน Expo โดยติดตั้ง Expo CLI ทั่วโลกจากเทอร์มินัลโดยใช้คำสั่งต่อไปนี้ npm install -g expo-cliถัดไป สร้างโปรเจ็กต์ React Native ใหม่ด้วย expo initเลือกเทมเพลตพื้นฐาน (เช่น "ว่างเปล่า" ที่มีการจัดการเวิร์กโฟลว์) แล้วเริ่มแอปด้วย yarn ios o yarn androidExpo จะแสดงรหัส QR ให้คุณสแกนด้วยกล้องบน iOS หรือด้วยแอป Expo บน Android เพื่อดูโปรเจ็กต์ของคุณบนอุปกรณ์
เมื่อแอปพื้นฐานของคุณทำงานได้แล้ว ให้เพิ่มส่วนประกอบที่จำเป็น: อันดับแรกคือ Firebase SDK เอง yarn add firebaseจากนั้นคุณสามารถผสานรวมไลบรารีการนำทางต่างๆ เช่น @react-navigation/native y @react-navigation/stackรวมถึงแพ็กเกจเพิ่มเติมที่จำเป็นใน React Native (gesture-handler, reanimated, screens, safe-area-context เป็นต้น) เพื่อจัดการขั้นตอนต่างๆ ระหว่างหน้าจอเข้าสู่ระบบ ลงทะเบียน และหน้าหลัก
นอกจากนี้ การติดตั้งส่วนประกอบเสริมสำหรับ UI บนมือถือก็มีประโยชน์มาก เช่นreact-native-keyboard-aware-scroll-viewเพื่อจัดการแป้นพิมพ์ในฟอร์มได้อย่างถูกต้อง และไลบรารีอย่างbase64เพื่อให้ฟังก์ชันทั่วไปที่ขาดหายไปในรันไทม์บนมือถือบางตัว (btoa, atob เป็นต้น) ทั้งหมดนี้สามารถเพิ่มได้ด้วยคำสั่งติดตั้งเพียงคำสั่งเดียวโดยใช้ yarn ในโปรเจ็กต์ของคุณ
ตั้งค่า Firebase ใน React / React Native
คุณจะรวมการตั้งค่า Firebase ไว้ในไฟล์เดียว เพื่อให้ส่วนที่เหลือของแอปพลิเคชันจำเป็นต้องนำเข้าเฉพาะอินสแตนซ์ที่เริ่มต้นใช้งานไว้แล้วเท่านั้น ตัวอย่างเช่น สร้างโฟลเดอร์ขึ้นมา src/firebase และภายในไฟล์การกำหนดค่า เช่น config.js (o config.ts (ใน TypeScript)
ในไฟล์นั้น ให้นำเข้าฟังก์ชันที่จำเป็นจาก Firebase SDK และกำหนดอ็อบเจ็กต์การกำหนดค่าของคุณด้วยค่าที่ได้รับจากคอนโซลของ Firebase ในโปรเจ็กต์ React Native ที่ใช้ SDK เวอร์ชันเก่า คุณอาจเห็นบางอย่างเช่นนี้:
import * as firebase from 'firebase';import '@firebase/auth';import '@firebase/firestore';const configuracionFirebase = { apiKey: 'TU_CLAVE_API', authDomain: 'tu-dominio-auth.firebaseapp.com', databaseURL: 'https://tu-bd.firebaseio.com', projectId: 'tu-id-proyecto', storageBucket: 'tu-id-proyecto.appspot.com', messagingSenderId: '1234567890', appId: '1:1234567890:web:codigoapp'};if (!firebase.apps.length) { firebase.initializeApp(configuracionFirebase);}export { firebase };โดยทั่วไปแล้ว โปรเจ็กต์เว็บที่ใช้ Vite และ TypeScript จะใช้ Firebase SDK 9 เวอร์ชันแบบโมดูลาร์ และเป็นแนวปฏิบัติที่ดีที่จะวาง Vite ไว้ใน Firebase SDK 9 ค่าที่ไวต่อการเปลี่ยนแปลงในตัวแปรสิ่งแวดล้อมตัวอย่างเช่น คุณสามารถสร้างไฟล์ได้ .env ในรูทและกำหนดคีย์ดังนี้ VITE_FIREBASE_API_KEY, VITE_FIREBASE_AUTH_DOMAINเป็นต้น จากนั้น ในไฟล์การกำหนดค่า คุณจะสร้างอ็อบเจ็กต์จาก import.meta.env['VITE_FIREBASE_API_KEY'] และที่คล้ายกัน
ไม่ว่าจะใช้วิธีใด รูปแบบก็เหมือนกัน คือ คุณเริ่มต้นใช้งานแอป Firebase เพียงครั้งเดียว และส่งออกอินสแตนซ์นั้น (หรือส่งออกอ็อบเจ็กต์เฉพาะ เช่นFirebaseAuth , FirestoreหรือRealtime Database ) เพื่อให้ใช้งานได้ง่ายในส่วนที่เหลือของโปรเจ็กต์
โครงสร้างหน้าจอพื้นฐาน: หน้าเข้าสู่ระบบ หน้าลงทะเบียน และหน้าหลัก
เมื่อคุณผสานรวมระบบการตรวจสอบสิทธิ์เข้ากับแอป React Native โครงสร้างที่พบได้ทั่วไปคือการมีหน้าจอหลักสามหน้าจอ: เข้าสู่ระบบ, การลงทะเบียน y บ้านนอกจากนี้ คุณยังสามารถรวมตรรกะการนำทางไว้ในคอมโพเนนต์หลักเพียงตัวเดียว ซึ่งโดยทั่วไปแล้วจะอยู่ที่คอมโพเนนต์หลักเพียงตัวเดียว App.js.
ใน React Native ที่ใช้ React Navigation สิ่งที่ทำกันโดยทั่วไปคือการสร้างโฟลเดอร์ src/screens โดยมีโฟลเดอร์ย่อยสำหรับแต่ละหน้าจอ (LoginScreen, RegistrationScreen, HomeScreen) และไฟล์ดัชนีที่ส่งออกแต่ละโฟลเดอร์เหล่านั้น จากนั้น ใน แอป jsคุณสร้างตัวนำทางแบบเรียงซ้อนที่แสดงหน้าจอหนึ่งไปยังอีกหน้าจอหนึ่ง ขึ้นอยู่กับว่ามีผู้ใช้ที่เข้าสู่ระบบแล้วหรือไม่
แนวคิดคือการบันทึกสถานะของส่วนประกอบนั้น App un ผู้ใช้งาน (หรือค่าว่าง) และธงของ โหลดในระหว่างที่กำลังตรวจสอบสถานะการยืนยันตัวตน คุณสามารถแสดงหน้าจอว่างเปล่าหรือตัวโหลดได้ เมื่อคุณทราบแล้วว่าผู้ใช้เข้าสู่ระบบแล้ว คุณก็สามารถตัดสินใจได้ว่าจะแสดงหน้าใดบ้าง: หากมีผู้ใช้ ให้แสดงหน้าจอหลัก หากไม่มี ให้แสดงหน้าจอเข้าสู่ระบบและลงทะเบียน
ในด้านการแสดงผล หน้าจอเข้าสู่ระบบและลงทะเบียนเป็นแบบฟอร์มที่เรียบง่าย มีช่องให้กรอกข้อมูล เช่น อีเมล รหัสผ่าน และในกรณีของการลงทะเบียน จะมีช่องให้กรอกชื่อเต็มหรือยืนยันรหัสผ่านเพิ่มเติม เพื่อปรับปรุงประสบการณ์การใช้งานบนมือถือ โดยปกติแล้วทุกอย่างจะถูกห่อหุ้มด้วยKeyboardAwareScrollViewเพื่อไม่ให้แป้นพิมพ์บังช่องกรอกข้อมูล ส่วนหน้าจอหลักนั้น อาจเริ่มต้นด้วยมุมมองที่เรียบง่าย (ข้อความธรรมดา) และค่อยๆ พัฒนาไปเป็นส่วนของแอปที่ใช้สำหรับอ่านและเขียนข้อมูลจาก Firestore
การออกแบบและจัดการฟอร์มด้วย hooks ใน React
ในแอปพลิเคชันเว็บ React ที่ใช้ TypeScript วิธีที่สะอาดตาในการจัดการแบบฟอร์มการตรวจสอบสิทธิ์คือการห่อหุ้มตรรกะไว้ใน ตะขอที่กำหนดเองตัวอย่างเช่น คุณสามารถสร้างได้ useForm.tsx ในโฟลเดอร์ src/hooksโดยจะรับสถานะเริ่มต้นทั่วไป (อ็อบเจ็กต์ที่มีคุณสมบัติของฟอร์ม) และส่งคืนทั้งค่าและฟังก์ชันสำหรับจัดการการเปลี่ยนแปลง
ตะขอนั้นสามารถใช้ได้ ใช้สถานะ ภายในเพื่อจัดเก็บรูปแบบและเปิดเผยฟังก์ชัน handleChange ที่รับเหตุการณ์อินพุตและอ่านแอตทริบิวต์ พร้อมชื่อ ขององค์ประกอบและอัปเดตคุณสมบัติที่เกี่ยวข้องในสถานะ ด้วยวิธีนี้ คุณจะมีชื่อที่ถูกต้องในช่องป้อนข้อมูล (ตัวอย่างเช่น name="email" y name="pass") เป็นกุญแจสำคัญที่ทำให้ทุกอย่างดำเนินไปได้ด้วยดี
ตัวอย่างเช่น ในส่วนประกอบการเข้าสู่ระบบ คุณจะเรียกใช้ useForm({ email: '', pass: '' }) และคุณจะได้รับอีเมล รหัสผ่าน อ็อบเจ็กต์ฟอร์ม และฟังก์ชัน handleChange โดยแต่ละอินพุตจะมีฟังก์ชันของตัวเอง ความคุ้มค่า y เมื่อเปลี่ยน เชื่อมโยงกับค่าเหล่านั้นและฟังก์ชันของฮุก เมื่อส่งแบบฟอร์ม คุณจะได้รับ handleSubmit อะไรนะ e.preventDefault() จากนั้นจึงเรียกใช้ตรรกะการตรวจสอบสิทธิ์ด้วย Firebase
หลักการเดียวกันนี้ใช้ได้กับแบบฟอร์มลงทะเบียนเช่นกัน คุณสามารถแยกส่วนประกอบของแบบฟอร์มที่นำกลับมาใช้ใหม่ได้ เนื่องจากบ่อยครั้งที่ข้อความบนปุ่มและฟังก์ชันที่ทำงานเมื่อส่งแบบฟอร์มเท่านั้นที่จะเปลี่ยนแปลง ในขณะที่โครงสร้างพื้นฐานยังคงเหมือนเดิม
ตั้งค่าการตรวจสอบสิทธิ์ใน Firebase
เพื่อให้ React สามารถตรวจสอบสิทธิ์กับ Firebase ได้ คุณต้องเปิดใช้งานผู้ให้บริการตรวจสอบสิทธิ์ในคอนโซล Firebase ใน ส่วน การตรวจสอบสิทธิ์ให้ไปที่ แท็บวิธีการ ลงชื่อเข้าใช้และเปิดใช้งานการตรวจ สอบสิทธิ์ ด้วยอีเมล/รหัสผ่านและหากต้องการ ให้เปิด ใช้งานการตรวจสอบสิทธิ์ ด้วย Googleด้วย
สำหรับผู้ให้บริการอีเมล/รหัสผ่าน เพียงแค่เปิดใช้งานและบันทึก สำหรับ Google นอกจากการเปิดใช้งานแล้ว คุณจะต้องเลือกที่อยู่อีเมลที่จะใช้เป็นค่าเริ่มต้นด้วย จากนั้น โครงการของคุณก็จะพร้อมรับการเข้าสู่ระบบโดยใช้ทั้งสองวิธี
ในแท็บผู้ใช้ของส่วนเดียวกัน คุณจะเห็นวิธีการลงทะเบียนบัญชีใหม่ที่สร้างผ่านแอปพลิเคชันของคุณ ไม่ว่าจะเป็นด้วยอีเมลและรหัสผ่าน หรือผ่าน Google นี่เป็นจุดที่ดีในการตรวจสอบว่าการเชื่อมต่อข้อมูลระหว่างฟิลด์ทำงานได้อย่างถูกต้องหรือไม่
คุณสมบัติการตรวจสอบสิทธิ์ด้วย Firebase ใน React
ในเว็บแอปพลิเคชันที่ใช้ React และ TypeScript แนะนำให้จัดกลุ่มตรรกะการตรวจสอบสิทธิ์ทั้งหมดไว้ในไฟล์บริการ เช่นsrc/firebase/services.ts ในไฟล์ นี้คุณสามารถกำหนดฟังก์ชันเฉพาะสำหรับแต่ละการกระทำได้ เช่น การเข้าสู่ระบบด้วย Google การเข้าสู่ระบบด้วยข้อมูลประจำตัว การลงทะเบียน การออกจากระบบ และการตรวจสอบสถานะการตรวจสอบสิทธิ์
ในการใช้งานผู้ให้บริการของ Google ขั้นตอนแรกคือการสร้างอินสแตนซ์ของ GoogleAuthProvider (หรือผู้ให้บริการที่เทียบเท่า ขึ้นอยู่กับกรณีของคุณ) จากนั้นกำหนดฟังก์ชันแบบอะซิงโครนัสที่เรียกใช้ signInWithPopup(FirebaseAuth, provider)หากการเรียกใช้งานสำเร็จ คุณจะได้รับอ็อบเจ็กต์ที่มีผู้ใช้ที่ได้รับการตรวจสอบสิทธิ์ ซึ่งคุณสามารถดึงข้อมูลออกมาได้ UID, ชื่อที่แสดง, photoURL และฟิลด์อื่นๆ บ่อยครั้ง คุณเพียงแค่ต้องใช้ UID และส่งคืนค่าเพื่อสร้างเซสชันทั่วโลก
สำหรับการยืนยันตัวตนโดยใช้อีเมลและรหัสผ่าน คุณมีฟังก์ชันหลักสองอย่างดังนี้: สร้างผู้ใช้ด้วยอีเมลและรหัสผ่าน y เข้าสู่ระบบด้วยอีเมลและรหัสผ่านทั้งคู่ต่างรอคอยโอกาสที่จะ... ไฟร์เบสออธอีเมลและรหัสผ่านเป็นสิ่งที่จำเป็น อีเมลใช้สำหรับสร้างผู้ใช้ใหม่ ส่วนรหัสผ่านใช้สำหรับตรวจสอบตัวตนและยืนยันตัวตนของผู้ใช้ ภายใน Firebase จะจัดการตรวจสอบรูปแบบอีเมล ความยาวของรหัสผ่าน และปัจจัยอื่นๆ โดยจะแสดงข้อผิดพลาดที่ชัดเจนซึ่งคุณสามารถดักจับได้ในบล็อก ลอง / จับ และแสดงให้เห็นด้วยวิธีง่ายๆ alert หรือด้วยระบบแจ้งเตือนของคุณเอง
ในการออกจากระบบ เพียงใช้signOut(FirebaseAuth)ซึ่งคุณสามารถใส่ไว้ในฟังก์ชันของบริการของคุณเพื่อทำให้ API ของโค้ดของคุณสะอาดตาและสอดคล้องกันมากขึ้น
สังเกตการเปลี่ยนแปลงของเซสชันด้วย onAuthStateChanged
ปัญหาที่พบบ่อยมากเมื่อเริ่มต้นใช้งานระบบยืนยันตัวตนคือ แม้ว่าการล็อกอินจะทำงานได้ แต่เมื่อคุณโหลดหน้าแอป React ใหม่ หรือปิดและเปิดแอปมือถือใหม่อีกครั้งดูเหมือนว่าเซสชันจะหายไปอย่างไรก็ตาม Firebase มีการบันทึกสถานะการยืนยันตัวตนไว้โดยค่าเริ่มต้นอยู่แล้ว คุณแค่ไม่รู้วิธีอ่านค่าเท่านั้นเอง
วิธีแก้ปัญหาคือการใช้ ฟังก์ชัน onAuthStateChangedจาก Firebase Auth SDK ฟังก์ชันนี้จะรับอินสแตนซ์การตรวจสอบสิทธิ์และฟังก์ชันเรียกกลับที่จะทำงานทุกครั้งที่สถานะเปลี่ยนแปลง เช่น เมื่อผู้ใช้เข้าสู่ระบบ เมื่อผู้ใช้ล็อกเอาต์ หรือเมื่อแอปเริ่มต้นทำงานและ Firebase ดึงข้อมูลประจำตัวที่บันทึกไว้
ในแอปพลิเคชัน React สิ่งที่ทำกันโดยทั่วไปคือการสร้างฟังก์ชัน ตัวอย่างเช่น observeAuthStateซึ่งรับตัวกำหนดสถานะ (เช่น setSession) และการโทรภายใน onAuthStateChanged(FirebaseAuth, user => { ... })ในฟังก์ชันเรียกกลับนั้น ถ้า ผู้ใช้เป็นค่าว่างหรือไม่ถูกกำหนดคุณตั้งค่าเซสชันทั่วโลกเป็นแบบไม่ตรวจสอบสิทธิ์ หากมีผู้ใช้ คุณจะบันทึกชื่อผู้ใช้ของพวกเขาไว้ UID และระบุสถานะเป็น "ยืนยันตัวตนแล้ว"
โดยปกติแล้ว ตัวสังเกตการณ์นี้จะถูกเรียกใช้งานภายในuseEffectที่ระดับสูงสุดของแอป (เช่น ภายใน context) เพื่อให้ทำงานเพียงครั้งเดียวเมื่อแอปเริ่มต้นทำงาน ซึ่งจะช่วยให้มั่นใจได้ว่าแม้ผู้ใช้จะรีโหลดเบราว์เซอร์ หาก Firebase จดจำเซสชันไว้ สถานะส่วนกลางของแอปจะได้รับการอัปเดตโดยอัตโนมัติและส่งตรงไปยังส่วนส่วนตัวของแอปโดยไม่ต้องขอข้อมูลรับรองอีกครั้ง
บริบทการตรวจสอบสิทธิ์ทั่วโลกใน React
เพื่อหลีกเลี่ยงการส่ง props จากคอมponent หนึ่งไปยังอีกคอมponent หนึ่ง กลยุทธ์ที่สะดวกมากใน React คือการสร้างContext API เฉพาะสำหรับการตรวจสอบสิทธิ์ด้วยวิธีนี้ ส่วนใดส่วนหนึ่งของแอปก็สามารถตรวจสอบได้ว่าผู้ใช้ได้รับการตรวจสอบสิทธิ์แล้วหรือไม่ UID ของพวกเขา และฟังก์ชันใดบ้างที่สามารถใช้งานได้ (เข้าสู่ระบบ ออกจากระบบ ฯลฯ) โดยไม่ต้องส่ง props ไปมา
เริ่มต้นด้วยการสร้างโฟลเดอร์ src/context และภายในไฟล์ ตัวอย่างเช่น authContext.tsxตรงนั้นคุณจะกำหนดอินเทอร์เฟซที่อธิบายว่าบริบทของคุณจะเปิดเผยอะไรบ้าง: สถานะ ของเซสชัน (ตัวอย่างเช่น 'กำลังตรวจสอบ', 'ยืนยันตัวตนแล้ว', 'ยังไม่ยืนยันตัวตน') รหัสผู้ใช้ (หรือค่าว่างหากไม่มีผู้ใช้) และฟังก์ชันสำหรับเข้าสู่ระบบหรือออกจากระบบ
ถัดไป ให้กำหนดสถานะเริ่มต้น โดยมี สถานะอยู่ใน 'กำลังตรวจสอบ' และ userId เป็นค่าว่าง และสร้างคอนเท็กซ์ด้วย createContextขั้นตอนต่อไปคือการสร้างคอมponent ผู้ให้บริการการตรวจสอบสิทธิ์ ที่รับเด็ก ใช้ ใช้สถานะ เพื่อจัดการเซสชันและเรียกใช้ฟังก์ชันของคุณ observeAuthState ใน ใช้เอฟเฟกต์ เมื่อติดตั้งเสร็จแล้ว
ภายในผู้ให้บริการนี้ ฟังก์ชันเสริมต่างๆ จะมีประโยชน์ ได้แก่ ฟังก์ชันหนึ่งสำหรับออกจากระบบซึ่งจะเรียกใช้บริการ logoutFirebase ของคุณและคงสถานะไว้เป็นไม่ได้รับการตรวจสอบสิทธิ์ อีกฟังก์ชันหนึ่งสำหรับบังคับสถานะเป็น 'กำลังตรวจสอบ'เมื่อคุณเริ่มกระบวนการตรวจสอบสิทธิ์ และอีกฟังก์ชันหนึ่งสำหรับตรวจสอบความถูกต้องของผลลัพธ์การเข้าสู่ระบบ/ลงทะเบียน (หากคุณได้รับ uid ให้ทำเครื่องหมายว่าได้รับการตรวจสอบสิทธิ์แล้ว หากไม่ได้รับ ให้เรียกใช้ฟังก์ชัน logout เพื่อล้างข้อมูลเซสชันที่เหลือ)
ด้วยเหตุนี้ คุณจึงสามารถดำเนินการสาธารณะได้สามอย่างในบริบทนี้: จัดการการเข้าสู่ระบบด้วย Google, จัดการการเข้าสู่ระบบด้วยข้อมูลประจำตัว y handleRegisterWithCredentialsแต่ละขั้นตอนจะเริ่มต้น "การตรวจสอบ" เรียกใช้ฟังก์ชันบริการที่เกี่ยวข้อง และมอบหมายการตัดสินใจขั้นสุดท้ายให้กับการตรวจสอบความถูกต้องทั่วไปที่คุณสร้างขึ้น ในท้ายที่สุดแล้ว AuthContext.Provider มันจะแสดงทั้งสถานะ (สถานะ, userId) และฟังก์ชันเหล่านี้ และคุณจะต้องห่อแอปของคุณไว้ในนั้น ผู้ให้บริการการตรวจสอบสิทธิ์ ในไฟล์ราก (ตัวอย่างเช่น ใน src/main.tsx).
การใช้บริบทในส่วนประกอบการเข้าสู่ระบบ การลงทะเบียน และหน้าหลัก
เมื่อคุณเตรียมบริบทการตรวจสอบสิทธิ์พร้อมแล้ว การใช้งานในคอมโพเนนต์ของคุณก็ง่ายมาก ในคอมโพเนนต์นั้น เข้าสู่ระบบ.tsxมันสำคัญ useContextเข้าถึงไฟล์ AuthContext และแยกส่วนต่างๆ ออกมา เช่น ฟังก์ชันต่างๆ จัดการการเข้าสู่ระบบด้วยข้อมูลประจำตัว y จัดการการเข้าสู่ระบบด้วย Googleในการส่งแบบฟอร์มล็อกอิน คุณจะเรียกใช้ฟังก์ชันแรก โดยส่งอีเมลและรหัสผ่านจาก hook ของคุณไป useFormขณะที่ปุ่ม “ลงชื่อเข้าใช้ด้วย Google” สุดพิเศษ จะเปิดตัวเวอร์ชันที่สองในงานดังกล่าว onClick.
สำหรับ คอมโพเนนต์ Register.tsxคุณจะทำสิ่งที่คล้ายกันมาก แต่ใช้เพียงhandleRegisterWithCredentials เท่านั้น ฟอร์มจะขอฟิลด์เดียวกัน (อีเมลและรหัสผ่าน) หรืออาจเพิ่มฟิลด์อื่นๆ ก็ได้หากต้องการ และเมื่อส่งฟอร์มแล้ว ตรรกะของบริบทจะรับผิดชอบในการสร้างผู้ใช้และอัปเดตสถานะโดยรวม
ใน คอมโพเนนต์ App.tsx หลัก คุณจะใช้ context เพื่ออ่านสถานะและuserId ด้วย ขณะที่สถานะเป็น 'กำลังตรวจสอบ' คุณสามารถแสดงข้อความโหลดขนาดเล็กหรือหน้าจอเปลี่ยนสถานะได้ เมื่อสถานะเปลี่ยนแปลง หากผู้ใช้เข้าสู่ระบบแล้วและมี userId ที่ถูกต้อง คุณจะแสดง คอมโพเนนต์ HomePageที่แสดงเนื้อหาเฉพาะสำหรับผู้ใช้ที่เข้าสู่ระบบแล้ว (ตัวอย่างเช่น userId และปุ่มออกจากระบบที่เรียกใช้handleLogOut ) หากสถานะระบุว่าผู้ใช้ยังไม่ได้รับการตรวจสอบสิทธิ์ คุณจะแสดง คอมโพเนนต์AuthPageที่มีแบบฟอร์มเข้าสู่ระบบและลงทะเบียน
การลงทะเบียนและเข้าสู่ระบบด้วย Firebase Auth ใน React Native
ใน React Native แม้ว่าโครงสร้างทางเทคนิคจะแตกต่างจากเว็บ แต่รูปแบบเชิงแนวคิดนั้นเหมือนกัน ในหน้าจอลงทะเบียน (RegistrationScreen) คุณจะมีสถานะภายในสำหรับ... ชื่อเต็ม, อีเมล, รหัสผ่าน y ยืนยันรหัสผ่านเมื่อคุณคลิกปุ่มสร้างบัญชี คุณจะตรวจสอบว่ารหัสผ่านตรงกันหรือไม่ และหากทุกอย่างถูกต้อง คุณก็จะโทรติดต่อฝ่ายบริการลูกค้า firebase.auth().createUserWithEmailAndPassword(email, password).
เมื่อ Firebase สร้างบัญชีแล้ว คุณสามารถบันทึกข้อมูลผู้ใช้เพิ่มเติมได้ ร้านไฟในคอลเลกชัน usersโดยการตั้งค่ารหัสเอกสารให้เป็น UID ที่ได้รับจาก Firebase วิธีนี้จะช่วยให้คุณมีที่เก็บข้อมูลส่วนกลาง ชื่อเต็ม รูปโปรไฟล์ หรือข้อมูลส่วนบุคคลอื่นๆ ซึ่งไม่ตรงกับตารางการตรวจสอบสิทธิ์มาตรฐาน หากสตริงทั้งหมดใช้งานได้ คุณจะไปยังหน้าจอหลักได้โดยส่งอ็อบเจ็กต์ผู้ใช้เป็นพารามิเตอร์
ในหน้าจอเข้าสู่ระบบ (LoginScreen) คุณยังต้องนำเข้า Firebase และใช้งานด้วย firebase.auth().signInWithEmailAndPassword(email, password)เมื่อคุณได้รับข้อมูลผู้ใช้แล้ว คุณสามารถอ่านข้อมูลเพิ่มเติมของผู้ใช้จาก Firestore โดยใช้ UID และหากเอกสารนั้นมีอยู่ คุณสามารถนำทางไปยังหน้าแรกโดยมีผู้ใช้นั้นอยู่ในแถบนำทางได้ หากการค้นหาไม่พบข้อมูลใดๆ เนื่องจากผู้ใช้ถูกลบออกจาก Firestore แล้ว คุณจะต้องแจ้งให้ผู้ใช้ทราบและป้องกันการประมวลผลเพิ่มเติม
การคงสถานะเซสชันใน React Native ด้วย onAuthStateChanged
เช่นเดียวกับบนเว็บ ใน React Native การที่ผู้ใช้ต้องล็อกอินทุกครั้งที่เปิดแอปนั้นค่อนข้างน่ารำคาญ Firebase Auth จึงช่วยจดจำข้อมูลการล็อกอินและอนุญาตให้คุณเรียกดูผู้ใช้ปัจจุบันโดยใช้ข้อมูลการล็อกอินเดียวกันได้ onAuthStateChangedในสภาพแวดล้อมเช่นนี้ ตรรกะมักจะถูกวางไว้ในส่วนประกอบ (component) App หรือในบริบทที่คล้ายคลึงกับบริบทของเว็บไซต์
คุณใช้ ใช้เอฟเฟกต์ ซึ่งจะทำงานเพียงครั้งเดียวเมื่อทำการติดตั้งส่วนประกอบ และภายในนั้นคุณจะเรียกใช้ฟังก์ชันดังกล่าว firebase.auth().onAuthStateChangedหากคุณได้รับข้อมูลผู้ใช้ในฟังก์ชันเรียกกลับ คุณจะต้องค้นหาเอกสารที่เกี่ยวข้องกับผู้ใช้นั้นในคอลเลกชัน users จาก Firestore และเมื่อคุณได้รับแล้ว ให้อัปเดตสถานะ ผู้ใช้งาน และยกเลิกการเลือกช่องทำเครื่องหมายกำลังโหลด หากไม่มีผู้ใช้ที่เข้าสู่ระบบ ให้ตั้งค่ากำลังโหลดเป็นเท็จและปล่อยให้ผู้ใช้เป็นค่าว่าง ซึ่งจะทำให้โครงสร้างการนำทางแสดงหน้าจอสาธารณะ
รูปแบบนี้ช่วยให้มั่นใจได้ว่า หากผู้ใช้เปิดแอปไว้สักพักแล้วปล่อยทิ้งไว้ในพื้นหลัง หรือหากปิดแล้วเปิดใหม่ แอปก็จะยังคงปรากฏบนหน้าจอหลักตราบใดที่โทเค็นเซสชันยังคงใช้งานได้ ซึ่งจะช่วยปรับปรุงประสบการณ์การใช้งานของผู้ใช้ได้อย่างมากโดยที่คุณไม่ต้องจัดการโทเค็นด้วยตนเอง
การอ่านและเขียนข้อมูลไปยัง Firestore จาก React Native
เมื่อจัดการเรื่องการตรวจสอบสิทธิ์เรียบร้อยแล้ว ก็ถึงเวลาที่จะนำฐานข้อมูลไปใช้ประโยชน์ได้จริง ตัวอย่างที่พบได้ทั่วไปคือการสร้างหน้าจอหลักที่อนุญาตให้ผู้ใช้เพิ่มข้อความลงในคอลเลกชันและแสดงรายการแบบเรียลไทม์ลองนึกภาพว่าข้อความเหล่านั้นเป็นงาน บันทึก หรือโพสต์ด่วน และคุณต้องการให้ผู้ใช้เห็นเฉพาะข้อความของตนเองเท่านั้น
บนหน้าจอหลัก คุณสามารถกำหนดสถานะสำหรับข้อความปัจจุบันได้ (entityText) และอีกอันสำหรับรายการของเอนทิตี (entitiesคุณยังสามารถสร้างการอ้างอิงไปยังคอลเลกชัน Firestore ได้อีกด้วย ตัวอย่างเช่น entityRef = firebase.firestore().collection('entities')และคุณบันทึกรหัสผู้ใช้ที่ได้รับการยืนยันตัวตน (ตัวอย่างเช่น) userID = props.extraData.id).
ภายใน ใช้เอฟเฟกต์คุณตั้งค่าตัวรับฟังแบบเรียลไทม์ด้วย entityRef.where('authorID', '==', userID).orderBy('createdAt', 'desc').onSnapshot(...)ฟังก์ชันเรียกกลับนี้จะทำงานเมื่อใดก็ตามที่มีการเปลี่ยนแปลงเกิดขึ้นในเอกสารที่ตรงตามเงื่อนไขนั้น คุณจะวนลูปผ่านเอกสารในสแนปช็อต สร้างอาร์เรย์ที่มีเนื้อหาของแต่ละเอนทิตี รวมรหัสเอกสาร และอัปเดตสถานะ หน่วยงาน ด้วยอาร์เรย์ใหม่นั้น จะทำให้ FlatList ที่คุณใช้แสดงเอนทิตีแสดงผลด้วยข้อมูลล่าสุด
ในการเพิ่มองค์ประกอบใหม่ คุณต้องสร้างฟังก์ชัน onAddButtonPress ซึ่งเป็นการยืนยันว่า entityText ไม่ว่างเปล่า สร้างการประทับเวลาของเซิร์ฟเวอร์ด้วย firebase.firestore.FieldValue.serverTimestamp() และโทร entityRef.add({ text: entityText, authorID: userID, createdAt: timestamp })หากการดำเนินการสำเร็จ คุณสามารถล้างช่องข้อความและปิดแป้นพิมพ์ได้ Firestore จะจัดการสร้างสแนปช็อตใหม่ซึ่งจะทำให้รายการใหม่ปรากฏในรายการโดยอัตโนมัติ
เมื่อใช้ตัวกรองและการเรียงลำดับแบบผสมผสาน Firestore อาจต้องการให้คุณสร้าง ดัชนีรวมหากเกิดเหตุการณ์นั้นขึ้น คุณจะเห็นการแจ้งเตือนในบันทึกพร้อมลิงก์โดยตรงไปยังคอนโซล Firebase เพื่อสร้างดัชนีนั้นด้วยการคลิกเพียงครั้งเดียว เมื่อสร้างแล้ว การค้นหาที่ผสมผสานข้อมูลจะไม่ทำงาน where y orderBy พวกมันจะทำงานได้โดยไม่มีปัญหา
เชื่อมต่อ React Web กับ Firebase Realtime Database
นอกเหนือจาก Firestore แล้ว คุณอาจต้องใช้งาน Firebase Realtime Database จากเว็บแอปที่สร้างด้วย React ขั้นตอนโดยทั่วไปคือ: คุณเริ่มต้นใช้งาน Firebase ด้วยการตั้งค่าโปรเจ็กต์ของคุณ จากนั้นนำเข้าไลบรารีของ Firebase ไฟร์เบส/ฐานข้อมูล และคุณสร้างการอ้างอิงไปยังโหนดที่คุณสนใจ เช่น object/nameมันมีประโยชน์มากสำหรับสถานการณ์ต่างๆ ดังนี้ คุณต้องการให้การเปลี่ยนแปลงแสดงผลทันทีบนอินเทอร์เฟซ.
ลองนึกภาพว่าคุณสร้างโหนดในคอนโซล Firebase object พร้อมด้วยทรัพย์สิน name ซึ่งมีค่าเป็น “Carlos” ในแอป React ของคุณ คุณกำหนดสถานะภายใน (local state) ขึ้นมา name โดยกำหนดค่าเริ่มต้น เช่น “เปเป้” แล้วทำการเรนเดอร์ <h1>{this.state.name}</h1> (หากคุณใช้คอมโพเนนต์แบบคลาส) หรือเทียบเท่ากับการใช้ฮุค
ในวิธีการวงจรชีวิต ComponentDidMount (หรือใน ใช้เอฟเฟกต์ (โดยไม่มีการพึ่งพาคอมโพเนนต์เชิงฟังก์ชัน) คุณสร้างการอ้างอิงด้วย firebase.database().ref().child('object').child('name') และคุณเพิ่มตัวรับฟังประเภท on('value', snapshot => { ... })ทุกครั้งที่มีการเรียกใช้งานเหตุการณ์ค่า คุณจะได้รับภาพรวมของค่าปัจจุบันของโหนดนั้น คุณทำ... เซ็ตสเตต กับ snapshot.val() React จะจัดการการแสดงผลข้อความใหม่ คุณเพียงแค่เปลี่ยนชื่อในคอนโซล Firebase แล้วเห็นการเปลี่ยนแปลงนั้นในเบราว์เซอร์ของคุณทันที
เพื่อให้ระบบทำงานได้โดยไม่ต้องมีการตรวจสอบสิทธิ์ คุณต้องปรับ กฎความปลอดภัยในแผงฐานข้อมูลเรียลไทม์เพื่ออนุญาตให้สาธารณะเข้าถึงการอ่านและการเขียนได้ในระหว่างการพัฒนา (ตัวอย่างเช่น โดยการตั้งค่า `read` และ `write` เป็น `true`) อย่างไรก็ตาม สิ่งสำคัญคือต้องจำกัดกฎเหล่านี้ในเวอร์ชันใช้งานจริง โดยทั่วไปแล้วจะต้องกำหนดให้ผู้ใช้ตรวจสอบสิทธิ์หรือใช้เงื่อนไขตามเส้นทางหรือ UID เพื่อป้องกันไม่ให้ฐานข้อมูลของคุณเปิดให้สาธารณะเข้าถึงได้
ข้อพิจารณาขั้นสุดท้าย
ด้วยรูปแบบพื้นฐานนี้ คุณสามารถสร้างกรณีการใช้งานได้มากมายนับไม่ถ้วน เช่น ตัวบ่งชี้การมีอยู่ ตัวนับที่ใช้ร่วมกัน แดชบอร์ดแบบเรียลไทม์ หรือแอปสาธิตขนาดเล็กที่ต้องการการโต้ตอบระหว่างลูกค้าในทันที
อย่างที่คุณเห็น การผสาน React (ทั้งบนเว็บและมือถือ) กับ Firebase ช่วยให้คุณสร้างโปรเจ็กต์ที่มีการตรวจสอบสิทธิ์แบบเรียลไทม์ ฐานข้อมูล และตรรกะได้อย่างรวดเร็ว โดยใช้ประโยชน์จากhooks, contexts และ listeners แบบเรียลไทม์เพื่อซิงโครไนซ์สถานะภาพกับสิ่งที่เกิดขึ้นในแบ็กเอนด์ที่ Google จัดการ การผสมผสานระหว่างการพัฒนาที่รวดเร็วและความสามารถในการปรับขนาดนี้หมายความว่า สำหรับหลายๆ โปรเจ็กต์ การสร้างเลเยอร์เซิร์ฟเวอร์ใหม่ทั้งหมดอาจไม่คุ้มค่า เมื่อคุณสามารถมุ่งเน้นไปที่ประสบการณ์ผู้ใช้และปล่อยให้ Firebase จัดการส่วนที่เหลือได้