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

Bu dokümanda, üçüncü taraf çerezlerini engelleyen tarayıcılarda yönlendirmeli oturum açma kullanımıyla ilgili en iyi uygulamalar açıklanmaktadır. signInWithRedirect()'in üretim ortamlarında ve tüm tarayıcılarda amaçlandığı şekilde çalışması için burada listelenen seçeneklerden birini uygulamanız gerekir.

Genel bakış

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

Kullanıcılarınızdan tarayıcıda depolama alanı bölümlendirme ö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 uygulamanıza aşağıdaki kurulum seçeneklerinden birini uygulamanız gerekir.

• Uygulamanızı firebaseapp.com alanının alt alan adında Firebase Hosting ile barındırıyorsanız bu sorundan etkilenmezsiniz ve herhangi bir işlem yapmanız gerekmez.
• Uygulamanızı web.app alanının özel bir alan adında veya alt alan adında Firebase Hosting ile 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çeneği, 3. seçeneği, 4. seçeneği veya 5. seçeneği kullanın.

1. Seçenek: Özel alanınızı authDomain olarak kullanmak için Firebase yapılandırmanızı güncelleyin

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

Firebase yapılandırmanızı özel alanınızı yetkilendirme alanınız olarak kullanacak şekilde güncellemek için şunları yapın:

1. Firebase JS SDK'yı, ö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 özelliğini OAuth sağlayıcınızın yetkili yönlendirme URI'leri listesine ekleyin. Bunu nasıl yapacağınız sağlayıcıya göre değişir, ancak genel olarak doğru talimatlar için herhangi bir sağlayıcının (örneğin, Facebook sağlayıcısı) "Başlamadan önce" bölümünü takip edebilirsiniz. Yetkilendirme için güncellenen URI https://<the-domain-that-serves-your-app>/__/auth/handler şeklindedir. Sondaki /__/auth/handler önemlidir.

   Benzer şekilde, bir SAML sağlayıcı kullanıyorsanız yeni authDomain bilgisini SAML Onaylama Tüketici Hizmeti (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ı almak için gerekirse Firebase Hosting ile yeniden dağıtım yapın.

2. Seçenek: signInWithPopup() öğesine geçme

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

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

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

  // 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 oturum açma, kullanıcılar için her zaman ideal değildir. Pop-up'lar zaman zaman cihaz veya platform tarafından engellenir ve mobil kullanıcılar için akış daha az akıcı olur. Pop-up kullanmak uygulamanız açısından sorun teşkil ediyorsa diğer seçeneklerden birini uygulamanız gerekir.

3. seçenek: firebaseapp.com'a proxy kimlik doğrulama istekleri

signInWithRedirect akışı, uygulama alanınızdan Firebase yapılandırmasındaki authDomain parametresinde belirtilen alana ("varsayılan olarak .firebaseapp.com") yönlendirme yaparak başlar. authDomain, Kimlik Sağlayıcı'ya yönlendirme yapan ve başarılı olduktan sonra tekrar uygulama alanına yönlendiren oturum açma yardımcı kodunu barındırır.

Kimlik doğrulama akışı uygulama alanınıza döndüğünde, oturum açma yardımcı alanının tarayıcı depolama alanına erişilir. Bu ve sonraki seçenek (kodu kendiniz barındırmak için), kaynaklar arası depolama erişimini ortadan kaldırır. Aksi takdirde tarayıcılar tarafından engellenir.

1. https://<app domain>/__/auth/ adresine gönderilen GET/POST isteklerinin https://<project>.firebaseapp.com/__/auth/ adresine yönlendirilmesi için uygulama sunucunuzda ters proxy oluşturun. Bu yönlendirmenin tarayıcı için şeffaf olduğundan emin olun. Bu işlem, 302 Yönlendirmesi ile yapılamaz.

   Özel alan adınızı sunmak için nginx kullanıyorsanız ters proxy yapılandırması aşağıdaki gibi görünür:

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

2. Yetkili redirect_uri, ACS URL'si ve authDomain bilgilerinizi güncellemek için 1. Seçenek'teki adımları uygulayın. Uygulamanızı yeniden dağıttığınızda kaynaklar arası depolama erişiminin artık gerçekleşmemesi gerekir.

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

Kaynaklar arası depolama erişimini ortadan kaldırmanın bir başka yolu da Firebase oturum açma yardımcı kodunu kendi bünyesinde barındırmaktır. Ancak bu yaklaşım Apple ile oturum açma veya SAML'de işe yaramaz. Bu seçeneği yalnızca 3. seçenekteki ters proxy kurulumu uygun değilse kullanın.

Yardımcı kod şu adımlarla barındırılır:

1. Aşağıdaki komutları çalıştırarak <project>.firebaseapp.com konumundan barındırılacak dosyaları 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/__/firebase/init.json
   

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

   Dosyaları indiren ve barındıran bir örnek sunucu uygulamasını burada görebilirsiniz. En son hata düzeltmelerinin ve özelliklerin alındığından emin olmak için dosyaları düzenli olarak indirmenizi ve senkronize etmenizi öneririz.

3. Yetkili redirect_uri ve authDomain cihazınızı güncellemek için 1. Seçenek'teki adımları uygulayın. Uygulamanızı yeniden dağıttığınızda kaynaklar arası depolama erişiminin artık gerçekleşmemesi gerekir.

5. seçenek: Sağlayıcı oturum açma işlemini bağımsız olarak yapma

Firebase Authentication SDK, karmaşık mantığı sarmalamak ve başka bir SDK kullanılmasını önlemek için signInWithPopup() ve signInWithRedirect() uygulamalarını kolaylaştırır. Sağlayıcınızın kimlik bilgilerini Firebase Authentication kimlik bilgileriyle değiştirmek için signInWithCredential() kullanarak her iki yöntemi de tamamen kullanmaktan kaçınabilirsiniz. Örneğin, Google Hesabı kimlik bilgisi almak için Google ile Oturum Açma SDK'sını ve örnek kodu kullanabilir, ardından aşağıdaki kodu çalıştırarak yeni bir Google kimlik bilgisi gösterebilirsiniz:

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

  // `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() çağırdıktan sonra uygulamanızın geri kalanı önceden olduğu gibi çalışır.

Apple kimlik bilgisi alma talimatlarına buradan ulaşabilirsiniz.