Google'ı JavaScript ile Kullanarak Kimlik Doğrulama

Kullanıcılarınızın Google Hesaplarını kullanarak Firebase ile kimlik doğrulaması yapmasına izin verebilirsiniz. Google oturum açma akışını gerçekleştirmek için Firebase SDK'sını kullanabilir veya oturum açma akışını Google ile Oturum Aç kitaplığını kullanarak manuel olarak gerçekleştirebilir ve elde edilen kimlik belirtecini Firebase'e iletebilirsiniz.

Sen başlamadan önce

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

Oturum açma akışını Firebase SDK ile 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 gerçekleştirmektir. (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 yapmanız 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 version 9

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

   Web version 8

   var provider = new firebase.auth.GoogleAuthProvider();
   google-signin.js

2. İsteğe bağlı : Kimlik doğrulama sağlayıcısından talep etmek istediğiniz ek OAuth 2.0 kapsamlarını belirtin. Kapsam eklemek için addScope . Örneğin:

   Web version 9

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

   Web version 8

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

   Kimlik doğrulama sağlayıcı belgelerine bakın.
3. İsteğe bağlı : Sağlayıcının OAuth akışını, ilgili özel OAuth parametrelerini açıkça geçirmeden 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();
   auth_set_language_code.js

   Web version 8

   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ı : 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ılmış sağlayıcıda setCustomParameters çağırın. Örneğin:

   Web version 9

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

   Web version 8

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

   Ayrılmış gerekli OAuth parametrelerine izin verilmez ve dikkate alınmaz. Daha fazla ayrıntı için kimlik doğrulama sağlayıcısı referansına bakın.
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. Mobil cihazlarda yönlendirme yöntemi tercih edilmektedir.
   • Bir açılır pencereyle oturum açmak için signInWithPopup :

     Web version 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;
         // 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 version 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;
         // 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 kullanılabilen Google sağlayıcısının OAuth jetonunu alabileceğinizi unutmayın.

     Burası aynı zamanda hataları yakalayıp işleyebileceğiniz yerdir. Hata kodlarının bir listesi için Kimlik Doğrulama Referans Dokümanlarına bakın.

   • Oturum açma sayfasına yönlendirerek oturum açmak için signInWithRedirect arayın : "signInWithRedirect" kullanırken en iyi uygulamaları izleyin.

     Web version 9

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

     Web version 8

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

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

     Web version 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;
         // 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 version 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;
         // 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

     Burası aynı zamanda hataları yakalayıp işleyebileceğiniz yerdir. Hata kodlarının bir listesi için Kimlik Doğrulama Referans Dokümanlarına bakın.

// Step 1.
// User tries to sign in to Google.
auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Google credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // Google account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to Google credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Google account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

Bir Chrome uzantısında Firebase ile kimlik doğrulaması yapın

Bir Chrome uzantı 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ğıdaki gibi bir URI ekleyin:

   chrome-extension://CHROME_EXTENSION_ID

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

Chrome uzantınızın bildirim 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 kullanıcının oturum açtığı kimlik bilgilerine (yani, kullanıcı adı ve parolası, telefon numarası veya kimlik doğrulama sağlayıcı bilgileri) bağlanır. Bu yeni hesap, Firebase projenizin bir parçası olarak saklanır ve kullanıcının nasıl oturum açtığına bakılmaksızın projenizdeki her uygulamada bir kullanıcıyı tanımlamak için kullanılabilir.

• Uygulamalarınızda, kullanıcınızın kimlik doğrulama durumunu öğrenmenin önerilen yolu, Auth nesnesine bir gözlemci ayarlamaktır. Ardından, kullanıcının temel profil bilgilerini User nesnesinden alabilirsiniz. Bkz. Kullanıcıları Yönetin .

• Firebase Gerçek Zamanlı Veritabanı 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ı kimlik bilgilerini mevcut bir kullanıcı hesabına bağlayarak, kullanıcıların birden fazla 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:

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

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

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