Cara login fb lewat gmail

Menangani Kesalahan akun-ada-dengan-berbeda-kredensial

Jika Anda mengaktifkan setelan Satu akun per alamat email di Firebase console , saat pengguna mencoba masuk ke penyedia (seperti Facebook) dengan email yang sudah ada untuk penyedia pengguna Firebase lain (seperti Google), kesalahannya auth/account-exists-with-different-credential dilemparkan bersama dengan objek AuthCredential (token akses Facebook). Untuk menyelesaikan proses masuk ke penyedia yang dimaksud, pengguna harus masuk terlebih dahulu ke penyedia yang ada (Google) lalu menautkan ke AuthCredential (token akses Facebook) sebelumnya.

Jika Anda menggunakan signInWithPopup , Anda dapat menangani kesalahan auth/account-exists-with-different-credential dengan kode seperti contoh berikut:

// Step 1.
// User tries to sign in to Facebook.
auth.signInWithPopup(new firebase.auth.FacebookAuthProvider()).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Facebook 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() {
          // Facebook 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 Facebook credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Facebook account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

Mode pengalihan

Kesalahan ini ditangani dengan cara yang sama dalam mode pengalihan, dengan perbedaan bahwa kredensial yang tertunda harus di-cache di antara pengalihan halaman (misalnya, menggunakan penyimpanan sesi).

Lanjutan: Menangani alur masuk secara manual

Anda juga dapat mengautentikasi dengan Firebase menggunakan akun Facebook dengan menangani alur masuk dengan Facebook Login JavaScript SDK:

1. Integrasikan Facebook Login ke dalam aplikasi Anda dengan mengikuti dokumen pengembang . Pastikan untuk mengonfigurasi Login Facebook dengan ID aplikasi Facebook Anda:

   <script src="//connect.facebook.net/en_US/sdk.js"></script>
   <script>
     FB.init({
       /**********************************************************************
        * TODO(Developer): Change the value below with your Facebook app ID. *
        **********************************************************************/
       appId      : '<YOUR_FACEBOOK_APP_ID>',
       status     : true,
       xfbml      : true,
       version    : 'v2.6'
     });
   </script>
   

2. Kami juga menyiapkan pendengar di status autentikasi Facebook:

   FB.Event.subscribe('auth.authResponseChange', checkLoginState);
   

3. Setelah Anda mengintegrasikan Facebook Login, tambahkan tombol Facebook Login di halaman web Anda:

   <fb:login-button data-auto-logout-link="true" scope="public_profile,email" size="large"></fb:login-button>
   

4. Dalam panggilan balik status autentikasi Facebook, tukarkan token autentikasi dari respons autentikasi Facebook dengan kredensial Firebase dan Firebase masuk:

   Web version 9

   import { getAuth, onAuthStateChanged, signInWithCredential, signOut, FacebookAuthProvider } from "firebase/auth";
   const auth = getAuth();
   
   function checkLoginState(response) {
     if (response.authResponse) {
       // User is signed-in Facebook.
       const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
         unsubscribe();
         // Check if we are already signed-in Firebase with the correct user.
         if (!isUserEqual(response.authResponse, firebaseUser)) {
           // Build Firebase credential with the Facebook auth token.
           const credential = FacebookAuthProvider.credential(
               response.authResponse.accessToken);
   
           // Sign in with the credential from the Facebook user.
           signInWithCredential(auth, credential)
             .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);
               // ...
             });
         } else {
           // User is already signed-in Firebase with the correct user.
         }
       });
     } else {
       // User is signed-out of Facebook.
       signOut(auth);
     }
   }

   Web version 8

   function checkLoginState(response) {
     if (response.authResponse) {
       // User is signed-in Facebook.
       var unsubscribe = firebase.auth().onAuthStateChanged((firebaseUser) => {
         unsubscribe();
         // Check if we are already signed-in Firebase with the correct user.
         if (!isUserEqual(response.authResponse, firebaseUser)) {
           // Build Firebase credential with the Facebook auth token.
           var credential = firebase.auth.FacebookAuthProvider.credential(
               response.authResponse.accessToken);
   
           // Sign in with the credential from the Facebook user.
           firebase.auth().signInWithCredential(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;
               // ...
             });
         } else {
           // User is already signed-in Firebase with the correct user.
         }
       });
     } else {
       // User is signed-out of Facebook.
       firebase.auth().signOut();
     }
   }

   Ini juga tempat Anda dapat menangkap dan menangani kesalahan. Untuk daftar kode kesalahan, lihat Dokumen Referensi Auth .
