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

Bu belge, üçüncü taraf tanımlama bilgilerini engelleyen tarayıcılarda yeniden yönlendirmeyle oturum açmayı kullanmanın en iyi uygulamalarını açıklar. signInWithRedirect() tüm tarayıcılarda üretim ortamlarında istendiği gibi çalışması için burada listelenen seçeneklerden birini izlemeniz gerekir.

genel bakış

signInWithRedirect() akışını siz ve kullanıcılarınız için sorunsuz hale getirmek için Firebase Authentication JavaScript SDK, uygulamanızın Firebase Barındırma etki alanına bağlanan bir çapraz kaynak iframe kullanır. Ancak bu mekanizma, üçüncü taraf depolama erişimini 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, kullanım durumunuzun özelliklerine bağlı olarak uygulamanıza aşağıdaki kurulum seçeneklerinden birini uygulamanız gerekir.

  • Uygulamanızı Firebase Hosting ile firebaseapp.com alt etki alanında barındırırsanız, bu sorundan etkilenmezsiniz ve herhangi bir işlem yapmanız gerekmez.
  • Uygulamanızı Firebase Barındırma ile özel bir alanda veya web.app 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 Seçenek 2 , Seçenek 3 , Seçenek 4 veya Seçenek 5'i kullanın.

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

Uygulamanızı Firebase Barındırma ile özel bir etki alanı kullanarak barındırıyorsanız, Firebase SDK'sını özel etki alanınızı authDomain olarak kullanacak şekilde yapılandırabilirsiniz. Bu, uygulamanızın ve auth iframe'in aynı etki alanını kullanmasını sağlayarak oturum açma sorununu önler. (Firebase Barındırma kullanmıyorsanız, farklı bir seçenek kullanmanız gerekir.)

Özel etki alanınızı kimlik doğrulama etki alanınız olarak kullanmak üzere Firebase yapılandırmanızı güncellemek için aşağıdakileri yapın:

  1. Özel etki alanınızı authDomain olarak kullanmak için Firebase JS SDK'yı 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 kesin talimatlar için herhangi bir sağlayıcıdaki "Başlamadan önce" bölümünü takip edebilirsiniz (örneğin, Facebook sağlayıcısı ). Yetkilendirmek için güncellenen URI https://<the-domain-that-serves-your-app>/__/auth/handler gibi görünür — /__/auth/handler sondaki önemlidir.

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

Seçenek 2: signInWithPopup()'a 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 modüler API

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

Pop-up 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. Açılır pencereleri kullanmak uygulamanız için bir sorunsa, diğer seçeneklerden birini izlemeniz gerekir.

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

signInWithRedirect akışı, uygulama etki alanınızdan firebase yapılandırmasındaki authDomain parametresinde belirtilen etki alanına yönlendirme yaparak başlar (" .firebaseapp.com" varsayılan olarak). authDomain Kimlik Sağlayıcıya yeniden yönlendiren oturum açma yardımcı kodunu barındırır ve bu kod başarılı olduğunda uygulama etki alanına geri 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 kaynaklar arası depolama erişimini ortadan kaldırır.

  1. https://<app domain>/__/auth/ adresine yapılan GET/POST isteklerinin https://<project>.firebaseapp.com/__/auth/ yönlendirilmesi için uygulama sunucunuzda bir ters proxy ayarlayın. Bu yönlendirmenin tarayıcı için şeffaf olduğundan emin olun; bu bir 302 Yönlendirmesi aracılığıyla 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'si ve authDomain güncellemek için Seçenek 1'deki adımları izleyin. Uygulamanızı yeniden dağıttıktan sonra, kaynaklar arası depolama erişimi artık gerçekleşmeyecektir.

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

Kaynaklar arası depolama erişimini ortadan kaldırmanın başka bir yolu, Firebase oturum açma yardımcı kodunu kendi kendine barındırmaktır. Ancak bu yaklaşım, Apple oturum açma veya SAML için çalışmaz. Bu seçeneği yalnızca seçenek 3'teki ters proxy kurulumu mümkün değilse kullanın.

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

  1. Aşağıdaki komutları yürüterek <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

  2. Yukarıdaki dosyaları uygulama alanınız altında barındırın. Web sunucunuzun https://<app domain>/__/auth/<filename> 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 olarak indirmenizi ve senkronize etmenizi öneririz.

  3. Yetkili redirect_uri ve authDomain adresinizi güncellemek için Seçenek 1'deki adımları izleyin. Uygulamanızı 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şlemlerini bağımsız olarak gerçekleştirin

Firebase Kimlik Doğrulama SDK'sı, karmaşık mantığı sarmak ve başka bir SDK dahil etme ihtiyacını ortadan kaldırmak için kolaylık yöntemleri 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 Kimlik Doğrulaması kimlik bilgisi ile değiştirmek için signInWithCredential() işlevini kullanarak her iki yöntemi de kullanmaktan tamamen kaçınabilirsiniz. Örneğin, bir Google hesabı kimlik bilgisi almak için Google Sign In SDK örnek kodunu kullanabilir, ardından aşağıdaki kodu çalıştırarak yeni bir Google kimlik bilgisi örneği oluşturabilirsiniz:

Web modüler API

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

Bir Apple kimlik bilgisi edinme talimatları buradadır .