Üçüncü taraf depolama erişimini engelleyen tarayıcılarda SignInWithRedirect kullanımına ilişkin en iyi uygulamalar

Bu belgede, üçüncü taraf çerezlerini engelleyen tarayıcılarda yeniden yönlendirmeli oturum açma kullanımına ilişkin en iyi uygulamalar açıklanmaktadır. signInWithRedirect() tüm tarayıcılarda üretim ortamlarında amaçlandığı gibi çalışması için burada listelenen seçeneklerden birini izlemelisiniz.

Genel Bakış

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

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

  • Uygulamanızı Firebase Hosting ile firebaseapp.com alt alan adında barındırıyorsanız bu sorundan etkilenmezsiniz ve herhangi bir işlem yapmanıza gerek yoktur.
  • Uygulamanızı Firebase Hosting ile özel bir alanda veya web.app alt alanında barındırıyorsanız Seçenek 1'i kullanın.
  • Uygulamanızı Firebase dışında bir hizmetle barındırıyorsanız Seçenek 2 , Seçenek 3 , Seçenek 4 veya Seçenek 5'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ı etki alanını kullanmasını sağlar ve bu da oturum açma sorununu önler. (Firebase Hosting kullanmıyorsanız farklı bir seçenek kullanmanız gerekir.)

Firebase yapılandırmanızı, özel alanınızı kimlik doğrulama alanınız 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>"
};

  2. Yeni authDomain OAuth sağlayıcınızın yetkili yönlendirme URI'leri listesine ekleyin. Bunu nasıl yapacağınız sağlayıcıya bağlı olacaktır ancak genel olarak tam 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 gibi görünüyor - sondaki /__/auth/handler önemlidir.

    Benzer şekilde, bir SAML sağlayıcısı kullanıyorsanız yeni authDomain SAML Onaylama Tüketici Hizmeti (ACS) URL'sine ekleyin.

  3. continue_uri adınızın yetkili alanlar listesinde olduğundan emin olun.

  4. /__/firebase/init.json konumunda barındırılan en güncel Firebase yapılandırma dosyasını getirmek için gerekirse Firebase Hosting ile yeniden konuşlandırın.

2. Seçenek: SignInWithPopup()'a geçiş yapın

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

Web modüler API'si

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

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

Web ad alanlı API

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

Açılır pencerede oturum açma kullanıcılar için her zaman ideal değildir; açılır pencereler ara sıra cihaz veya platform tarafından engellenir ve mobil kullanıcılar için akış daha az düzgün olur. Pop-up'ların kullanılması uygulamanız için bir sorunsa diğer seçeneklerden birini uygulamanız gerekir.

Seçenek 3: Firebaseapp.com'a yönelik proxy kimlik doğrulama istekleri

signInWithRedirect akışı, uygulama etki alanınızdan firebase yapılandırmasındaki authDomain parametresinde belirtilen etki alanına yönlendirmeyle başlar (" .firebaseapp.com" varsayılan olarak). authDomain Kimlik Sağlayıcıya yönlendiren oturum açma yardımcı kodunu barındırır ve bu kod, başarı durumunda tekrar uygulama alanına yönlendirir.

Kimlik doğrulama akışı uygulama etki alanınıza geri döndüğünde, oturum açma yardımcı etki alanının tarayıcı depolama alanına erişilir. Bu seçenek ve bir sonraki seçenek (kodu kendi kendine barındırmak için), aksi takdirde tarayıcılar tarafından engellenen çapraz kaynak depolama erişimini ortadan kaldırır.

  1. https://<app domain>/__/auth/ yönelik GET/POST isteklerinin https://<project>.firebaseapp.com/__/auth/ adresine iletilmesi için uygulama sunucunuzda bir ters proxy ayarlayın. Bu iletmenin tarayıcı için şeffaf olduğundan emin olun; bu 302 Yönlendirmesi yoluyla yapılamaz.

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

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

  2. Yetkili redirect_uri , ACS URL'sini ve authDomain güncellemek için Seçenek 1'deki adımları izleyin. Uygulamanızı yeniden dağıttığınızda, çapraz kaynaklar depolama erişimi artık gerçekleşmemelidir.

4. Seçenek: Oturum açma yardımcı kodunu alan adınızda kendiniz 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 kendine barındırmaktır. Ancak bu yaklaşım Apple ile oturum açma veya SAML için işe yaramaz. Bu seçeneği yalnızca seçenek 3'teki ters proxy kurulumunun uygun olmadığı durumlarda kullanın.

Yardımcı kodu barındırmak aşağıdaki adımları içerir:

  1. Aşağıdaki komutları yürüterek, barındırılacak dosyaları <project>.firebaseapp.com konumundan 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ınız altında barındırın. Web sunucunuzun https://<app domain>/__/auth/<filename> ve https://<app domain>/__/firebase/init.json yanıt verebildiğinden emin olun.

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

  3. Yetkili redirect_uri ve authDomain güncellemek için Seçenek 1'deki adımları izleyin. Uygulamanızı yeniden dağıttığınızda, çapraz kaynaklar depolama erişimi artık gerçekleşmemelidir.

5. Seçenek: Sağlayıcı oturum açma işlemini bağımsız olarak gerçekleştirin

Firebase Authentication SDK, karmaşık mantığı tamamlamak ve başka bir SDK dahil etme ihtiyacını ortadan kaldırmak için kullanışlı yöntemler olarak signInWithPopup() ve signInWithRedirect() sağlar. Sağlayıcınızda bağımsız olarak oturum açıp ardından sağlayıcının kimlik bilgilerini bir Firebase Authentication kimlik bilgisi ile değiştirmek içinsignInWithCredential signInWithCredential() işlevini kullanarak her iki yöntemi de tamamen kullanmaktan kaçınabilirsiniz. Örneğin, bir Google hesabı kimlik bilgisi edinmek için Google Oturum Açma SDK'sını örnek kod olarak kullanabilir, ardından aşağıdaki kodu çalıştırarak yeni bir Google kimlik bilgisi örneğini oluşturabilirsiniz:

Web modüler API'si

  // `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 ad alanlı API

  // `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ı daha önce olduğu gibi çalışır.

Apple kimlik bilgisi edinme talimatlarını burada bulabilirsiniz.