JavaScript ile Facebook Giriş Sayfasını Kullanarak Kimlik Doğrula

Kullanıcılarınızın Facebook hesaplarını kullanarak Firebase ile kimlik doğrulamasına izin verebilirsiniz en iyi uygulamaları paylaşacağız. Facebook girişini entegre edebilirsiniz oturum açma akışını yürütmek için Firebase SDK'sını kullanarak veya ve sonuçta elde edilen erişim jetonunu kullanıcıya ileterek Facebook Giriş akışını manuel olarak Firebase'e gidin.

Başlamadan önce

  1. Firebase'i JavaScript projenize ekleyin.
  2. Geliştiriciler için Facebook'ta sitesinde, uygulamanızın Uygulama Kimliği ve Uygulama Sırrı bilgilerini alın.
  3. Facebook Girişini Etkinleştir:
    1. Firebase konsolunda Auth bölümünü açın.
    2. Oturum açma yöntemi sekmesinde Facebook oturum açma özelliğini etkinleştirin yöntemini kullanın ve Facebook'tan aldığınız Uygulama Kimliği ile Uygulama Sırrı'nı belirtin.
    3. Ardından, OAuth yönlendirme URI'nizden (ör. my-app-12345.firebaseapp.com/__/auth/handler) emin olun Facebook uygulamanızın ayarlar sayfasında OAuth yönlendirme URI'larınızdan biri olarak listelenir. Geliştiriciler için Facebook Ürün Ayarları > Facebook Girişi yapılandırması.

Oturum açma akışını Firebase SDK'sı ile yönetme

Bir web uygulaması oluşturuyorsanız kullanıcılarınızın kimliğini doğrulamanın en kolay yolu oturum açma akışını yönetmek adına, Firebase için harika bir platform. Firebase JavaScript SDK'sı. (Node.js'de bir kullanıcının kimliğini doğrulamak istiyorsanız veya tarayıcı harici başka bir ortam kullanıyorsanız oturum açma akışını manuel olarak gerçekleştirmeniz gerekir.)

Oturum açma akışını Firebase JavaScript SDK ile yönetmek için şu adımları uygulayın: için şu adımları izleyin:

  1. Facebook sağlayıcı nesnesinin bir örneğini oluşturun:
    WebWeb
    import { FacebookAuthProvider } from "firebase/auth";
    
    const provider = new FacebookAuthProvider();
    var provider = new firebase.auth.FacebookAuthProvider();
  2. İsteğe bağlı: Oluşturduğunuz ek OAuth 2.0 kapsamlarını belirtin kimlik doğrulama sağlayıcısından istekte bulunmak istiyorum. Kapsam eklemek için addScope Örneğin:
    WebWeb
    provider.addScope('user_birthday');
    provider.addScope('user_birthday');
    Kimlik doğrulama sağlayıcıya bakın dokümanlarına göz atın.
  3. İsteğe bağlı: Sağlayıcının OAuth akışını kullanıcının tercih ettiği şekilde yerelleştirmek için dil ayarını, ilgili özel OAuth parametrelerini açıkça iletmeden kullanılan bir dil kullanıyorsanız kodunu ekleyin. Örneğin:
    WebWeb
    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // auth.useDeviceLanguage();
    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  4. İsteğe bağlı: Ek özel OAuth sağlayıcı parametreleri belirtin onay kutusunu işaretleyin. Özel parametre eklemek için şu çağrıyı yapın: Başlatılan sağlayıcıda, anahtarı içeren bir nesneyle birlikte setCustomParameters OAuth sağlayıcı dokümanlarında ve ilgili değerde belirtildiği şekilde olmalıdır. Örneğin:
    WebWeb
    provider.setCustomParameters({
      'display': 'popup'
    });
    provider.setCustomParameters({
      'display': 'popup'
    });
    Ayrılmış zorunlu OAuth parametrelerine izin verilmez ve bu parametreler yoksayılır. Bkz. kimlik doğrulama sağlayıcı referansı bölümünde daha fazla bilgi edinebilirsiniz.
  5. Facebook sağlayıcı nesnesini kullanarak Firebase ile kimlik doğrulayın. Şunları yapabilirsiniz: bir oturum açma sayfasına yönlendirilirsiniz. Yönlendirme yöntemi mobil cihazlarda tercih edilir.
    • Pop-up pencereyle oturum açmak için signInWithPopup numaralı telefonu arayın:
      WebWeb
      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);
      
          // ...
        });
      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;
      
          // ...
        });
      Ayrıca, Facebook API'lerini kullanarak ek veriler getirmek için kullanılabilecek Facebook sağlayıcısının OAuth jetonunu alabileceğinizi de unutmayın.

      Ayrıca, hataları yakalayıp işleyebilirsiniz. Hata kodlarının listesi için Kimlik Doğrulama Referans Belgeleri'ne göz atın.

    • Oturum açma sayfasına yönlendirerek oturum açmak için signInWithRedirect çağırın: "signInWithRedirect" özelliğini kullanırken en iyi uygulamaları izleyin.
      WebWeb
      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);
      firebase.auth().signInWithRedirect(provider);
      Ardından, şu numarayı arayarak Facebook sağlayıcının OAuth jetonunu da alabilirsiniz: Sayfanız yüklendiğinde getRedirectResult:
      WebWeb
      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);
          // ...
        });
      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;
          // ...
        });
      Ayrıca, hataları yakalayıp işleyebilirsiniz. Hata kodlarının listesi için Kimlik Doğrulama Referans Belgeleri'ne göz atın.
