Kimlik Doğrulama Bağımlılıklarınızı özelleştirin

Firebase JS SDK'nın modüler tasarımı, uygulamanızın nasıl oluşturulduğu konusunda size çok daha fazla kontrol sağlar. Bu esneklik, bağımlılıklarınızı platformunuza göre uyarlamanıza ve ihtiyaç duymadığınız özellikleri ortadan kaldırarak paket boyutunuzu optimize etmenize olanak tanır.

Auth kitaplığını başlatmanın iki yolu vardır: getAuth() işlevi ve initializeAuth() işlevi. Bunlardan ilki olan getAuth() , Auth kütüphanesinin sunduğu tüm özelliklerden yararlanmak için uygulamanızın ihtiyaç duyduğu her şeyi sağlar. Dezavantajı ise potansiyel olarak uygulamanız tarafından kullanılmayan birçok kodu almasıdır. Ayrıca hedeflediğiniz platformda desteklenmeyen kodları da alabilir ve bu da hatalara yol açabilir. Bu sorunları önlemek için, bağımlılıkların haritasını initializeAuth() işlevini kullanabilirsiniz. getAuth() işlevi, belirtilen tüm bağımlılıklarla birlikte yalnızca initializeAuth() öğesini çağırır. Örneklemek gerekirse, tarayıcı ortamlarındaki getAuth() işlevinin eşdeğeri buradadır:

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

Bağımlılıklarınızı uyarlama

Tüm uygulamalar, signInWithPopup veya signInWithRedirect işlev ailesini kullanmaz. Pek çok uygulama, indexedDB sağladığı esnekliğe ihtiyaç duymaz veya mevcut olmaması durumunda hem indexedDB hem de localStorage destekleme yeteneğine ihtiyaç duymaz. Bu durumlarda, varsayılan getAuth() paket boyutlarını sebepsiz yere artıran çok sayıda kullanılmayan kod içerir. Bunun yerine, bu uygulamalar bağımlılıklarını uyarlayabilir. Örneğin, uygulamanız yalnızca e-posta bağlantısı kimlik doğrulamasını kullanıyorsa ve localStorage yeterliyse (çünkü web veya hizmet çalışanı komut dosyaları kullanmıyorsunuz), Kimlik Doğrulamayı şu şekilde başlatarak birçok kod şişkinliğini ortadan kaldırabilirsiniz:

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

Bu kodla, uygulamanızın ihtiyaç duymadığı üç büyük bağımlılığı ortadan kaldırarak kullanıcılarınızın sitenizi ziyaret ettiklerinde kullandıkları bant genişliği miktarını önemli ölçüde azaltmış olursunuz.

Platforma özgü hususlar

Çoğu durumda, başlatma sırasındaki hataları önlemek için Kimlik Doğrulama bağımlılıklarını manuel olarak tanımlamanız gerekir. getAuth() işlevi belirli bir platformu varsayar. Varsayılan giriş noktası için bu bir tarayıcı ortamıdır ve Cordova giriş noktası için bu bir Cordova ortamıdır. Ancak bazen özel uygulamanızın ihtiyaçları bu varsayımlarla çatışır. Örneğin, web ve hizmet çalışanı komut dosyaları için varsayılan getAuth() uygulaması, window nesnesinden okuyan kodu çeker ve bu da hatalara neden olur. Bu durumlarda bağımlılıklarınızı uyarlamanız gerekir. Aşağıdaki kod, Auth kitaplığını bir hizmet çalışanı bağlamında başlatmak için uygundur:

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

Bu kod, Auth'a indexedDB kalıcılığıyla (çalışan bağlamlarında mevcut olan) başlatma talimatı verir ve bir DOM bağlamının mevcut olduğunu varsayan popupRedirectResolver bağımlılığını atlar.

Belirli platformlarda bağımlılıkları manuel olarak tanımlamanızın başka nedenleri de vardır. Kimlik doğrulama başlatmada popupRedirectResolver alanını tanımlayarak bazı durumlarda kitaplık, başlatma konusunda ek çalışma gerçekleştirecektir. Mobil tarayıcılarda kitaplık, Auth alan adınıza önleyici olarak otomatik olarak bir iframe açacaktır. Bu, çoğu kullanıcı için deneyimi kusursuz hale getirmek amacıyla yapılır ancak uygulama başlatıldığında ek kod yükleyerek performansı etkileyebilir. Bu davranış, initializeAuth() kullanılarak ve browserPopupRedirectResolver bağımlılığını buna ihtiyaç duyan işlevlere manuel olarak aktarılarak önlenebilir:

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

Eğer initializeAuth() bağımlılığında browserPopupRedirectResolver sağlamış olsaydık, signInWithRedirect() çağrısındaki üçüncü parametreye ihtiyaç duyulmazdı. Ancak bu bağımlılığın doğrudan signInWithRedirect() çağrısına taşınmasıyla, başlatma sırasındaki ilk performans kaybı ortadan kaldırılır. Bağımlılığın taşınmasıyla birlikte gelen ödünleşimler vardır, ancak önemli olan kısım, kütüphaneyi manuel olarak başlatarak bu ödünleşimler hakkında kararlar alabilmenizdir.

Özel başlatma ne zaman kullanılır?

Özetlemek gerekirse, özel başlatma, uygulamanızın Auth SDK kullanımı üzerinde size çok daha fazla kontrol sağlar. Standart getAuth() işlevi başlangıç ​​için iyidir ve çoğu kullanım durumuna hizmet eder. Çoğu uygulama için ihtiyacınız olan tek şey getAuth() olabilir. Ancak manuel bağımlılık yönetimine geçmek istemenizin (veya buna ihtiyaç duymanızın) birçok nedeni vardır:

  • Paket boyutunun ve yükleme sürelerinin son derece önemli olduğu uygulamalar için özel Kimlik Doğrulama başlatma, potansiyel olarak kilobaytlarca veriyi azaltabilir. Ayrıca bağımlılıkları başlatma zamanı yerine kullanım zamanına taşıyarak başlangıç ​​yükleme sürelerini de azaltabilir.
  • DOM dışı bağlamlarda (web ve hizmet çalışanları gibi) çalışan kodlarda hataları önlemek için initializeAuth() kullanılmalıdır.