自訂驗證依附元件

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 足以因應需求 (因為您未使用網頁或 Service Worker 指令碼)，您可以透過以下方式初始化 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 環境。但有時，特定應用程式的需求會與這些假設相衝突。舉例來說，如果是網頁和 Service Worker 指令碼，預設的 getAuth() 實作會提取從 window 物件讀取的程式碼，這會導致錯誤。在這些情況下，您必須調整依附元件。下列程式碼適合在 Service Worker 環境中初始化 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 持續性 (可在 worker 環境中使用) 初始化，並省略 popupRedirectResolver 依附元件，假設 DOM 環境可用。

您可能還有其他原因需要手動定義特定平台上的依附元件。在 Auth 初始化作業中定義 popupRedirectResolver 欄位後，程式庫有時會在初始化作業中執行額外工作。在行動瀏覽器上，程式庫會自動預先開啟 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);

如果我們在 initializeAuth() 的依附元件中提供 browserPopupRedirectResolver，就不需要呼叫 signInWithRedirect() 中的第三個參數。但如果將該依附元件直接移至 signInWithRedirect() 的呼叫，即可消除初始化期間的初始效能影響。移動依附元件會帶來一些取捨，但重要的是，您可以手動初始化程式庫，決定這些取捨。

自訂初始化的使用時機

總而言之，自訂初始化作業可讓您大幅控管應用程式的 Auth SDK 用量。標準 getAuth() 函式適合入門，且適用於大多數用途。對大多數應用程式而言，您只要使用 getAuth() 即可。但您可能基於許多原因，想要 (或需要) 改用手動依附元件管理：

  • 對於套件大小和載入時間極為重要的應用程式，自訂 Auth 初始化作業可望減少數 KB 的資料。此外，將依附元件移至使用時間而非初始化時間，也能縮短初始載入時間。
  • 如要在非 DOM 環境 (例如網頁和服務工作人員) 中執行的程式碼，請務必使用 initializeAuth()，以免發生錯誤。