5. Anda juga harus memeriksa bahwa pengguna Facebook belum masuk ke Firebase untuk menghindari autentikasi ulang yang tidak diperlukan:

   Web version 9

   import { FacebookAuthProvider } from "firebase/auth";
   
   function isUserEqual(facebookAuthResponse, firebaseUser) {
     if (firebaseUser) {
       const providerData = firebaseUser.providerData;
       for (let i = 0; i < providerData.length; i++) {
         if (providerData[i].providerId === FacebookAuthProvider.PROVIDER_ID &&
             providerData[i].uid === facebookAuthResponse.userID) {
           // We don't need to re-auth the Firebase connection.
           return true;
         }
       }
     }
     return false;
   }

   Web version 8

   function isUserEqual(facebookAuthResponse, firebaseUser) {
     if (firebaseUser) {
       var providerData = firebaseUser.providerData;
       for (var i = 0; i < providerData.length; i++) {
         if (providerData[i].providerId === firebase.auth.FacebookAuthProvider.PROVIDER_ID &&
             providerData[i].uid === facebookAuthResponse.userID) {
           // We don't need to re-auth the Firebase connection.
           return true;
         }
       }
     }
     return false;
   }

Lanjutan: Mengautentikasi dengan Firebase di Node.js

Untuk mengautentikasi dengan Firebase di aplikasi Node.js:

1. Masuk pengguna dengan Akun Facebook mereka dan dapatkan token akses Facebook pengguna. Misalnya, login pengguna di browser seperti yang dijelaskan di bagian Menangani alur login secara manual , tetapi kirim token akses ke aplikasi Node.js Anda alih-alih menggunakannya di aplikasi klien.
2. Setelah Anda mendapatkan token akses Facebook pengguna, gunakan itu untuk membuat objek Kredensial, lalu login pengguna dengan kredensial:

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

Menyesuaikan domain pengalihan untuk masuk ke Facebook

Pada pembuatan proyek, Firebase akan menyediakan subdomain unik untuk proyek Anda: https://my-app-12345.firebaseapp.com .

Ini juga akan digunakan sebagai mekanisme pengalihan untuk masuk OAuth. Domain tersebut harus diizinkan untuk semua penyedia OAuth yang didukung. Namun, ini berarti bahwa pengguna dapat melihat domain tersebut saat masuk ke Facebook sebelum mengalihkan kembali ke aplikasi: Lanjutkan ke: https://my-app-12345.firebaseapp.com .

Agar subdomain tidak ditampilkan, Anda dapat menyiapkan domain khusus dengan Firebase Hosting:

1. Ikuti langkah 1 sampai 3 di Menyiapkan domain Anda untuk Hosting . Saat Anda memverifikasi kepemilikan domain, Hosting menyediakan sertifikat SSL untuk domain khusus Anda.
2. Tambahkan domain khusus Anda ke daftar domain resmi di Firebase console : auth.custom.domain.com .
3. Di konsol pengembang Facebook atau halaman penyiapan OAuth, daftar putih URL halaman pengalihan, yang akan dapat diakses di domain khusus Anda: https://auth.custom.domain.com/__/auth/handler .
4. Saat Anda menginisialisasi pustaka JavaScript, tentukan domain khusus Anda dengan bidang authDomain : l10n

   var config = {
     apiKey: '...',
     // Changed from 'my-app-12345.firebaseapp.com'.
     authDomain: 'auth.custom.domain.com',
     databaseURL: 'https://my-app-12345.firebaseio.com',
     projectId: 'my-app-12345',
     storageBucket: 'my-app-12345.appspot.com',
     messagingSenderId: '1234567890'
   };
   firebase.initializeApp(config);
   

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