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:
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>" };
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 URIhttps://<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.continue_uri
alanınızın yetkili alanlar listesinde olduğundan emin olun./__/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.
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 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 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.
https://<app domain>/__/auth/
adresine gönderilen GET/POST isteklerininhttps://<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; }
Yetkili
redirect_uri
, ACS URL'si veauthDomain
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:
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
Yukarıdaki dosyaları uygulama alan adınızın altında barındırın. Web sunucunuzun
https://<app domain>/__/auth/<filename>
vehttps://<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.
Yetkili
redirect_uri
veauthDomain
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:
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()
çağırdıktan sonra uygulamanızın geri kalanı önceden olduğu gibi çalışır.
Apple kimlik bilgisi alma talimatlarına buradan ulaşabilirsiniz.