ปรับแต่งการพึ่งพาการรับรองความถูกต้องของคุณ

การออกแบบโมดูลาร์ของ Firebase JS SDK ช่วยให้คุณควบคุมวิธีสร้างแอปได้ดียิ่งขึ้น ความยืดหยุ่นนี้ช่วยให้คุณปรับแต่งการพึ่งพาของคุณสำหรับแพลตฟอร์มของคุณและเพิ่มประสิทธิภาพขนาดบันเดิลของคุณโดยการแยกคุณสมบัติที่คุณไม่ต้องการออก

มีสองวิธีในการเริ่มต้นไลบรารี Auth: ฟังก์ชัน getAuth() และฟังก์ชัน initializeAuth() อย่างแรก getAuth() ให้ทุกสิ่งที่แอปของคุณต้องการเพื่อใช้ประโยชน์จากฟีเจอร์ทั้งหมดที่ไลบรารี Auth นำเสนอ ข้อเสียคือดึงโค้ดจำนวนมากที่แอปของคุณอาจไม่ได้ใช้ นอกจากนี้ยังอาจดึงโค้ดที่ไม่รองรับบนแพลตฟอร์มที่คุณกำหนดเป้าหมายซึ่งนำไปสู่ข้อผิดพลาด เพื่อหลีกเลี่ยงปัญหาเหล่านี้ คุณสามารถใช้ initializeAuth() ซึ่งใช้แผนที่ของการขึ้นต่อกัน ฟังก์ชัน getAuth() เพียงเรียก initializeAuth() โดยมีการระบุการอ้างอิงทั้งหมด เพื่อแสดงให้เห็น นี่คือสิ่งที่เทียบเท่ากับ getAuth() ในสภาพแวดล้อมของเบราว์เซอร์:

import {initializeAuth, browserLocalPersistence, browserPopupRedirectResolver, browserSessionPersistence, indexedDBLocalPersistence} from "firebase/auth";
import {initializeApp} from "firebase/app";

const app = initializeApp({/** Your app config */});
const auth = initializeAuth(app, {
  persistence: [indexedDBLocalPersistence, browserLocalPersistence, browserSessionPersistence],
  popupRedirectResolver: browserPopupRedirectResolver,
});

ปรับแต่งการพึ่งพาของคุณ

ไม่ใช่ทุกแอปที่ใช้ฟังก์ชันตระกูล signInWithPopup หรือ signInWithRedirect แอพจำนวนมากไม่ต้องการความยืดหยุ่นที่จัด indexedDB มอบให้ หรือไม่ต้องการความสามารถในการรองรับทั้ง indexedDB และ localStorage หากไม่มีให้ใช้งาน ในกรณีเหล่านี้ getAuth() เริ่มต้นจะมีโค้ดที่ไม่ได้ใช้จำนวนมากซึ่งจะเพิ่มขนาดบันเดิลโดยไม่มีเหตุผล แต่แอปเหล่านี้สามารถปรับการพึ่งพาได้ ตัวอย่างเช่น หากแอปของคุณใช้เฉพาะการตรวจสอบสิทธิ์ลิงก์อีเมลและ localStorage ก็เพียงพอแล้ว (เนื่องจากคุณไม่ได้ใช้สคริปต์ของเว็บหรือโปรแกรมทำงานของบริการ) คุณสามารถตัดการขยายโค้ดจำนวนมากออกได้โดยการเริ่มต้น Auth ดังนี้

import {initializeAuth, browserLocalPersistence} from "firebase/auth";
import {initializeApp} from "firebase/app";

const app = initializeApp({/** Your app config */});
const auth = initializeAuth(app, {
  persistence: browserLocalPersistence,
  // No popupRedirectResolver defined
});

ด้วยโค้ดนี้ คุณได้ลบการพึ่งพาขนาดใหญ่สามรายการที่แอปของคุณไม่ต้องการ ซึ่งช่วยลดปริมาณแบนด์วิดท์ที่ผู้ใช้ของคุณใช้ทุกครั้งที่เข้าชมไซต์ของคุณลงอย่างมาก

ข้อควรพิจารณาเฉพาะแพลตฟอร์ม

ในหลายกรณี คุณต้องกำหนดการขึ้นต่อกันของ Auth ด้วยตนเองเพื่อหลีกเลี่ยงข้อผิดพลาดในการเริ่มต้น ฟังก์ชัน getAuth() ถือว่าแพลตฟอร์มเฉพาะ สำหรับจุดเริ่มต้นเริ่มต้น นั่นคือสภาพแวดล้อมของเบราว์เซอร์ และสำหรับจุดเริ่มต้น Cordova นั่นคือสภาพแวดล้อม Cordova แต่บางครั้งความต้องการของแอปพลิเคชันเฉพาะของคุณอาจขัดแย้งกับสมมติฐานเหล่านี้ ตัวอย่างเช่น สำหรับสคริปต์ตัวทำงานเว็บและบริการ การใช้งาน getAuth() เริ่มต้นจะดึงโค้ดที่อ่านจากออบเจ็กต์ window ซึ่งจะทำให้เกิดข้อผิดพลาด ในกรณีดังกล่าว จำเป็นต้องปรับแต่งการขึ้นต่อกันของคุณ รหัสต่อไปนี้เหมาะสมในการเริ่มต้นไลบรารี Auth ในบริบทของพนักงานบริการ:

import {initializeAuth, indexedDBLocalPersistence} from "firebase/auth";
import {initializeApp} from "firebase/app";

const app = initializeApp({/** Your app config */});
const auth = initializeAuth(app, {
  persistence: indexedDBLocalPersistence,
  // No popupRedirectResolver defined
});

โค้ดนี้สั่งให้ Auth เริ่มต้นด้วยความคงอยู่ของ indexedDB (ซึ่งมีอยู่ในบริบทของผู้ปฏิบัติงาน) และละเว้นการพึ่งพา popupRedirectResolver ซึ่งถือว่าบริบท DOM พร้อมใช้งาน

มีเหตุผลอื่นๆ ที่คุณอาจกำหนดการขึ้นต่อกันบนบางแพลตฟอร์มด้วยตนเอง ด้วยการกำหนดฟิลด์ popupRedirectResolver ในการเตรียมใช้งาน Auth ในบางกรณี ไลบรารีจะดำเนินการเพิ่มเติมในการเตรียมใช้งาน บนเบราว์เซอร์มือถือ ไลบรารีจะเปิด iframe ไปยังโดเมน Auth ของคุณโดยอัตโนมัติ การทำเช่นนี้จะทำให้ผู้ใช้ส่วนใหญ่ได้รับประสบการณ์ที่ราบรื่น แต่อาจส่งผลต่อประสิทธิภาพการทำงานด้วยการโหลดโค้ดเพิ่มเติมทันทีที่แอปเริ่มทำงาน พฤติกรรมนี้สามารถหลีกเลี่ยงได้โดยใช้ initializeAuth() และส่งต่อการพึ่งพาของ browserPopupRedirectResolver ไปยังฟังก์ชันที่ต้องการด้วยตนเอง:

import {initializeAuth, browserLocalPersistence, browserPopupRedirectResolver, indexedDBLocalPersistence, signInWithRedirect, GoogleAuthProvider} from "firebase/auth";
import {initializeApp} from "firebase/app";

const app = initializeApp({/** Your app config */});
const auth = initializeAuth(app, {
  persistence: [indexedDBLocalPersistence, browserLocalPersistence],
});

// Later
signInWithRedirect(auth, new GoogleAuthProvider(), browserPopupRedirectResolver);

หากเราระบุ browserPopupRedirectResolver ในการขึ้นต่อกันเพื่อ initializeAuth() พารามิเตอร์ตัวที่สามในการเรียก signInWithRedirect() ก็ไม่จำเป็น แต่ด้วยการย้ายการพึ่งพานั้นไปยังการเรียก signInWithRedirect() โดยตรง ประสิทธิภาพเริ่มต้นที่กระทบระหว่างการเริ่มต้นจะถูกลบออก มีข้อดีข้อเสียที่มาพร้อมกับการย้ายการขึ้นต่อกัน แต่ส่วนสำคัญคือ คุณสามารถตัดสินใจเกี่ยวกับข้อดีข้อเสียเหล่านั้นได้ด้วยการเริ่มต้นไลบรารีด้วยตนเอง

เมื่อใดควรใช้การกำหนดค่าเริ่มต้นแบบกำหนดเอง

โดยสรุป การกำหนดค่าเริ่มต้นแบบกำหนดเองช่วยให้คุณควบคุมการใช้งาน Auth SDK ของแอปได้ดียิ่งขึ้น ฟังก์ชัน getAuth() มาตรฐานเหมาะสำหรับการเริ่มต้นใช้งานและรองรับกรณีการใช้งานส่วนใหญ่ สำหรับแอปส่วนใหญ่ getAuth() อาจเป็นสิ่งที่คุณต้องการ แต่มีสาเหตุหลายประการที่คุณอาจต้องการ (หรือจำเป็นต้อง) เปลี่ยนไปใช้การจัดการการขึ้นต่อกันด้วยตนเอง:

• สำหรับแอปที่ขนาดบันเดิลและเวลาในการโหลดมีความสำคัญอย่างยิ่ง การเริ่มต้นการตรวจสอบสิทธิ์แบบกำหนดเองอาจลดข้อมูลลงได้หลายกิโลไบต์ นอกจากนี้ยังสามารถลดเวลาในการโหลด เริ่มต้นได้ ด้วยการย้ายการขึ้นต่อกันไปยังเวลาที่ใช้งานแทนเวลาในการเริ่มต้น
• สำหรับโค้ดที่ทำงานในบริบทที่ไม่ใช่ DOM (เช่น เว็บและพนักงานบริการ) ต้องใช้ initializeAuth() เพื่อหลีกเลี่ยงข้อผิดพลาด