ziyaret edin.

Firebase konsolunda E-posta adresi başına bir hesap ayarını etkinleştirdiyseniz Kullanıcı daha önce kayıtlı olan e-postayla bir sağlayıcıda (ör. Facebook) oturum açmaya çalıştığında başka bir Firebase kullanıcısının sağlayıcısı (Google gibi) için mevcutsa auth/account-exists-with-different-credential, AuthCredential nesne (Facebook erişim jetonu). Oturum açma işlemini kullanıcının ilk olarak mevcut sağlayıcı (Google) ile oturum açması ve ardından eski AuthCredential (Facebook erişim jetonu).

signInWithPopup kullanıyorsanız Aşağıdakine benzer bir kodla auth/account-exists-with-different-credential hata örnek:

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  FacebookAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Facebook.
  let result = await signInWithPopup(getAuth(), new FacebookAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Facebook credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Facebook credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

Yönlendirme modu

Bu hata, yönlendirme modunda benzer bir şekilde ele alınır. Beklemedeki hesabın kimlik bilgisi sayfa yönlendirmeleri arasında önbelleğe alınmalıdır (örneğin, oturum depolaması kullanılarak).

Ayrıca, şu adımları uygulayarak Firebase ile bir Facebook hesabı kullanarak da kimlik doğrulaması yapabilirsiniz: Facebook Giriş JavaScript SDK'sı ile oturum açma akışı:

  1. Şurayı takip ederek Facebook Girişi'ni uygulamanıza entegre edin: geliştirici dokümanlarına göz atın. Facebook Girişi'ni Facebook uygulama kimliğinizle yapılandırdığınızdan emin olun:
    <script src="//connect.facebook.net/en_US/sdk.js"></script>
    <script>
      FB.init({
        /**********************************************************************
         * TODO(Developer): Change the value below with your Facebook app ID. *
         **********************************************************************/
        appId: '<YOUR_FACEBOOK_APP_ID>',
        status: true,
        xfbml: true,
        version: 'v2.6',
      });
    </script>
  2. Ayrıca, Facebook kimlik doğrulama durumuna bir dinleyici ayarladık:
    FB.Event.subscribe('auth.authResponseChange', checkLoginState);
  3. Facebook Girişi'ni entegre ettikten sonra web sayfalarınıza Facebook'a Giriş düğmesi ekleyin:
    <fb:login-button
      data-auto-logout-link="true"
      scope="public_profile,email"
      size="large"
    ></fb:login-button>
  4. Facebook kimlik doğrulama durumu geri aramasında, Facebook'un kimlik doğrulama yanıtındaki kimlik doğrulama jetonunu Firebase kimlik bilgisi ve oturum açma Firebase ile değiştirin:
    WebWeb
    import { getAuth, onAuthStateChanged, signInWithCredential, signOut, FacebookAuthProvider } from "firebase/auth";
    const auth = getAuth();
    
    function checkLoginState(response) {
      if (response.authResponse) {
        // User is signed-in Facebook.
        const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
          unsubscribe();
          // Check if we are already signed-in Firebase with the correct user.
          if (!isUserEqual(response.authResponse, firebaseUser)) {
            // Build Firebase credential with the Facebook auth token.
            const credential = FacebookAuthProvider.credential(
                response.authResponse.accessToken);
    
            // Sign in with the credential from the Facebook user.
            signInWithCredential(auth, credential)
              .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);
                // ...
              });
          } else {
            // User is already signed-in Firebase with the correct user.
          }
        });
      } else {
        // User is signed-out of Facebook.
        signOut(auth);
      }
    }
    function checkLoginState(response) {
      if (response.authResponse) {
        // User is signed-in Facebook.
        var unsubscribe = firebase.auth().onAuthStateChanged((firebaseUser) => {
          unsubscribe();
          // Check if we are already signed-in Firebase with the correct user.
          if (!isUserEqual(response.authResponse, firebaseUser)) {
            // Build Firebase credential with the Facebook auth token.
            var credential = firebase.auth.FacebookAuthProvider.credential(
                response.authResponse.accessToken);
    
            // Sign in with the credential from the Facebook user.
            firebase.auth().signInWithCredential(credential)
              .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;
                // ...
              });
          } else {
            // User is already signed-in Firebase with the correct user.
          }
        });
      } else {
        // User is signed-out of Facebook.
        firebase.auth().signOut();
      }
    }
    Ayrıca, hataları yakalayıp işleyebilirsiniz. Hata kodlarının listesi için Kimlik Doğrulama Referans Belgeleri'ne göz atın.
  5. Ayrıca, gerekli olmayan yeniden kimlik doğrulama işlemlerini önlemek için Facebook kullanıcısının Firebase'de oturum açmış olup olmadığını kontrol etmeniz gerekir:
    WebWeb
    import { FacebookAuthProvider } from "firebase/auth";
    
    function isUserEqual(facebookAuthResponse, firebaseUser) {
      if (firebaseUser) {
        const providerData = firebaseUser.providerData;
        for (let i = 0; i < providerData.length; i++) {
          if (providerData[i].providerId === FacebookAuthProvider.PROVIDER_ID &&
              providerData[i].uid === facebookAuthResponse.userID) {
            // We don't need to re-auth the Firebase connection.
            return true;
          }
        }
      }
      return false;
    }
    function isUserEqual(facebookAuthResponse, firebaseUser) {
      if (firebaseUser) {
        var providerData = firebaseUser.providerData;
        for (var i = 0; i < providerData.length; i++) {
          if (providerData[i].providerId === firebase.auth.FacebookAuthProvider.PROVIDER_ID &&
              providerData[i].uid === facebookAuthResponse.userID) {
            // We don't need to re-auth the Firebase connection.
            return true;
          }
        }
      }
      return false;
    }

