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

Bu dokümanda, tarayıcılarda yönlendirmeli oturum açma bilgilerini kullanmaya ilişkin en iyi uygulamalar açıklanmaktadır üçüncü taraf çerezlerini engeller. 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ış

To signInWithRedirect() akışı sorunsuz bir şekilde çalışır. Firebase Authentication JavaScript SDK'sı Uygulamanızın Firebase Hosting alanına bağlanan çapraz kaynak iframe'ler. Ancak bu mekanizma, üçüncü taraf API'lerini engelleyen tarayıcılarla çalışmaz. veya depolama alanına sahip olur.

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ında veya alt alan adında Firebase Hosting ile barındırıyorsanız şunu kullanın: 1. Seçenek.
  • 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.

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ırın. Bu uygulamanızın ve kimlik doğrulama iframe'inin aynı alan adını kullanmasını sağlar. Bu da, harika bir yoludur. (Firebase Hosting kullanmıyorsanız bir farklı bir seçim olabilir.). Özel alanı aynı hesapta ayarladığınızdan emin olun projeden emin olmanız gerekir.

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

  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>"
};
ziyaret edin.

  1. Yeni authDomain cihazını OAuth sağlayıcınızın yetkili listesine ekleyin yönlendirme URI'leridir. Bunu nasıl yapacağınız sağlayıcıya bağlıdır ancak genel olarak "Başlamadan önce" bölümündeki bölüm oluşturabilirsiniz. talimatları (örneğin, Facebook sağlayıcısı) Şu şekilde güncellenen URI: yetkilendirme görünümü https://<the-domain-that-serves-your-app>/__/auth/handler — geride /__/auth/handler önemlidir.

    Benzer şekilde, SAML sağlayıcı kullanıyorsanız yeni authDomain kodunu SAML Assertion Consumer Service (ACS) URL (SAML Onay Tüketici Hizmeti (ACS) URL'si).

  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

Bunun yerine signInWithPopup() kullan signInWithRedirect(). İlgili içeriği oluşturmak için kullanılan uygulamanızın kodunun geri kalanı aynı kalır ancak UserCredential nesnesi almalısınız.

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çmak kullanıcılar için her zaman ideal değildir. Pop-up'lar zaman zaman Bu da mobil cihaz kullanıcıları için daha az akıcı bir akış anlamına gelir. Şunu kullanıyorsanız: pop-up'lar uygulamanızla ilgili bir sorun teşkil ediyorsa, seçenekleri vardır.

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

signInWithRedirect akışı, uygulamanızın alan adından Firebase yapılandırmasındaki authDomain parametresinde belirtilen alan (varsayılan olarak .firebaseapp.com"). authDomain, oturum açma yardımcısını barındırır Kimlik Sağlayıcı'ya yönlendiren kod ve başarılı olduğunda, bağlamam gerekiyor.

Kimlik doğrulama akışı uygulama alan adınıza döndüğünde, uygulamanızın tarayıcı depolama alanı oturum açma yardımcı alanına erişildiğinden emin olun. Bu seçenek ve Sonraki adımlar (kodu kendi kendinize barındırmak için), kaynaklar arası depolama erişimini ortadan kaldırır. Aksi takdirde tarayıcılar tarafından engellenir.

  1. Uygulama sunucunuzda ters proxy kullanarak GET/POST isteklerinin https://<app domain>/__/auth/, https://<project>.firebaseapp.com/__/auth/ adresine yönlendiriliyor. 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. Şuradaki adımları uygulayın: 1. Seçenek yetkili redirect_uri, ACS URL'si ve authDomain bilgilerinizi güncelleyin. Yeniden dağıttıktan sonra kaynaklar arası depolama erişimi artık gerçekleşmeyecektir.

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 diğer bir yolu da kendi kendine barındırmaktır. Firebase için oturum açma yardımcı kodunu kullanın. Ancak bu yaklaşım Apple'da işe yaramaz. oturum açmanızı veya SAML'yi etkinleştirmenizi öneririz. Bu seçeneği yalnızca 3. seçeneğin uygulanabilir olması gerekir.

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

  1. Barındırılacak dosyaları <project>.firebaseapp.com konumundan şu şekilde indirin: şu komutları yürütebilirsiniz:

    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> adlı kullanıcıya yanıt verebilir ve https://<app domain>/__/firebase/init.json.

    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. Şuradaki adımları uygulayın: 1. Seçenek yetkili redirect_uri ve authDomain cihazınızı güncellemek için. Yeniden dağıttıktan sonra kaynaklar arası depolama erişimi artık gerçekleşmeyecektir.

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

Firebase Authentication SDK, signInWithPopup() ve signInWithRedirect(): karmaşık mantığı sarmalamak ve açıklamanın ihtiyaç duyulmasını önlemek için başka bir SDK. Bağımsız şekilde imzalayarak her iki yöntemi de tamamen kullanmaktan kullanabilir, ardından signInWithCredential() - sağlayıcının kimlik bilgilerini Firebase Authentication kimlik bilgileriyle değiştirin. Örneğin, Google ile Oturum Açma SDK'sı, örnek kod ve yeni bir Google kimlik bilgisi örneklendirdikten sonra aşağıdaki kodu çalıştırarak yapabilirsiniz:

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() adlı kişiyi çağırdıktan sonra uygulamanızın geri kalanı olduğu gibidir.

Apple kimlik bilgisi edinme talimatları burada bulabilirsiniz.