Üçüncü taraf depolama alanı erişimini engelleyen tarayıcılarda signInWithRedirect'i kullanmaya yönelik en iyi uygulamalar

Bu belgede, üçüncü taraf çerezlerini engelleyen tarayıcılarda yönlendirmeli oturum açma özelliğini kullanmayla ilgili en iyi uygulamalar açıklanmaktadır. signInWithRedirect() öğesinin üretim ortamlarında tüm tarayıcılarda beklendiği gibi çalışması için burada listelenen seçeneklerden birini uygulamanız gerekir.

Genel Bakış

signInWithRedirect() akışını sizin ve kullanıcılarınız için sorunsuz hale getirmek amacıyla Firebase Authentication JavaScript SDK, uygulamanızın Firebase Hosting alanına bağlanan bir kaynaklar arası iframe kullanır. Ancak bu mekanizma, üçüncü taraf depolama alanına erişimi engelleyen tarayıcılarda çalışmaz.

Kullanıcılarınızdan tarayıcıda depolama bölümleme özelliklerini devre dışı bırakmalarını istemek nadiren bir seçenek olduğundan, bunun yerine kullanım alanınızın özelliklerine bağlı olarak aşağıdaki kurulum seçeneklerinden birini uygulamanız gerekir.

  • Uygulamanızı firebaseapp.com alan adının bir alt alanında Firebase Hosting ile barındırıyorsanız bu sorundan etkilenmezsiniz ve herhangi bir işlem yapmanız gerekmez.
  • Uygulamanızı Firebase Hosting ile özel bir alan veya web.app alanının bir alt alanında barındırıyorsanız 1. seçeneği kullanın.
  • Uygulamanızı Firebase dışında bir hizmetle barındırıyorsanız 2. Seçenek, 3. Seçenek, 4. Seçenek veya 5. Seçenek'i kullanın.

1. seçenek: Firebase yapılandırmanızı, özel alanınızı authDomain olarak kullanacak şekilde güncelleyin