Node.js uygulamasında Firebase ile kimlik doğrulamak için:

  1. Kullanıcının Facebook Hesabı ile oturum açın ve kullanıcının Facebook'u alın erişim jetonu. Örneğin, aşağıdaki adreste açıklandığı gibi bir tarayıcıda kullanıcının oturum açın Oturum açma bölümüne gidin, ancak erişim jetonunu Node.js'nize gönderin. uygulamaya koymanız gerekebilir.
  2. Kullanıcının Facebook erişim jetonunu aldıktan sonra, bu jetonu kullanarak bir Kimlik bilgisi nesnesi ve ardından kimlik bilgisiyle kullanıcının oturumunu açın:
    WebWeb
    import { getAuth, signInWithCredential, FacebookAuthProvider } from "firebase/auth";
    
    // Sign in with the credential from the Facebook user.
    const auth = getAuth();
    signInWithCredential(auth, credential)
      .then((result) => {
        // Signed in 
        const credential = FacebookAuthProvider.credentialFromResult(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);
        // ...
      });
    // Sign in with the credential from the Facebook user.
    firebase.auth().signInWithCredential(credential)
      .then((result) => {
        // Signed in       
        var credential = result.credential;
        // ...
      })
      .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;
        // ...
      });

Chrome uzantılarında Firebase ile kimlik doğrulama

