ปรับแต่งทรัพยากร Dependency ของการตรวจสอบสิทธิ์

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

การเริ่มต้นไลบรารีการตรวจสอบสิทธิ์มี 2 วิธี ได้แก่ ฟังก์ชัน getAuth() และ ฟังก์ชัน initializeAuth() รหัสแรก getAuth() มอบทุกอย่าง ที่แอปของคุณต้องการเพื่อใช้ประโยชน์จากฟีเจอร์ทั้งหมดในไลบรารีการตรวจสอบสิทธิ์ นำเสนอ ข้อเสียคือระบบจะดึงโค้ดจำนวนมากที่อาจ ที่แอปของคุณไม่ได้ใช้ นอกจากนี้ยังอาจดึงโค้ดที่ไม่รองรับเพียง แพลตฟอร์มที่คุณกำหนดเป้าหมายไว้ และเกิดข้อผิดพลาดขึ้นได้ เพื่อหลีกเลี่ยงปัญหาเหล่านี้ คุณสามารถ ใช้ initializeAuth() ซึ่งจะใช้แผนที่ทรัพยากร Dependency getAuth() จะเรียก initializeAuth() พร้อมทรัพยากร Dependency ทั้งหมดที่ระบุ เพื่อให้เห็นภาพ นี่คือฟังก์ชันที่เทียบเท่ากับ 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,
});

การปรับแต่งทรัพยากร Dependency

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

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
});

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

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

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

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
});

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

มีเหตุผลอื่นๆ ที่คุณอาจระบุทรัพยากร Dependency ด้วยตนเอง ใหม่ การกำหนดช่อง popupRedirectResolver ในการเริ่มต้นการตรวจสอบสิทธิ์ ในบางกรณี ไลบรารีจะดำเนินการเพิ่มเติมในการเริ่มต้น เปิด ในเบราว์เซอร์บนอุปกรณ์เคลื่อนที่ ไลบรารีจะเปิด iframe เพื่อการตรวจสอบสิทธิ์โดยอัตโนมัติ ล่วงหน้า ทั้งนี้ก็เพื่อให้ประสบการณ์การใช้งานที่ราบรื่น แต่อาจส่งผลต่อประสิทธิภาพโดยการโหลดโค้ดเพิ่มเติมทันทีเมื่อ ที่แอปเริ่มทำงาน คุณหลีกเลี่ยงลักษณะการทำงานนี้ได้โดยใช้ initializeAuth() และ ส่งผ่านทรัพยากร Dependency 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 ในทรัพยากร Dependency ไว้ initializeAuth() ซึ่งเป็นพารามิเตอร์ที่ 3 ในการเรียก signInWithRedirect() ไม่จำเป็น แต่ด้วยการย้ายทรัพยากร Dependency นั้นไปยังการเรียกไปยัง signInWithRedirect() โดยตรง, ประสิทธิภาพเริ่มต้นในช่วง การเริ่มต้นถูกนำออก แต่มีทั้งข้อดีและข้อเสีย ที่ต้องพึ่งพากันอยู่ แต่สิ่งที่สำคัญก็คือคุณสามารถทำการตัดสินใจเกี่ยวกับ แต่ข้อดีก็คือการเริ่มต้นไลบรารีด้วยตนเอง

กรณีที่ควรใช้การเริ่มต้นที่กําหนดเอง

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

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