Facebook masuk atau daftar penelusuran google

Menangani Error account-exists-with-different-credential

Jika Anda mengaktifkan setelan One account per email address di Firebase console, saat pengguna mencoba login ke penyedia (seperti Facebook) dengan email yang sudah ada untuk penyedia pengguna Firebase lain (seperti Google), error auth/account-exists-with-different-credential akan dilemparkan beserta objek AuthCredential (token akses Facebook). Untuk menyelesaikan proses login ke penyedia yang dimaksud, pengguna harus login terlebih dahulu ke penyedia saat ini (Google) lalu menghubungkan akunnya ke AuthCredential sebelumnya (token akses Facebook).

Jika menggunakan signInWithPopup, Anda dapat menangani error auth/account-exists-with-different-credential dengan kode seperti pada 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

Error ini ditangani dengan cara yang mirip di mode pengalihan, tetapi perbedaannya, kredensial yang tertunda harus di-cache di antara pengalihan halaman (misalnya, menggunakan penyimpanan sesi).

Lanjutan: Menangani alur login secara manual

Anda juga dapat melakukan autentikasi dengan Firebase menggunakan akun Facebook, dengan cara menangani alur login dengan Facebook Login JavaScript SDK:

1. Integrasikan Login dengan Facebook ke dalam aplikasi Anda dengan mengikuti dokumentasi developer. Pastikan untuk mengonfigurasi Login dengan 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 pemroses di status autentikasi Facebook:

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

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

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

4. Dalam callback status autentikasi Facebook, tukar token autentikasi dari respons autentikasi Facebook dengan kredensial Firebase lalu login ke Firebase:

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

   Di sini juga Anda dapat menemukan dan menangani error. Untuk mengetahui daftar kode error, baca Dokumentasi Referensi Auth.
5. Anda juga harus memeriksa bahwa pengguna Facebook belum login 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: Autentikasi dengan Firebase di Node.js

Untuk melakukan autentikasi dengan Firebase pada aplikasi Node.js:

1. Buat pengguna login dengan Akun Facebook-nya, lalu dapatkan token akses Facebook pengguna tersebut. Misalnya, proses login pengguna di browser sebagaimana dijelaskan di bagian Menangani alur login secara manual, tetapi kirim token akses ke aplikasi Node.js, dan bukan menggunakannya dalam aplikasi klien.
2. Setelah mendapatkan token akses Facebook pengguna, gunakan token tersebut untuk mem-build objek Credential, lalu proses login pengguna dengan kredensial tersebut:

   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 login dengan Facebook

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

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

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

1. Ikuti langkah 1 sampai 3 seperti yang tertera di artikel Menyiapkan domain Anda untuk Hosting. Saat Anda memverifikasi kepemilikan domain, Hosting akan menyediakan sertifikat SSL untuk domain kustom Anda.
2. Tambahkan domain kustom ke daftar domain yang diizinkan di Firebase console: auth.custom.domain.com.
3. Pada konsol developer Facebook atau halaman penyiapan OAuth, berikan izin pada URL halaman pengalihan, yang akan dapat diakses di domain kustom Anda: https://auth.custom.domain.com/__/auth/handler.
4. Saat menginisialisasi library JavaScript, tentukan domain kustom Anda dengan kolom authDomain:

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