Catch up on everthing we announced at this year's Firebase Summit. Learn more

JavaScript ile Facebook Girişini Kullanarak Kimlik Doğrulama

Facebook Login'i uygulamanıza entegre ederek, kullanıcılarınızın Facebook hesaplarını kullanarak Firebase ile kimlik doğrulamasını sağlayabilirsiniz. Facebook Login'i, oturum açma akışını gerçekleştirmek için Firebase SDK'sını kullanarak veya Facebook Login akışını manuel olarak gerçekleştirerek ve elde edilen erişim jetonunu Firebase'e ileterek entegre edebilirsiniz.

Sen başlamadan önce

  1. JavaScript projeye Firebase ekleyin .
  2. On Facebook Geliştiriciler için sitede, Uygulama Kimliğini ve uygulaması için bir Uygulama Sırrı olsun.
  3. Facebook Girişini Etkinleştir:
    1. In Firebase konsoluna , Auth bölümünü açın.
    2. Yöntem sekmesinde İşaret Üzerine, Facebook oturum açma yöntemine etkinleştirip Facebook aldığım Uygulama Kimliğini ve App Sırrı belirtin.
    3. Sonra emin olun sizin OAuth yönlendirme URI (örn my-app-12345.firebaseapp.com/__/auth/handler ) üzerinde Facebook uygulamanın ayarlar sayfasında OAuth yönlendirme URI'lerinin biri olarak listelenir Geliştiriciler için Facebook Ürününde sitede Ayarlar> Facebook Giriş konfigürasyon dosyasında.

Firebase SDK ile oturum açma akışını 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, Firebase JavaScript SDK ile oturum açma akışını 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 işlemeniz gerekir.)

Firebase JavaScript SDK ile 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 sürümü 9

    import { FacebookAuthProvider } from "firebase/auth";
    
    const provider = new FacebookAuthProvider();

    Web sürümü 8

    var provider = new firebase.auth.FacebookAuthProvider();
  2. İsteğe bağlı: doğrulama sağlayıcısından talep istediğiniz ek OAuth 2.0 kapsamlarını belirtme. Bir kapsamını eklemek için, çağrı addScope . Örneğin:

    Web sürümü 9

    provider.addScope('user_birthday');

    Web sürümü 8

    provider.addScope('user_birthday');
    Bkz kimlik doğrulama sağlayıcısı belgelerine .
  3. İsteğe bağlı: açıkça alakalı bir özel OAuth parametreleri geçmeden kullanıcının tercih ettiği dile sağlayıcının OAuth akışını lokalize etmek için, OAuth akışını başlatmadan önce Auth örneğinde dil kodunu güncellemek. Örneğin:

    Web sürümü 9

    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();

    Web sürümü 8

    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ği ile göndermek istediğiniz ek özel OAuth sağlayıcısı parametrelerini belirtin. Özel bir parametre eklemek için, çağrı setCustomParameters OAuth sağlayıcısı belgeleri ve karşılık gelen değeri ile belirtilen anahtarını içeren bir nesne ile başlatılmış sağlayıcısına. Örneğin:

    Web sürümü 9

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

    Web sürümü 8

    provider.setCustomParameters({
      'display': 'popup'
    });
    Ayrılmış gerekli OAuth parametrelerine izin verilmez ve yoksayılır. Bkz kimlik doğrulama sağlayıcısı referansı Daha fazla ayrıntı için.
  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. Yönlendirme yöntemi mobil cihazlarda tercih edilmektedir.
    • Bir pop-up penceresi ile oturum için çağrı signInWithPopup :

      Web sürümü 9

      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;
      
          // ...
        })
        .catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.email;
          // The AuthCredential type that was used.
          const credential = FacebookAuthProvider.credentialFromError(error);
      
          // ...
        });

      Web sürümü 8

      firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // The signed-in user info.
          var user = result.user;
      
          // 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 veri almak için kullanılabilecek Facebook sağlayıcısının OAuth belirtecini alabileceğinizi unutmayın.

      Burası aynı zamanda hataları yakalayabileceğiniz ve işleyebileceğiniz yerdir. Hata kodlarının listesi için bir göz Auth Referans Dokümanlar .

    • Oturum açma sayfası, çağrı yönlendirme yaparak oturum açmak için signInWithRedirect :

      Web sürümü 9

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

      Web sürümü 8

      firebase.auth().signInWithRedirect(provider);
      Ardından, aynı zamanda arayarak Facebook sağlayıcının OAuth jetonu alabilirsiniz getRedirectResult varsa sayfa yüklemeleri:

      Web sürümü 9

      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;
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.email;
          // AuthCredential type that was used.
          const credential = FacebookAuthProvider.credentialFromError(error);
          // ...
        });

      Web sürümü 8

      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;
        }).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ı ayrıca hataları yakalayabileceğiniz ve işleyebileceğiniz yerdir. Hata kodlarının listesi için bir göz Auth Referans Dokümanlar .

