JavaScript ile Google'ı Kullanarak Kimlik Doğrula

Kullanıcılarınızın Google Hesaplarını kullanarak Firebase ile kimlik doğrulamalarını sağlayabilirsiniz. Google oturum açma akışını yürütmek için Firebase SDK'sını kullanabilirsiniz. Google ile Oturum Açma kitaplığını kullanarak oturum açma akışını manuel olarak elde edilen kimlik jetonunu Firebase'e iletmenizi sağlar.

Başlamadan önce

  1. Firebase'i JavaScript projenize ekleyin.
  2. Firebase konsolunda Google'ı oturum açma yöntemi olarak etkinleştirin:
    1. Firebase konsolunda şunu açın: Kimlik Doğrulama bölümüne gidin.
    2. Oturum açma yöntemi sekmesinde, Google ile oturum açma yöntemini etkinleştirin ve Kaydet'i tıklayın.

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

Bir web uygulaması oluşturuyorsanız kullanıcılarınızın kimliğini doğrulamanın en kolay yolu oturum açma akışını yönetebilmek için Google Hesaplarını Firebase JavaScript SDK'sı. (Node.js'de bir kullanıcının kimliğini doğrulamak istiyorsanız veya tarayıcı harici başka bir ortam kullanıyorsanız oturum açma akışını manuel olarak gerçekleştirmeniz gerekir.)

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

  1. Google provider nesnesinin bir örneğini oluşturun:

    Web

    import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();
    auth_google_provider_create.js

    Web

    var provider = new firebase.auth.GoogleAuthProvider();
    google-signin.js
  2. İsteğe bağlı: Oluşturduğunuz ek OAuth 2.0 kapsamlarını belirtin kimlik doğrulama sağlayıcısından istekte bulunmak istiyorum. Kapsam eklemek için addScope Örneğin:

    Web

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    auth_google_provider_scopes.js

    Web

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    google-signin.js
    Kimlik doğrulama sağlayıcıya bakın dokümanlarına göz atın.
  3. İsteğe bağlı: Sağlayıcının OAuth akışını kullanıcının tercih ettiği şekilde yerelleştirmek için dil ayarını, ilgili özel OAuth parametrelerini açıkça iletmeden kullanılan bir dil kullanıyorsanız kodunu ekleyin. Örneğin:

    Web

    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

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
    index.js
  4. İsteğe bağlı: Ek özel OAuth sağlayıcı parametreleri belirtin onay kutusunu işaretleyin. Özel parametre eklemek için şu çağrıyı yapın: Başlatılan sağlayıcıda, anahtarı içeren bir nesneyle birlikte setCustomParameters OAuth sağlayıcı dokümanlarında ve ilgili değerde belirtildiği şekilde olmalıdır. Örneğin:

    Web

    provider.setCustomParameters({
  'login_hint': 'user@example.com'
});
    auth_google_provider_params.js

    Web

    provider.setCustomParameters({
  'login_hint': 'user@example.com'
});
    google-signin.js
    Ayrılmış zorunlu OAuth parametrelerine izin verilmez ve bu parametreler yoksayılır. Bkz. kimlik doğrulama sağlayıcı referansı bölümünde daha fazla bilgi edinebilirsiniz.
  5. Google sağlayıcı nesnesini kullanarak Firebase ile kimlik doğrulayın. Şunları yapabilirsiniz: kullanıcılarınızdan Google Hesapları ile oturum açmalarını istemek için oturum açma sayfasına yönlendirilirsiniz. Yönlendirme yöntemi mobil cihazlarda tercih edilir.
    • Pop-up pencereyle oturum açmak için signInWithPopup numaralı telefonu arayın:

      Web

      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;
    // 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 = GoogleAuthProvider.credentialFromError(error);
    // ...
  });
      auth_google_signin_popup.js

      Web

      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;
    // 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;
    // ...
  });
      google-signin.js
      Ayrıca, Google API'lerini kullanarak ek veriler getirmek için kullanabileceğiniz Google 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 çağırın: "signInWithRedirect" özelliğini kullanırken en iyi uygulamaları izleyin.

      Web

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

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

      Web

      firebase.auth().signInWithRedirect(provider);
      index.js
      Ardından, şu numarayı arayarak Google sağlayıcının OAuth jetonunu da alabilirsiniz: Sayfanız yüklendiğinde getRedirectResult:

      Web

      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;
    // 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 = GoogleAuthProvider.credentialFromError(error);
    // ...
  });
      auth_google_signin_redirect_result.js

      Web

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

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

Bir Chrome uzantı uygulaması oluşturuyorsanız daha fazla bilgi için Ekran dışı dokümanlar rehberi.

Sonraki adımlar

Kullanıcı ilk kez oturum açtığında yeni bir kullanıcı hesabı oluşturulur ve bilgileri (kullanıcı adı ve şifre, telefon numarası) Numara veya kimlik doğrulama sağlayıcı bilgileri (oturum açan kullanıcı). Bu yeni Firebase projenizin bir parçası olarak saklanır ve aşağıdaki verileri tanımlamak için kullanılabilir: nasıl oturum açarsa açsın, projenizdeki tüm uygulamalarda kullanılır.

  • Uygulamalarınızda, kullanıcınızın kimlik doğrulama durumunu öğrenmenin önerilen yolu Auth nesnesine bir gözlemci ayarlayın. Ardından, kullanıcının User nesnesindeki temel profil bilgilerini içerir. Görüntüleyin Kullanıcıları Yönetme

  • Firebase Realtime Database ve Cloud Storage içinde Güvenlik Kuralları'nı kullanarak şunları yapabilirsiniz: auth değişkeninden, oturum açmış kullanıcının benzersiz kullanıcı kimliğini alabilirsiniz. ve kullanıcının hangi verilere erişebileceğini kontrol etmek için kullanılır.

Kullanıcıların çoklu kimlik doğrulama kullanarak uygulamanızda oturum açmasına izin verebilirsiniz yetkilendirme sağlayıcısının kimlik bilgilerini hesaba katılmaz.

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

Web

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

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