Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Facebook Giriş'i uygulamanıza entegre ederek kullanıcılarınızın Facebook hesaplarını kullanarak Firebase ile kimlik doğrulamalarını sağlayabilirsiniz. Oturum açma akışını yürütmek için Firebase SDK'sını kullanarak veya Facebook Giriş akışını manuel olarak gerçekleştirip elde edilen erişim jetonunu Firebase'e ileterek Facebook Girişi'ni entegre edebilirsiniz.

Başlamadan önce

Firebase'i JavaScript projenize ekleyin.
Geliştiriciler için Facebook sitesinde, uygulamanız için Uygulama Kimliği ve Uygulama Gizli Anahtarı'nı edinin.
Facebook'a giriş yapmayı etkinleştirin:
1. Firebase konsolunda Auth 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ği ile Uygulama Sırrı'nı belirtin.
3. Sonra OAuth yönlendirme URI'nizin (ör. my-app-12345.firebaseapp.com/__/auth/handler), Ürün Ayarları > Facebook Girişi yapılandırmasındaki Geliştiriciler için Facebook sitesinde, Facebook uygulamanızın ayarlar sayfasında OAuth yönlendirme URI'lerinizden biri olarak listelendiğinden emin olun.

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

Bir web uygulaması oluşturuyorsanız, Facebook hesaplarını kullanarak Firebase ile kullanıcılarınızın kimliklerini doğrulamanın en kolay yolu, oturum açma akışını Firebase JavaScript SDK ile yönetmektir. (Node.js veya tarayıcı dışı başka bir ortamda bir kullanıcının kimliğini doğrulamak istiyorsanız oturum açma akışını manuel olarak yürütmeniz gerekir.)

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

Facebook sağlayıcı nesnesinin bir örneğini oluşturun:
Web modüler API

Ağaçta sallanabilir modüler Web API'si hakkında daha fazla bilgi edinin ve ad alanına sahip API'den yükseltin.
```
import { FacebookAuthProvider } from "firebase/auth";

const provider = new FacebookAuthProvider();auth_facebook_provider_create.js
```
Web ad alanı API'si
```
var provider = new firebase.auth.FacebookAuthProvider();facebook.js
```
İ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 yöntemini çağırın. Örnek:
Web modüler API

Ağaçta sallanabilir modüler Web API'si hakkında daha fazla bilgi edinin ve ad alanına sahip API'den yükseltin.
```
provider.addScope('user_birthday');auth_facebook_provider_scopes.js
```
Web ad alanı API'si
```
provider.addScope('user_birthday');facebook.js
```
Kimlik doğrulama sağlayıcı belgelerine bakın.
İ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 göre yerelleştirmek için OAuth akışını başlatmadan önce Auth örneğindeki dil kodunu güncelleyin. Örnek:
Web modüler API

Ağaçta sallanabilir modüler Web API'si hakkında daha fazla bilgi edinin ve ad alanına sahip API'den yükseltin.
```
import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();auth_set_language_code.js
```
Web ad alanı API'si
```
firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js
```
İsteğe bağlı: OAuth isteğiyle birlikte göndermek istediğiniz ek özel OAuth sağlayıcı parametrelerini belirtin. Özel parametre eklemek için, başlatılan sağlayıcıda setCustomParameters yöntemini, OAuth sağlayıcı belgelerinde belirtildiği gibi anahtarı ve ilgili değeri içeren bir nesne ile çağırın. Örnek:
Web modüler API

Ağaçta sallanabilir modüler Web API'si hakkında daha fazla bilgi edinin ve ad alanına sahip API'den yükseltin.
```
provider.setCustomParameters({
  'display': 'popup'
});auth_facebook_provider_params.js
```
Web ad alanı API'si
```
provider.setCustomParameters({
  'display': 'popup'
});facebook.js
```
Ayrılmış zorunlu OAuth parametrelerine izin verilmez ve bu parametreler yoksayılır. Daha fazla bilgi için kimlik doğrulama sağlayıcı referansı bölümüne bakın.

Facebook sağlayıcı nesnesini kullanarak Firebase ile kimlik doğrulayın. Bir pop-up 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 edilir.

Pop-up pencereyle oturum açmak için signInWithPopup numaralı telefonu arayın:

Web modüler 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);

    // ...
  });auth_facebook_signin_popup.js

Web ad alanı API'si

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;

    // ...
  });facebook.js

Ayrıca, Facebook API'lerini kullanarak ek verileri 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 numaralı telefonu arayın: "signInWithRedirect" özelliğini kullanırken en iyi uygulamaları izleyin.

Web modüler API

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

const auth = getAuth();
signInWithRedirect(auth, provider);auth_signin_redirect.js

Web ad alanı API'si

firebase.auth().signInWithRedirect(provider);index.js

Ardından, sayfanız yüklendiğinde getRedirectResult yöntemini çağırarak Facebook sağlayıcının OAuth jetonunu da alabilirsiniz:

Web modüler 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);
    // ...
  });auth_facebook_signin_redirect_result.js

Web ad alanı API'si

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;
    // ...
  });facebook.js

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

farklı kimlik bilgileriyle var olan hesap hatalarını ele alma

Firebase konsolunda E-posta adresi başına bir hesap ayarını etkinleştirdiyseniz bir kullanıcı, bir sağlayıcıda (ör. Facebook) başka bir Firebase kullanıcısının sağlayıcısı (Google gibi) için mevcut bir e-posta adresiyle oturum açmaya çalıştığında auth/account-exists-with-different-credential hatası ile birlikte bir AuthCredential nesne (Facebook erişim jetonu) gönderilir. İstenilen sağlayıcıda oturum açma işlemini tamamlamak için kullanıcının önce mevcut sağlayıcıda (Google) oturum açması ve ardından eski AuthCredential (Facebook erişim jetonu) ile bağlantı vermesi gerekir.