Bir Chrome uzantısında Firebase ile kimlik doğrulaması yapın

Bir Chrome uzantısı uygulaması oluşturuyorsanız, Chrome uzantı kimliğinizi eklemelisiniz:

  1. Projenizi açın Firebase konsoluna .
  2. Kimlik Doğrulama bölümünde Oturum açma yöntemi sayfasında açın.
  3. : Yetkili Alanlar listesine aşağıdaki gibi bir URI ekle
    chrome-extension://CHROME_EXTENSION_ID

Sadece pop-up işlemleri ( signInWithPopup , linkWithPopup ve reauthenticateWithPopup Chrome uzantıları HTTP yönlendirmeleri kullanamaz gibi), Chrome uzantıları için 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 penceresi yerine bir arka plan sayfası komut dosyasından çağırmalısınız. Popup yöntemleri kullanarak uzantılarda yalnızca kullanılabilir Manifest V2 . Yeni Manifest V3 sadece hiç pop-up işlemleri gerçekleştiremiyor hizmet işçilerinin şeklinde, arka plan komut dosyaları sağlar.

Chrome uzantısının bildirim dosyası marka olarak eklemek emin https://apis.google.com URL content_security_policy AllowList.

Sonraki adımlar

Bir kullanıcı ilk kez oturum açtıktan sonra, yeni bir kullanıcı hesabı oluşturulur ve oturum açtığı kullanıcı adı ve parolası, telefon numarası veya kimlik doğrulama sağlayıcısı bilgileri gibi kimlik bilgilerine bağlanır. Bu yeni hesap, Firebase projenizin bir parçası olarak depolanır ve kullanıcının nasıl oturum açtığından bağımsız olarak projenizdeki her uygulamada bir kullanıcıyı tanımlamak için kullanılabilir.

  • Uygulamalarınızla olarak, kullanıcı yetkilendirme durumunu öğrenmek için tavsiye edilen yöntem üzerinde bir gözlemci ayarlamaktır Auth nesnesine. Daha sonra, kullanıcının temel profil bilgileri alabilirsiniz User nesnesi. Bkz Kullanıcıları Yönetme .

  • Senin Firebase Gerçek Zamanlı Veritabanı ve Bulut Depolama yılında Güvenlik Kuralları , alabilirsiniz, kullanıcının benzersiz bir kullanıcı kimliği imzalı auth değişkeni ve hangi verilerin kullanıcı teneke erişimi kontrol etmek için kullanabilirsiniz.

Kullanıcıların birden çok kimlik doğrulama sağlayıcıları kullanarak uygulamada oturum izin verebilir mevcut bir kullanıcı hesabına auth sağlayıcı kimlik bilgilerini birbirine bağlayan.

Bir kullanıcı Oturumu kapatmak için çağrı signOut :

Web sürümü 9

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

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

Web sürümü 8

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