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

JavaScript'te Twitter Kullanarak Kimlik Doğrulama

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 projeye Firebase ekleyin .
  2. In Firebase konsoluna , Auth bölümünü açın.
  3. Yöntem sekmesinde İşaret Üzerine, Heyecan sağlayıcı sağlar.
  4. Sağlayıcı yapılandırmasına o sağlayıcının Geliştirici konsolundan API anahtarı ve API sırrı ekleyin:
    1. Uygulamanızı kaydedin Twitter'da bir geliştirici uygulama olarak ve uygulamanızın OAuth API anahtarı ve API sırrı olsun.
    2. Emin olun sizin Firebase OAuth yönlendirme URI (örn my-app-12345.firebaseapp.com/__/auth/handler ) senin üzerinde uygulamanın ayarlar sayfasında da Yetkilendirme geri arama URL olarak ayarlanır Heyecan uygulamasının yapılandırma .
  5. Kaydet seçeneğini 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 sürümü 9

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

    Web sürümü 8

    var provider = new firebase.auth.TwitterAuthProvider();
  2. İ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();
  3. İ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({
      'lang': 'es'
    });

    Web sürümü 8

    provider.setCustomParameters({
      'lang': 'es'
    });
    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.
  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 pop-up penceresi ile oturum için çağrı signInWithPopup :

      Web sürümü 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.email;
          // The AuthCredential type that was used.
          const credential = TwitterAuthProvider.credentialFromError(error);
          // ...
        });

      Web sürümü 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 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 Heyecan sağlayıcının OAuth jetonu alabilirsiniz getRedirectResult varsa sayfa yüklemeleri:

      Web sürümü 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.email;
          // The AuthCredential type that was used.
          const credential = TwitterAuthProvider.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 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 listesi için bir göz Auth Referans Dokümanlar .

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. Takip ederek uygulamasına Heyecan kimlik entegre geliştirici belgelerine . 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. : Twitter ile başarıyla oturum kullanıcı, bir Firebase kimlik için belirteç OAuth erişimini ve OAuth sırrı alışverişinde sonra
    var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
    
  4. Firebase kimlik bilgilerini kullanarak Firebase ile kimlik doğrulaması yapın:

    Web sürümü 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.email;
        // The AuthCredential type that was used.
        const credential = FacebookAuthProvider.credentialFromError(error);
        // ...
      });

    Web sürümü 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 eklemeniz gerekir:

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