JavaScript'te Twitter Kullanarak Kimlik Doğrulama

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Uygulamanıza Twitter kimlik doğrulamasını entegre ederek, kullanıcılarınızın Twitter hesaplarını kullanarak Firebase ile kimlik doğrulaması yapmasına izin verebilirsiniz. Twitter kimlik doğrulamasını, oturum açma akışını gerçekleştirmek için Firebase SDK'sını kullanarak veya Twitter OAuth akışını manuel olarak gerçekleştirerek ve elde edilen erişim jetonunu ve sırrını Firebase'e ileterek entegre edebilirsiniz.

Sen başlamadan önce

  1. JavaScript projenize Firebase ekleyin .
  2. Firebase konsolunda , Yetkilendirme bölümünü açın.
  3. Oturum açma yöntemi sekmesinde Twitter sağlayıcısını etkinleştirin.
  4. Bu sağlayıcının geliştirici konsolundaki API anahtarını ve API sırrını sağlayıcı yapılandırmasına ekleyin:
    1. Uygulamanızı Twitter'da geliştirici uygulaması olarak kaydedin ve uygulamanızın OAuth API anahtarını ve API sırrını alın.
    2. Firebase OAuth yönlendirme URI'nizin (ör my-app-12345.firebaseapp.com/__/auth/handler ), Twitter uygulamanızın yapılandırma sayfasında uygulamanızın ayarlar sayfasında Yetkilendirme geri arama URL'niz olarak ayarlandığından emin olun.
  5. Kaydet'i tıklayın .

Firebase SDK ile oturum açma akışını yönetin

Bir web uygulaması oluşturuyorsanız, kullanıcılarınızın Twitter hesaplarını kullanarak Firebase ile kimliklerini doğrulamanın en kolay yolu, oturum açma akışını Firebase JavaScript SDK'sı 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 işlemeniz gerekir.)

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

  1. Twitter sağlayıcı nesnesinin bir örneğini oluşturun:

    Web version 9

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

    Web version 8

    var provider = new firebase.auth.TwitterAuthProvider();
  2. İsteğe bağlı : İlgili özel OAuth parametrelerini açıkça iletmeden sağlayıcının OAuth akışını 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 version 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 version 8

    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  3. İ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 version 9

    provider.setCustomParameters({
      'lang': 'es'
    });

    Web version 8

    provider.setCustomParameters({
      'lang': 'es'
    });
    Ayrılmış gerekli OAuth parametrelerine izin verilmez ve yoksayılır. Daha fazla ayrıntı için kimlik doğrulama sağlayıcı referansına bakın.
  4. Twitter 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 Twitter hesaplarıyla oturum açmalarını isteyebilirsiniz. Yönlendirme yöntemi mobil cihazlarda tercih edilmektedir.
    • Bir açılır pencereyle oturum açmak için signInWithPopup arayın:

      Web version 9

      import { getAuth, signInWithPopup, TwitterAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
          // You can use these server side with your app's credentials to access the Twitter API.
          const credential = TwitterAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          const secret = credential.secret;
      
          // The signed-in user info.
          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.customData.email;
          // The AuthCredential type that was used.
          const credential = TwitterAuthProvider.credentialFromError(error);
          // ...
        });

      Web version 8

      firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
          // You can use these server side with your app's credentials to access the Twitter API.
          var token = credential.accessToken;
          var secret = credential.secret;
      
          // 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;
          // ...
        });
      Ayrıca, Twitter API'lerini kullanarak ek veri almak için kullanılabilecek Twitter 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 bir listesi için Auth Reference Docs'a bakın.

    • Oturum açma sayfasına yeniden yönlendirerek oturum açmak için signInWithRedirect arayın:

      Web version 9

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

      Web version 8

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

      Web version 9

      import { getAuth, getRedirectResult, TwitterAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
          // You can use these server side with your app's credentials to access the Twitter API.
          const credential = TwitterAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          const secret = credential.secret;
          // ...
      
          // The signed-in user info.
          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.customData.email;
          // The AuthCredential type that was used.
          const credential = TwitterAuthProvider.credentialFromError(error);
          // ...
        });

      Web version 8

      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
            // You can use these server side with your app's credentials to access the Twitter API.
            var token = credential.accessToken;
            var secret = credential.secret;
            // ...
          }
      
          // 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ı aynı zamanda hataları yakalayabileceğiniz ve işleyebileceğiniz yerdir. Hata kodlarının bir listesi için Auth Reference Docs'a bakın.

Oturum açma akışını manuel olarak yönetin

Ayrıca, Twitter OAuth uç noktalarını arayarak oturum açma akışını yöneterek bir Twitter hesabı kullanarak Firebase ile kimlik doğrulaması yapabilirsiniz:

  1. Geliştiricinin belgelerini izleyerek Twitter kimlik doğrulamasını uygulamanıza entegre edin. Twitter oturum açma akışının sonunda bir OAuth erişim jetonu ve bir OAuth sırrı alacaksınız.
  2. Bir Node.js uygulamasında oturum açmanız gerekiyorsa, OAuth erişim belirtecini ve OAuth sırrını Node.js uygulamasına gönderin.
  3. Bir kullanıcı Twitter'da başarıyla oturum açtıktan sonra, OAuth erişim belirtecini ve OAuth sırrını bir Firebase kimlik bilgisi ile değiştirin:
    var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
    
  4. Firebase kimlik bilgilerini kullanarak Firebase ile kimlik doğrulaması yapın:

    Web version 9

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

    Web version 8

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

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 Firebase konsolunda açın.
  2. Kimlik Doğrulama bölümünde, Oturum açma yöntemi sayfasını açın.
  3. Yetkili Etki Alanları listesine aşağıdakine benzer bir URI ekleyin:
    chrome-extension://CHROME_EXTENSION_ID

Chrome uzantıları HTTP yönlendirmelerini kullanamadığından, Chrome uzantılarında yalnızca açılır pencere işlemleri ( signInWithPopup , linkWithPopup ve reauthenticateWithPopup ) 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. 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 gerçekleştiremeyen hizmet çalışanları biçimindeki arka plan komut dosyalarına izin verir.

Chrome uzantınızın manifest 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 oturum açtığı kullanıcı adı ve parolası, telefon numarası veya yetkilendirme sağlayıcı bilgileri gibi kimlik bilgileriyle ilişkilendirilir. 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ızda, kullanıcınızın auth durumunu öğrenmenin önerilen yolu, Auth nesnesinde bir gözlemci ayarlamaktır. Ardından, User nesnesinden kullanıcının temel profil bilgilerini alabilirsiniz. Kullanıcıları Yönetme konusuna bakın.

  • Firebase Gerçek Zamanlı Veritabanınız 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.

Kimlik doğrulama sağlayıcısı kimlik bilgilerini mevcut bir kullanıcı hesabına bağlayarak, kullanıcıların birden çok 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 version 9

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

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

Web version 8

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