Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

JavaScript ile Google Oturum Açmayı Kullanarak Kimlik Doğrulama

Google Sign-In'i uygulamanıza entegre ederek, kullanıcılarınızın Google Hesaplarını kullanarak Firebase ile kimlik doğrulamasını sağlayabilirsiniz. Google Sign-In'i, oturum açma akışını gerçekleştirmek için Firebase SDK'sını kullanarak veya Google Sign-In akışını manuel olarak gerçekleştirip elde edilen kimlik jetonunu Firebase'e ileterek entegre edebilirsiniz.

Sen başlamadan önce

  1. JavaScript projeye Firebase ekleyin .
  2. Firebase konsolunda Google ile Oturum Açmayı etkinleştirin:
    1. In Firebase konsoluna , Auth bölümünü açın.
    2. Yöntem sekmede yap, Google oturum açma yöntemine etkinleştirmek ve 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 Google Hesaplarını kullanarak Firebase ile kimliklerini doğrulamanın en kolay yolu, oturum açma akışını Firebase JavaScript SDK ile halletmek. (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. Google sağlayıcı nesnesinin bir örneğini oluşturun:

    Web sürümü 9

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

    Web sürümü 8

    var provider = new firebase.auth.GoogleAuthProvider();
  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('https://www.googleapis.com/auth/contacts.readonly');

    Web sürümü 8

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    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({
      'login_hint': 'user@example.com'
    });

    Web sürümü 8

    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });
    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. Google 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 Google 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, GoogleAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // This gives you a Google Access Token. You can use it to access the Google API.
          const credential = GoogleAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          // 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 = GoogleAuthProvider.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 Google Access Token. You can use it to access the Google 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;
          // ...
        });
      Ayrıca, Google API'lerini kullanarak ek veri almak için kullanılabilecek Google 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 çağırarak Google sağlayıcının OAuth jetonu alabilirsiniz getRedirectResult varsa sayfa yüklemeleri:

      Web sürümü 9

      import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          // This gives you a Google Access Token. You can use it to access Google APIs.
          const credential = GoogleAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
      
          // 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 = GoogleAuthProvider.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 Google Access Token. You can use it to access the Google 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ı aynı zamanda 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 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.
});