signInWithPopup kullanırsanız aşağıdaki örnektekine benzer bir kodla auth/account-exists-with-different-credential hatayı giderebilirsiniz:

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. Aradaki fark, bekleyen kimlik bilgilerinin sayfa yönlendirmeleri arasında önbelleğe alınması (örneğin, oturum depolaması kullanılarak) arasındaki farktır.

Ayrıca, oturum açma akışını Facebook Giriş JavaScript SDK'sı ile yürüterek bir Facebook hesabı kullanarak Firebase ile kimlik doğrulaması yapabilirsiniz:

Geliştirici belgelerini izleyerek Facebook Girişi'ni uygulamanıza entegre edin. 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>

Ayrıca Facebook kimlik doğrulama durumuna bir dinleyici ayarladık:
```
FB.Event.subscribe('auth.authResponseChange', checkLoginState);
```

Facebook Girişi'ni entegre ettikten sonra web sayfalarınıza Facebook'a Giriş Yap düğmesi ekleyin:

<fb:login-button
  data-auto-logout-link="true"
  scope="public_profile,email"
  size="large"
></fb:login-button>

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:

Web modüler API

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);
  }
}auth_facebook_callback.js

Web ad alanı API'si

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();
  }
}facebook.js

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

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:

Web modüler API

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;
}auth_facebook_checksameuser.js

Web ad alanı API'si

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;
}facebook.js

Gelişmiş: Node.js'de Firebase ile kimlik doğrulama

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

Kullanıcının Facebook Hesabı ile oturum açın ve kullanıcının Facebook erişim jetonunu alın. Örneğin, Oturum açma akışını manuel olarak yönetme bölümünde açıklandığı gibi, bir tarayıcıda kullanıcının oturumunu açın ancak erişim jetonunu istemci uygulamasında kullanmak yerine Node.js uygulamanıza gönderin.

Kullanıcının Facebook erişim jetonunu aldıktan sonra bu jetonu kullanarak Kimlik Bilgisi nesnesi oluşturun ve kimlik bilgisiyle kullanıcının oturumunu açın:

Web modüler API

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);
    // ...
  });auth_facebook_signin_credential.js

Web ad alanı API'si

// 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;
    // ...
  });facebook.js

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

Bir Chrome uzantı uygulaması oluşturuyorsanız Dokümanlar Dışı Dokümanlar rehberine bakın.

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 alana, desteklenen tüm OAuth sağlayıcılar için izin verilmesi gerekir. Ancak bu durumda kullanıcılar, Facebook'ta oturum açarken tekrar uygulamaya yönlendirmeden önce bu alanı görebilir: https://my-app-12345.firebaseapp.com adresine devam edin.

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

Alanınızı Hosting için ayarlama başlıklı makaledeki 1 ile 3 arasındaki adımları uygulayın. Alan sahipliğinizi doğruladığınızda, Hosting özel alanınız için bir SSL sertifikası sağlar.
Firebase konsolunda özel alanınızı yetkili alanlar listesine ekleyin: auth.custom.domain.com.
Facebook geliştirici konsolunda veya OAuth kurulum sayfasında, özel alanınızdan ulaşılabilecek yönlendirme sayfasının URL'sini beyaz listeye ekleyin: https://auth.custom.domain.com/__/auth/handler.

JavaScript kitaplığını başlattığınızda özel alan adınızı authDomain alanıyla belirtin:

var config = {
  apiKey: '...',
  // Changed from 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
firebase.initializeApp(config);

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 (kullanıcı adı ve şifre, telefon numarası veya kimlik doğrulama sağlayıcı bilgisi) 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 kullanıcıyı tanımlamak için kullanılabilir.

Uygulamalarınızda, kullanıcınızın kimlik doğrulama durumunu öğrenmek için önerilen yol, Auth nesnesinde bir gözlemci ayarlamaktır. Daha sonra, kullanıcının temel profil bilgilerini User nesnesinden alabilirsiniz. Kullanıcıları Yönetme sayfasına göz atın.
Firebase Realtime Database ve Cloud Storage Güvenlik Kurallarınızda, oturum açan kullanıcının benzersiz kullanıcı kimliğini auth değişkeninden alabilir ve kullanıcının hangi verilere erişebileceğini kontrol etmek için kullanabilirsiniz.

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

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

Web modüler API

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

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

Web ad alanı API'si

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

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

Başlamadan önce

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

Web modüler API

Web ad alanı API'si

Web modüler API

Web ad alanı API'si

Web modüler API

Web ad alanı API'si

Web modüler API

Web ad alanı API'si

Web modüler API

Web ad alanı API'si

Web modüler API

Web ad alanı API'si

Web modüler API

Web ad alanı API'si

farklı kimlik bilgileriyle var olan hesap hatalarını ele alma

Pop-up modu

Yönlendirme modu

Gelişmiş: Oturum açma akışını manuel olarak yönetme

Web modüler API

Web ad alanı API'si

Web modüler API

Web ad alanı API'si

Gelişmiş: Node.js'de Firebase ile kimlik doğrulama

Web modüler API

Web ad alanı API'si

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

Facebook ile oturum açmak için yönlendirme alan adını özelleştirme

Sonraki adımlar

Web modüler API

Web ad alanı API'si