Buka konsol

Menautkan Beberapa Penyedia Autentikasi ke Akun Menggunakan JavaScript

Anda dapat mengizinkan pengguna untuk login ke aplikasi Anda menggunakan beberapa penyedia autentikasi, dengan menautkan kredensial penyedia autentikasi ke akun pengguna yang ada. Pengguna bisa diidentifikasi dengan ID pengguna Firebase yang sama, apa pun penyedia autentikasi yang mereka gunakan untuk login. Misalnya, pengguna yang login dengan sandi bisa menautkan akun Google dan login dengan salah satu metode tersebut di lain waktu. Atau, seorang pengguna anonim bisa menautkan akun Facebook, kemudian login dengan Facebook untuk melanjutkan penggunaan aplikasi Anda.

Sebelum Anda memulai

Tambahkan dukungan untuk dua atau beberapa penyedia autentikasi (mungkin juga termasuk autentikasi anonim) ke aplikasi Anda.

Menautkan kredensial penyedia autentikasi tergabung ke akun pengguna

Untuk menautkan kredensial dari penyedia autentikasi, seperti Google atau Facebook, ke akun pengguna yang ada:

  1. Membuat pengguna login menggunakan penyedia atau metode autentikasi apa pun.
  2. Dapatkan objek AuthProvider yang sesuai dengan penyedia yang ingin Anda tautkan dengan akun pengguna. Contoh:
    var provider = new firebase.auth.GoogleAuthProvider();
    var provider = new firebase.auth.FacebookAuthProvider();
    var provider = new firebase.auth.TwitterAuthProvider();
    var provider = new firebase.auth.GithubAuthProvider();
    
  3. Mintalah pengguna untuk login dengan penyedia yang ingin Anda tautkan. Anda dapat meminta pengguna untuk login, baik dengan membuka jendela pop-up atau dengan mengalihkannya ke halaman login penyedia. Untuk perangkat seluler, sebaiknya gunakan metode pengalihan.
    • Untuk login dengan jendela pop-up, panggil linkWithPopup:
      auth.currentUser.linkWithPopup(provider).then(function(result) {
        // Accounts successfully linked.
        var credential = result.credential;
        var user = result.user;
        // ...
      }).catch(function(error) {
        // Handle Errors here.
        // ...
      });
      
    • Untuk login dengan mengalihkan pengguna ke halaman login penyedia, panggil linkWithRedirect:
      auth.currentUser.linkWithRedirect(provider);
      
      Setelah login, pengguna akan diarahkan kembali ke halaman Anda. Kemudian, Anda dapat mengambil hasil login dengan memanggil getRedirectResult saat halaman dimuat.
      firebase.auth().getRedirectResult().then(function(result) {
        if (result.credential) {
          // Accounts successfully linked.
          var credential = result.credential;
          var user = result.user;
          // ...
        }
      }).catch(function(error) {
        // Handle Errors here.
        // ...
      });
      
    Jika pengguna berhasil login, akun pengguna dengan penyedia tersebut akan ditautkan dengan akun pengguna di project Firebase Anda.

    Penautan akun akan gagal jika kredensial sudah ditautkan ke akun pengguna lain. Dalam situasi ini, Anda harus menangani penggabungan akun dan data terkait yang sesuai untuk aplikasi Anda:

    // Get reference to the currently signed-in user
    var prevUser = auth.currentUser;
    // Sign in user with another account
    auth.signInWithCredential(credential).then(function(user) {
      console.log("Sign In Success", user);
      var currentUser = user;
      // Merge prevUser and currentUser data stored in Firebase.
      // Note: How you handle this is specific to your application
    
      // After data is migrated delete the duplicate user
      return user.delete().then(function() {
        // Link the OAuth Credential to original account
        return prevUser.linkWithCredential(credential);
      }).then(function() {
        // Sign in with the newly linked credential
        return auth.signInWithCredential(credential);
      });
    }).catch(function(error) {
      console.log("Sign In Error", error);
    });
    
  4. Menautkan kredensial alamat email dan sandi ke akun pengguna

    Untuk menambahkan kredensial alamat email dan sandi ke akun pengguna yang ada:

    1. Membuat pengguna login menggunakan penyedia atau metode autentikasi apa pun.
    2. Mintalah pengguna mengisi alamat email dan sandi baru.
    3. Buat objek AuthCredential dengan alamat email dan sandi tersebut:
      var credential = firebase.auth.EmailAuthProvider.credential(email, password);
      
    4. Teruskan objek AuthCredential ke metode linkWithCredential pengguna yang login:

      
      firebase.auth().currentUser.linkWithCredential(credential).then(function(usercred) {
        var user = usercred.user;
        console.log("Account linking success", user);
      }, function(error) {
        console.log("Account linking error", error);
      });
      

      Panggilan ke linkWithCredential akan gagal jika kredensial sudah ditautkan ke akun pengguna lain. Dalam situasi ini, Anda harus menangani penggabungan akun dan data terkait yang sesuai untuk aplikasi Anda:

      // Get reference to the currently signed-in user
      var prevUser = auth.currentUser;
      // Sign in user with another account
      auth.signInWithCredential(credential).then(function(user) {
        console.log("Sign In Success", user);
        var currentUser = user;
        // Merge prevUser and currentUser data stored in Firebase.
        // Note: How you handle this is specific to your application
      
        // After data is migrated delete the duplicate user
        return user.delete().then(function() {
          // Link the OAuth Credential to original account
          return prevUser.linkWithCredential(credential);
        }).then(function() {
          // Sign in with the newly linked credential
          return auth.signInWithCredential(credential);
        });
      }).catch(function(error) {
        console.log("Sign In Error", error);
      });
      

    Membatalkan tautan penyedia autentikasi dari akun pengguna

    Anda dapat membatalkan tautan penyedia autentikasi dari akun, sehingga pengguna tidak dapat login lagi dengan penyedia tersebut.

    Untuk membatalkan tautan penyedia autentikasi dari akun pengguna, teruskan ID penyedia ke metode unlink. Anda dapat memperoleh ID penyedia autentikasi yang tertaut dengan pengguna dari properti providerData.

    user.unlink(providerId).then(function() {
      // Auth provider unlinked from account
    }).catch(function(error) {
      // An error happened
    });