Facebook Login'i uygulamanıza entegre ederek, kullanıcılarınızın Facebook hesaplarını kullanarak Firebase ile kimlik doğrulaması yapmasına izin verebilirsiniz. Facebook Login'i, oturum açma akışını gerçekleştirmek için Firebase SDK'yı kullanarak veya Facebook Login akışını manuel olarak gerçekleştirip ortaya çıkan erişim belirtecini Firebase'e geçirerek entegre edebilirsiniz.
Sen başlamadan önce
- Firebase'i JavaScript projenize ekleyin .
- Geliştiriciler için Facebook sitesinde, uygulamanız için Uygulama Kimliği ve Uygulama Sırrı alın.
- Facebook Girişini Etkinleştir:
- Firebase konsolunda Kimlik Doğrulama bölümünü açın.
- Oturum açma yöntemi sekmesinde, Facebook oturum açma yöntemini etkinleştirin ve Facebook'tan aldığınız Uygulama Kimliği ve Uygulama Sırrını belirtin.
- Ardından, OAuth yönlendirme URI'nizin (örn.
my-app-12345.firebaseapp.com/__/auth/handler
), Facebook uygulamanızın Ürün'deki Facebook for Developers sitesindeki ayarlar sayfasında OAuth yönlendirme URI'lerinizden biri olarak listelendiğinden emin olun. Ayarlar > Facebook Giriş yapılandırması.
Oturum açma akışını Firebase SDK ile yönetin
Bir web uygulaması oluşturuyorsanız, Facebook hesaplarını kullanarak kullanıcılarınızın kimliğini Firebase ile doğrulamanın en kolay yolu, oturum açma akışını Firebase JavaScript SDK ile gerçekleştirmektir. (Node.js'de veya tarayıcı olmayan başka bir ortamda bir kullanıcının kimliğini doğrulamak istiyorsanız, oturum açma akışını manuel olarak yapmanız gerekir.)
Firebase JavaScript SDK ile oturum açma akışını yönetmek için şu adımları izleyin:
- Facebook sağlayıcı nesnesinin bir örneğini oluşturun:
Web modular API
import { FacebookAuthProvider } from "firebase/auth"; const provider = new FacebookAuthProvider();
Web namespaced API
var provider = new firebase.auth.FacebookAuthProvider();
- İsteğe bağlı : Kimlik doğrulama sağlayıcısından talep etmek istediğiniz ek OAuth 2.0 kapsamlarını belirtin. Kapsam eklemek için
addScope
öğesini çağırın. Örneğin:Kimlik doğrulama sağlayıcı belgelerine bakın.Web modular API
provider.addScope('user_birthday');
Web namespaced API
provider.addScope('user_birthday');
- İsteğe bağlı : Sağlayıcının OAuth akışını, ilgili özel OAuth parametrelerini açıkça geçirmeden kullanıcının tercih ettiği dile yerelleştirmek için, OAuth akışını başlatmadan önce Auth örneğindeki dil kodunu güncelleyin. Örneğin:
Web modular API
import { getAuth } from "firebase/auth"; const auth = getAuth(); auth.languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // auth.useDeviceLanguage();
Web namespaced API
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- İsteğe bağlı : OAuth isteğiyle birlikte göndermek istediğiniz ek özel OAuth sağlayıcı parametrelerini belirtin. Özel bir parametre eklemek için, OAuth sağlayıcı belgelerinde belirtilen anahtarı ve karşılık gelen değeri içeren bir nesneyle başlatılmış sağlayıcıda
setCustomParameters
çağırın. Örneğin:Ayrılmış gerekli OAuth parametrelerine izin verilmez ve dikkate alınmaz. Daha fazla ayrıntı için kimlik doğrulama sağlayıcısı referansına bakın.Web modular API
provider.setCustomParameters({ 'display': 'popup' });
Web namespaced API
provider.setCustomParameters({ 'display': 'popup' });
- Facebook sağlayıcı nesnesini kullanarak Firebase ile kimlik doğrulaması yapın. Bir açılır pencere açarak veya oturum açma sayfasına yönlendirerek kullanıcılarınızdan Facebook hesaplarıyla oturum açmalarını isteyebilirsiniz. Mobil cihazlarda yönlendirme yöntemi tercih edilmektedir.
- Bir açılır pencereyle oturum açmak için
signInWithPopup
çağırın:Ayrıca, Facebook API'lerini kullanarak ek veriler almak için kullanılabilen Facebook sağlayıcısının OAuth jetonunu alabileceğinize dikkat edin.Web modular API
import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .then((result) => { // The signed-in user info. const user = result.user; // This gives you a Facebook Access Token. You can use it to access the Facebook API. const credential = FacebookAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; // IdP data available using getAdditionalUserInfo(result) // ... }) .catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // The AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... });
Web namespaced API
firebase .auth() .signInWithPopup(provider) .then((result) => { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // The signed-in user info. var user = result.user; // IdP data available in result.additionalUserInfo.profile. // ... // This gives you a Facebook Access Token. You can use it to access the Facebook API. var accessToken = credential.accessToken; // ... }) .catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
Burası aynı zamanda hataları yakalayıp işleyebileceğiniz yerdir. Hata kodlarının bir listesi için Kimlik Doğrulama Referans Dokümanlarına bakın.
- Oturum açma sayfasına yönlendirerek oturum açmak için
signInWithRedirect
arayın : "signInWithRedirect" kullanırken en iyi uygulamaları izleyin.Ardından, sayfanız yüklendiğindeWeb modular API
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web namespaced API
firebase.auth().signInWithRedirect(provider);
getRedirectResult
arayarak Facebook sağlayıcısının OAuth jetonunu da alabilirsiniz:Burası aynı zamanda hataları yakalayıp işleyebileceğiniz yerdir. Hata kodlarının bir listesi için Kimlik Doğrulama Referans Dokümanlarına bakın.Web modular API
import { getAuth, getRedirectResult, FacebookAuthProvider } from "firebase/auth"; const auth = getAuth(); getRedirectResult(auth) .then((result) => { // This gives you a Facebook Access Token. You can use it to access the Facebook API. const credential = FacebookAuthProvider.credentialFromResult(result); const token = credential.accessToken; const user = result.user; // IdP data available using getAdditionalUserInfo(result) // ... }).catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... });
Web namespaced API
firebase.auth() .getRedirectResult() .then((result) => { if (result.credential) { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // This gives you a Facebook Access Token. You can use it to access the Facebook API. var token = credential.accessToken; // ... } // The signed-in user info. var user = result.user; // IdP data available in result.additionalUserInfo.profile. // ... }).catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
- Bir açılır pencereyle oturum açmak için
Bir Chrome uzantısında Firebase ile kimlik doğrulaması yapın
Bir Chrome uzantı uygulaması oluşturuyorsanız, Chrome uzantı kimliğinizi eklemelisiniz:
- Projenizi Firebase konsolunda açın.
- Kimlik Doğrulama bölümünde Oturum açma yöntemi sayfasını açın.
- Yetkili Etki Alanları listesine aşağıdaki gibi bir URI ekleyin:
chrome-extension://CHROME_EXTENSION_ID
Chrome uzantıları HTTP yönlendirmelerini kullanamadığından yalnızca açılır pencere işlemleri ( signInWithPopup
, linkWithPopup
ve reauthenticateWithPopup
) Chrome uzantıları tarafından kullanılabilir. Kimlik doğrulama açılır penceresi, tarayıcı eylemi açılır penceresini iptal edeceğinden, bu yöntemleri bir tarayıcı eylemi açılır penceresinden ziyade bir arka plan sayfası komut dosyasından çağırmalısınız. Açılır pencere yöntemleri yalnızca Manifest V2 kullanan uzantılarda kullanılabilir. Daha yeni Manifest V3, yalnızca açılır pencere işlemlerini hiç gerçekleştiremeyen hizmet çalışanları biçimindeki arka plan komut dosyalarına izin verir.
Chrome uzantınızın bildirim dosyasında, https://apis.google.com
URL'sini content_security_policy
izin verilenler listesine eklediğinizden emin olun.
Sonraki adımlar
Bir kullanıcı ilk kez oturum açtıktan sonra, yeni bir kullanıcı hesabı oluşturulur ve kullanıcının oturum açtığı kimlik bilgilerine (yani, kullanıcı adı ve parolası, telefon numarası veya kimlik doğrulama sağlayıcı bilgileri) bağlanır. Bu yeni hesap, Firebase projenizin bir parçası olarak saklanır ve kullanıcının nasıl oturum açtığına bakılmaksızın projenizdeki her uygulamada bir kullanıcıyı tanımlamak için kullanılabilir.
Uygulamalarınızda, kullanıcınızın kimlik doğrulama durumunu öğrenmenin önerilen yolu,
Auth
Doğrulama nesnesine bir gözlemci ayarlamaktır. Ardından, kullanıcının temel profil bilgileriniUser
nesnesinden alabilirsiniz. Bkz . Kullanıcıları Yönetin .Firebase Gerçek Zamanlı Veritabanı ve Bulut Depolama Güvenlik Kurallarınızda , oturum açmış kullanıcının benzersiz kullanıcı kimliğini
auth
değişkeninden alabilir ve bunu, bir kullanıcının hangi verilere erişebileceğini kontrol etmek için kullanabilirsiniz.
Bir kullanıcının oturumunu kapatmak için signOut
öğesini arayın:
Web modular API
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web namespaced API
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });