وابستگی های Auth خود را سفارشی کنید

طراحی ماژولار 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 persistence (که در worker contextها موجود است) مقداردهی اولیه شود و وابستگی popupRedirectResolver را که فرض می‌کند یک DOM context در دسترس است، حذف می‌کند.

دلایل دیگری نیز وجود دارد که ممکن است شما وابستگی‌ها را به صورت دستی در پلتفرم‌های خاص تعریف کنید. با تعریف فیلد 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() ممکن است تمام چیزی باشد که نیاز دارید. اما دلایل زیادی وجود دارد که چرا ممکن است بخواهید (یا نیاز داشته باشید) به مدیریت وابستگی دستی روی آورید:

• برای برنامه‌هایی که اندازه بسته و زمان بارگذاری بسیار مهم هستند، مقداردهی اولیه Auth می‌تواند به طور بالقوه کیلوبایت‌های زیادی از داده‌ها را کاهش دهد. همچنین می‌تواند با انتقال وابستگی‌ها به زمان استفاده به جای زمان مقداردهی اولیه، زمان بارگذاری اولیه را کاهش دهد.
• برای کدی که در زمینه‌های غیر DOM اجرا می‌شود (مانند web و service workerها)، برای جلوگیری از خطا باید initializeAuth() استفاده شود.