Uygulamanızı özel bir alan kullanarak Firebase Hosting ile barındırıyorsanız Firebase SDK'sını authDomain olarak özel alanınızı kullanacak şekilde yapılandırabilirsiniz. Bu, uygulamanızın ve kimlik doğrulama iFrame'inin aynı alanı kullanmasını sağlayarak oturum açma sorununu önler. (Firebase Hosting'i kullanmıyorsanız farklı bir seçenek kullanmanız gerekir.) Özel alan adını, kimlik doğrulama için kullandığınız projede ayarladığınızdan emin olun.

Firebase yapılandırmanızı, özel alanınızı kimlik doğrulama alanı olarak kullanacak şekilde güncellemek için aşağıdakileri yapın:

  1. Firebase JS SDK'sını, özel alanınızı authDomain olarak kullanacak şekilde yapılandırın:

    const firebaseConfig = {
  apiKey: "<api-key>",
  authDomain: "<the-domain-that-serves-your-app>",
  databaseURL: "<database-url>",
  projectId: "<project-id>",
  appId: "<app-id>"
};

  1. Yeni authDomain değerini, OAuth sağlayıcınızın yetkilendirilmiş yönlendirme URI'leri listesine ekleyin. Bu işlemi nasıl yapacağınız sağlayıcıya bağlıdır ancak genel olarak kesin talimatlar için herhangi bir sağlayıcının "Başlamadan önce" bölümünü (örneğin, Facebook sağlayıcısı) takip edebilirsiniz. Yetkilendirme için güncellenen URI, https://<the-domain-that-serves-your-app>/__/auth/handler şeklinde görünüyor. Sondaki /__/auth/handler önemlidir.

    Benzer şekilde, SAML sağlayıcı kullanıyorsanız yeni authDomain değerini SAML Assertion Consumer Service (ACS) URL'sine ekleyin.

  2. continue_uri alanınızın yetkili alanlar listesinde olduğundan emin olun.

  3. /__/firebase/init.json adresinde barındırılan en güncel Firebase yapılandırma dosyasını getirmek için gerekirse Firebase Hosting ile yeniden dağıtın.

2. seçenek: signInWithPopup() işlevine geçin

signInWithRedirect() yerine signInWithPopup() kullanın. Uygulamanızın kodunun geri kalanı aynı kalır ancak UserCredential nesnesi farklı şekilde alınır.

Web 

  // Before
  // ==============
  signInWithRedirect(auth, new GoogleAuthProvider());
  // After the page redirects back
  const userCred = await getRedirectResult(auth);

  // After
  // ==============
  const userCred = await signInWithPopup(auth, new GoogleAuthProvider());

Web 

  // Before
  // ==============
  firebase.auth().signInWithRedirect(new firebase.auth.GoogleAuthProvider());
  // After the page redirects back
  var userCred = await firebase.auth().getRedirectResult();

  // After
  // ==============
  var userCred = await firebase.auth().signInWithPopup(
      new firebase.auth.GoogleAuthProvider());
```

Pop-up ile oturum açma, kullanıcılar için her zaman ideal değildir. Pop-up'lar bazen cihaz veya platform tarafından engellenir ve mobil kullanıcılar için akış daha az sorunsuz olur. Uygulamanızda pop-up kullanmak sorun oluşturuyorsa diğer seçeneklerden birini kullanmanız gerekir.

3. seçenek: Kimlik doğrulama isteklerini firebaseapp.com'a yönlendirin

signInWithRedirect akışı, uygulama alanınızdan firebase yapılandırmasındaki authDomain parametresinde belirtilen alana yönlendirme yapılarak başlatılır (".firebaseapp.com" varsayılandır). authDomain, kimlik sağlayıcıya yönlendiren oturum açma yardımcısı kodunu barındırır. Bu kod, başarılı olursa uygulama alanına geri yönlendirir.

Kimlik doğrulama akışı uygulama alanınıza döndüğünde, oturum açma yardımcısı alanının tarayıcı depolama alanına erişilir. Bu seçenek ve kodu kendi sunucunuzda barındırmanıza olanak tanıyan bir sonraki seçenek, aksi takdirde tarayıcılar tarafından engellenen kaynaklar arası depolama erişimini ortadan kaldırır.

  1. Uygulama sunucunuzda, https://<app domain>/__/auth/ adresine yapılan GET/POST isteklerinin https://<project>.firebaseapp.com/__/auth/ adresine yönlendirilmesi için bir ters proxy ayarlayın. Bu yönlendirmenin tarayıcı için şeffaf olduğundan emin olun. Bu, 302 yönlendirmesi aracılığıyla yapılamaz.

    Özel alanınıza hizmet vermek için nginx kullanıyorsanız ters proxy yapılandırması şu şekilde görünür:

    # reverse proxy for signin-helpers for popup/redirect sign in.
location /__/auth {
  proxy_pass https://<project>.firebaseapp.com;
}

  2. Yetkilendirilmiş redirect_uri, ACS URL'si ve authDomain'nizi güncellemek için 1. seçenekteki adımları uygulayın. Uygulamanızı yeniden dağıttıktan sonra kaynaklar arası depolama alanı erişimi artık gerçekleşmemelidir.

4. seçenek: Oturum açma yardımcısı kodunu alanınızda kendiniz barındırın

Kaynaklar arası depolama erişimini ortadan kaldırmanın bir diğer yolu da Firebase oturum açma yardımcı kodunu kendiniz barındırmaktır. Ancak bu yaklaşım Apple ile giriş veya SAML için geçerli değildir. Bu seçeneği yalnızca 3. seçenekteki ters proxy kurulumu mümkün değilse kullanın.

Yardımcı kodun barındırılması için aşağıdaki adımlar uygulanır:

  1. Aşağıdaki komutları çalıştırarak dosyaları <project>.firebaseapp.com konumundan ana makineye indirin:

    mkdir signin_helpers/ && cd signin_helpers
wget https://<project>.firebaseapp.com/__/auth/handler
wget https://<project>.firebaseapp.com/__/auth/handler.js
wget https://<project>.firebaseapp.com/__/auth/experiments.js
wget https://<project>.firebaseapp.com/__/auth/iframe
wget https://<project>.firebaseapp.com/__/auth/iframe.js
wget https://<project>.firebaseapp.com/__/auth/links
wget https://<project>.firebaseapp.com/__/auth/links.js
wget https://<project>.firebaseapp.com/__/firebase/init.json

  2. Yukarıdaki dosyaları uygulama alanınızda barındırın. Web sunucunuzun https://<app domain>/__/auth/<filename> ve https://<app domain>/__/firebase/init.json isteklerine yanıt verebildiğinden emin olun.

    Dosyaları indirip barındıran bir örnek sunucu uygulaması aşağıda verilmiştir. En yeni hata düzeltmelerinin ve özelliklerin kullanıldığından emin olmak için dosyaları düzenli olarak indirip senkronize etmenizi öneririz.

  3. Yetkili redirect_uri ve authDomain bilgilerinizi güncellemek için 1. seçenekteki adımları uygulayın. Uygulamanızı yeniden dağıttıktan sonra kaynaklar arası depolama alanı erişimi artık gerçekleşmemelidir.

5. seçenek: Sağlayıcı oturum açma işlemlerini bağımsız olarak yönetme

Firebase Authentication SDK, karmaşık mantığı sarmalamak ve başka bir SDK'yı dahil etme ihtiyacını önlemek için kolaylık sağlayan yöntemler olarak signInWithPopup() ve signInWithRedirect() yöntemlerini sunar. Sağlayıcınızda bağımsız olarak oturum açıp sağlayıcının kimlik bilgilerini Firebase Authentication kimlik bilgisiyle değiştirmek için signInWithCredential() komutunu kullanarak bu yöntemlerden birini tamamen kullanmaktan kaçınabilirsiniz. Örneğin, bir Google Hesabı kimlik bilgisi almak için Google ile Oturum Açma SDK'sını, ardından aşağıdaki kodu çalıştırarak yeni bir Google kimlik bilgisi oluşturmak için örnek kodu kullanabilirsiniz:

Web 

  // `googleUser` from the onsuccess Google Sign In callback.
  //  googUser = gapi.auth2.getAuthInstance().currentUser.get();
  const credential = GoogleAuthProvider.credential(googleUser.getAuthResponse().id_token);
  const result = await signInWithCredential(auth, credential);

Web 

  // `googleUser` from the onsuccess Google Sign In callback.
  const credential = firebase.auth.GoogleAuthProvider.credential(
      googleUser.getAuthResponse().id_token);
  const result = await firebase.auth().signInWithCredential(credential);

signInWithCredential() işlevini çağırdıktan sonra uygulamanızın geri kalan işlevleri eskisi gibi çalışır.

Apple kimliği edinmeyle ilgili talimatları burada bulabilirsiniz.