Facebook Girişini JavaScript ile Kullanarak Kimlik Doğrulama

Uygulamanıza Facebook Girişi'ni entegre ederek kullanıcılarınızın Facebook hesaplarını kullanarak Firebase ile kimlik doğrulaması yapmalarını sağlayabilirsiniz. Oturum açma akışını gerçekleştirmek için Firebase SDK'yı kullanarak veya Facebook Oturum Açma akışını manuel olarak gerçekleştirip elde edilen erişim belirtecini Firebase'e ileterek Facebook Oturum Açma'yı entegre edebilirsiniz.

Sen başlamadan önce

  1. Firebase'i JavaScript projenize ekleyin .
  2. Facebook for Developers sitesinden uygulamanızın Uygulama Kimliğini ve Uygulama Sırrını alın.
  3. Facebook Girişini Etkinleştir:
    1. Firebase konsolunda Kimlik Doğrulama bölümünü açın.
    2. Oturum açma yöntemi sekmesinde, Facebook oturum açma yöntemini etkinleştirin ve Facebook'tan aldığınız Uygulama Kimliğini ve Uygulama Sırrını belirtin.
    3. Ardından, OAuth yönlendirme URI'nizin (örn. my-app-12345.firebaseapp.com/__/auth/handler ), Ürün'deki Facebook for Developers sitesindeki Facebook uygulamanızın ayarlar sayfasında OAuth yönlendirme URI'larınızdan biri olarak listelendiğinden emin olun. Ayarlar > Facebook Girişi 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 Firebase ile kimliklerini doğrulamanın en kolay yolu, oturum açma akışını Firebase JavaScript SDK ile yönetmektir. (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 gerçekleştirmelisiniz.)

Firebase JavaScript SDK'sıyla oturum açma akışını yönetmek için şu adımları izleyin:

  1. 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();
  2. İsteğe bağlı : Kimlik doğrulama sağlayıcısından istemek istediğiniz ek OAuth 2.0 kapsamlarını belirtin. Kapsam eklemek için addScope çağırın. Örneğin:

    Web modular API

    provider.addScope('user_birthday');

    Web namespaced API

    provider.addScope('user_birthday');
    Kimlik doğrulama sağlayıcısının belgelerine bakın.
  3. İsteğe bağlı : Sağlayıcının OAuth akışını, ilgili özel OAuth parametrelerini açıkça iletmeden 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();
  4. İ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ılan sağlayıcıda setCustomParameters çağırın. Örneğin:

    Web modular API

    provider.setCustomParameters({
      'display': 'popup'
    });

    Web namespaced API

    provider.setCustomParameters({
      'display': 'popup'
    });
    Ayrılmış gerekli OAuth parametrelerine izin verilmiyor ve göz ardı edilecek. Daha fazla ayrıntı için kimlik doğrulama sağlayıcısının referansına bakın.
  5. 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.
    • Açılır pencereyle oturum açmak için signInWithPopup çağırın:

      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;
      
          // ...
        });
      Ayrıca, Facebook API'lerini kullanarak ek veriler almak için kullanılabilecek Facebook sağlayıcısının OAuth jetonunu alabileceğinizi de unutmayın.

      Burası aynı zamanda hataları yakalayıp yönetebileceğiniz yerdir. Hata kodlarının bir listesi için Yetkilendirme Referans Dokümanlarına bakın.

    • Oturum açma sayfasına yönlendirerek oturum açmak için signInWithRedirect çağırın: 'signInWithRedirect'i kullanırken en iyi uygulamaları izleyin.

      Web modular API

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      Web namespaced API

      firebase.auth().signInWithRedirect(provider);
      Ardından, sayfanız yüklendiğinde getRedirectResult çağırarak da Facebook sağlayıcısının OAuth jetonunu alabilirsiniz:

      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;
          // ...
        });
      Burası aynı zamanda hataları yakalayıp yönetebileceğiniz yerdir. Hata kodlarının bir listesi için Yetkilendirme Referans Dokümanlarına bakın.

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

Bir Chrome uzantısı uygulaması oluşturuyorsanız Ekran Dışı Belgeler kılavuzuna bakın.

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 bilgileriyle (yani kullanıcı adı ve parolası, telefon numarası veya kimlik doğrulama sağlayıcı bilgileri) ilişkilendirilir. Bu yeni hesap, Firebase projenizin bir parçası olarak depolanı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. Daha sonra kullanıcının temel profil bilgilerini User nesnesinden alabilirsiniz. Bkz . Kullanıcıları Yönetme .

  • Firebase Gerçek Zamanlı Veritabanı ve Bulut Depolama Güvenliği Kurallarınızda , oturum açan kullanıcının benzersiz kullanıcı kimliğini auth değişkeninden alabilir ve bunu, kullanıcının hangi verilere erişebileceğini kontrol etmek için kullanabilirsiniz.

Kimlik doğrulama sağlayıcısı kimlik bilgilerini mevcut bir kullanıcı hesabına bağlayarak kullanıcıların birden fazla kimlik doğrulama sağlayıcısı kullanarak uygulamanızda oturum açmasına izin verebilirsiniz.

Bir kullanıcının oturumunu kapatmak için signOut 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.
});