Bir Chrome uzantı uygulaması oluşturuyorsanız daha fazla bilgi için Ekran dışı dokümanlar rehberi.

Firebase, proje oluşturulurken projeniz için benzersiz bir alt alan sağlar: https://my-app-12345.firebaseapp.com

Bu, OAuth'ta oturum açmak için yönlendirme mekanizması olarak da kullanılır. Bu alan adının desteklenen tüm OAuth sağlayıcıları için izin verilir. Ancak bu, kullanıcıların alan adında bir alan adıyla oturum açın: https://my-app-12345.firebaseapp.com adresine gidin.

Alt alan adınızın gösterilmesini önlemek için Firebase Hosting ile özel bir alan oluşturabilirsiniz:

  1. Şuradaki 1 ila 3. adımları uygulayın: Hosting için alanınızı ayarlayın. Doğrulama işlemi sırasında Hosting, özel alanınız için bir SSL sertifikası sağlar.
  2. Özel alan adınızı Firebase konsolu: auth.custom.domain.com.
  3. Facebook geliştirici konsolunda veya OAuth kurulum sayfasında yönlendirme sayfasının URL'sini beyaz listeye ekleyin. Bu URL'ye özel alanınızdan erişebilirsiniz: https://auth.custom.domain.com/__/auth/handler
  4. JavaScript kitaplığını başlattığınızda özel alan adınızı authDomain alanı:
    var config = {
      apiKey: '...',
      // Changed from 'PROJECT_ID.firebaseapp.com'.
      authDomain: 'auth.custom.domain.com',
      databaseURL: 'https://PROJECT_ID.firebaseio.com',
      projectId: 'PROJECT_ID',
      storageBucket: 'PROJECT_ID.firebasestorage.app',
      messagingSenderId: 'SENDER_ID'
    };
    firebase.initializeApp(config);

Sonraki adımlar

Kullanıcı ilk kez oturum açtığında yeni bir kullanıcı hesabı oluşturulur ve bilgileri (kullanıcı adı ve şifre, telefon numarası) Numara veya kimlik doğrulama sağlayıcı bilgileri (oturum açan kullanıcı). Bu yeni Firebase projenizin bir parçası olarak saklanır ve aşağıdaki verileri tanımlamak için kullanılabilir: nasıl oturum açarsa açsın, projenizdeki tüm uygulamalarda kullanılır.

  • Uygulamalarınızda, kullanıcınızın kimlik doğrulama durumunu öğrenmenin önerilen yolu Auth nesnesine bir gözlemci ayarlayın. Ardından, kullanıcının User nesnesindeki temel profil bilgilerini içerir. Görüntüleyin Kullanıcıları Yönetme

  • Firebase Realtime Database ve Cloud Storage içinde Güvenlik Kuralları'nı kullanarak şunları yapabilirsiniz: auth değişkeninden, oturum açmış kullanıcının benzersiz kullanıcı kimliğini alabilirsiniz. ve kullanıcının hangi verilere erişebileceğini kontrol etmek için kullanılır.

Kullanıcıların çoklu kimlik doğrulama kullanarak uygulamanızda oturum açmasına izin verebilirsiniz yetkilendirme sağlayıcısının kimlik bilgilerini hesaba katılmaz.

Bir kullanıcının oturumunu kapatmak için numaralı telefonu arayın signOut:

WebWeb
import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});