Łączenie wielu dostawców uwierzytelniania z kontem za pomocą JavaScriptu

Możesz zezwolić użytkownikom na logowanie się w aplikacji przy użyciu wielokrotnego uwierzytelniania. przez połączenie danych logowania dostawcy uwierzytelniania z istniejącym kontem użytkownika. Użytkowników można zidentyfikować na podstawie tego samego identyfikatora użytkownika Firebase niezależnie od parametru dostawcy uwierzytelniania, którego użyli do logowania. Na przykład: użytkownik, który zalogował się hasła, możesz połączyć konto Google i zalogować się za pomocą dowolnej z tych metod w przyszłości. Anonimowy użytkownik może też połączyć konto na Facebooku, a później się zalogować z Facebookiem, aby dalej korzystać z aplikacji.

Zanim zaczniesz

Dodanie obsługi co najmniej 2 dostawców uwierzytelniania (możesz uwzględnić anonimowego uwierzytelniania).

Aby połączyć dane logowania od dostawcy uwierzytelniania takiego jak Google czy Facebook z istniejące konto użytkownika:

  1. Zaloguj użytkownika przy użyciu dowolnego dostawcy lub metody uwierzytelniania.
  2. Pobierz obiekt AuthProvider odpowiadający dostawcy które chcesz połączyć z kontem użytkownika. Przykłady:
    WebWeb
    import { GoogleAuthProvider, FacebookAuthProvider, TwitterAuthProvider, GithubAuthProvider } from "firebase/auth";

const googleProvider = new GoogleAuthProvider();
const facebookProvider = new FacebookAuthProvider();
const twitterProvider = new TwitterAuthProvider();
const githubProvider = new GithubAuthProvider();
    auth_get_providers.js
     
    var googleProvider = new firebase.auth.GoogleAuthProvider();
var facebookProvider = new firebase.auth.FacebookAuthProvider();
var twitterProvider = new firebase.auth.TwitterAuthProvider();
var githubProvider = new firebase.auth.GithubAuthProvider();
    link-multiple-accounts.js
  3. Poproś użytkownika o zalogowanie się u dostawcy, którego chcesz połączyć. Dostępne opcje poproś użytkowników o zalogowanie się przez otwarcie wyskakującego okienka lub przekierowujące na stronę logowania dostawcy. Preferowana jest metoda przekierowania na urządzeniach mobilnych.
    • Aby zalogować się za pomocą wyskakującego okienka, zadzwoń pod numer linkWithPopup:
      WebWeb
      import { getAuth, linkWithPopup, GoogleAuthProvider } from "firebase/auth";
const provider = new GoogleAuthProvider();

const auth = getAuth();
linkWithPopup(auth.currentUser, provider).then((result) => {
  // Accounts successfully linked.
  const credential = GoogleAuthProvider.credentialFromResult(result);
  const user = result.user;
  // ...
}).catch((error) => {
  // Handle Errors here.
  // ...
});
      auth_link_with_popup.js
       
      auth.currentUser.linkWithPopup(provider).then((result) => {
  // Accounts successfully linked.
  var credential = result.credential;
  var user = result.user;
  // ...
}).catch((error) => {
  // Handle Errors here.
  // ...
});
      link-multiple-accounts.js
    • Aby zalogować się, przekierowując na stronę logowania usługodawcy, wybierz linkWithRedirect: Gdy używasz atrybutu „linkWithRedirect”, postępuj zgodnie ze sprawdzonymi metodami.
      WebWeb
      import { getAuth, linkWithRedirect, GoogleAuthProvider } from "firebase/auth";
const provider = new GoogleAuthProvider();

const auth = getAuth();
linkWithRedirect(auth.currentUser, provider)
  .then(/* ... */)
  .catch(/* ... */);
      auth_link_with_redirect.js
       
      auth.currentUser.linkWithRedirect(provider)
  .then(/* ... */)
  .catch(/* ... */);
      link-multiple-accounts.js
      Po zalogowaniu się użytkownik zostaje przekierowany z powrotem na Twoją stronę. Następnie: możesz pobrać wynik logowania, dzwoniąc getRedirectResult po załadowaniu strony:
      WebWeb
      import { getRedirectResult } from "firebase/auth";
getRedirectResult(auth).then((result) => {
  const credential = GoogleAuthProvider.credentialFromResult(result);
  if (credential) {
    // Accounts successfully linked.
    const user = result.user;
    // ...
  }
}).catch((error) => {
  // Handle Errors here.
  // ...
});
      auth_get_redirect_result.js
       
      auth.getRedirectResult().then((result) => {
  if (result.credential) {
    // Accounts successfully linked.
    var credential = result.credential;
    var user = result.user;
    // ...
  }
}).catch((error) => {
  // Handle Errors here.
  // ...
});
      link-multiple-accounts.js
    . Jeśli użytkownik zalogował się, jego konto u dostawcy jest połączony z kontem użytkownika w Twoim projekcie Firebase.

    Łączenie kont nie powiedzie się, jeśli dane logowania są już połączone z innym kontem użytkownika. W takiej sytuacji musisz użyć Połączenie kont i powiązanych z nimi danych odpowiednio do potrzeb aplikacji:

    WebWeb
    import { getAuth, signInWithCredential, linkWithCredential, OAuthProvider } from "firebase/auth";

// The implementation of how you store your user data depends on your application
const repo = new MyUserDataRepo();

// Get reference to the currently signed-in user
const auth = getAuth();
const prevUser = auth.currentUser;

// Get the data which you will want to merge. This should be done now
// while the app is still signed in as this user.
const prevUserData = repo.get(prevUser);

// Delete the user's data now, we will restore it if the merge fails
repo.delete(prevUser);

// Sign in user with the account you want to link to
signInWithCredential(auth, newCredential).then((result) => {
  console.log("Sign In Success", result);
  const currentUser = result.user;
  const currentUserData = repo.get(currentUser);

  // Merge prevUser and currentUser data stored in Firebase.
  // Note: How you handle this is specific to your application
  const mergedData = repo.merge(prevUserData, currentUserData);

  const credential = OAuthProvider.credentialFromResult(result);
  return linkWithCredential(prevUser, credential)
    .then((linkResult) => {
      // Sign in with the newly linked credential
      const linkCredential = OAuthProvider.credentialFromResult(linkResult);
      return signInWithCredential(auth, linkCredential);
    })
    .then((signInResult) => {
      // Save the merged data to the new user
      repo.set(signInResult.user, mergedData);
    });
}).catch((error) => {
  // If there are errors we want to undo the data merge/deletion
  console.log("Sign In Error", error);
  repo.set(prevUser, prevUserData);
});
    auth_merge_accounts.js
     
    // The implementation of how you store your user data depends on your application
var repo = new MyUserDataRepo();

// Get reference to the currently signed-in user
var prevUser = auth.currentUser;

// Get the data which you will want to merge. This should be done now
// while the app is still signed in as this user.
var prevUserData = repo.get(prevUser);

// Delete the user's data now, we will restore it if the merge fails
repo.delete(prevUser);

// Sign in user with the account you want to link to
auth.signInWithCredential(newCredential).then((result) => {
  console.log("Sign In Success", result);
  var currentUser = result.user;
  var currentUserData = repo.get(currentUser);

  // Merge prevUser and currentUser data stored in Firebase.
  // Note: How you handle this is specific to your application
  var mergedData = repo.merge(prevUserData, currentUserData);

  return prevUser.linkWithCredential(result.credential)
    .then((linkResult) => {
      // Sign in with the newly linked credential
      return auth.signInWithCredential(linkResult.credential);
    })
    .then((signInResult) => {
      // Save the merged data to the new user
      repo.set(signInResult.user, mergedData);
    });
}).catch((error) => {
  // If there are errors we want to undo the data merge/deletion
  console.log("Sign In Error", error);
  repo.set(prevUser, prevUserData);
});
    link-multiple-accounts.js

Aby dodać adres e-mail i hasło do istniejącego użytkownika konto:

  1. Zaloguj użytkownika przy użyciu dowolnego dostawcy lub metody uwierzytelniania.
  2. Poproś użytkownika o podanie adresu e-mail i nowego hasła.
  3. Utwórz obiekt AuthCredential z adresem e-mail i hasło:
    WebWeb
    import { EmailAuthProvider } from "firebase/auth";

const credential = EmailAuthProvider.credential(email, password);
    auth_make_email_credential.js
     
    var credential = firebase.auth.EmailAuthProvider.credential(email, password);
    link-multiple-accounts.js

  4. Przekaż obiekt AuthCredential do folderu zalogowanego użytkownika Metoda linkWithCredential:

    WebWeb
    import { getAuth, linkWithCredential } from "firebase/auth";

const auth = getAuth();
linkWithCredential(auth.currentUser, credential)
  .then((usercred) => {
    const user = usercred.user;
    console.log("Account linking success", user);
  }).catch((error) => {
    console.log("Account linking error", error);
  });
    auth_simple_link.js
     
    auth.currentUser.linkWithCredential(credential)
  .then((usercred) => {
    var user = usercred.user;
    console.log("Account linking success", user);
  }).catch((error) => {
    console.log("Account linking error", error);
  });
    link-multiple-accounts.js

    Wywołanie linkWithCredential zakończy się niepowodzeniem, jeśli dane logowania są już połączone z innym kontem użytkownika. W takiej sytuacji musisz użyć Połączenie kont i powiązanych z nimi danych odpowiednio do potrzeb aplikacji (patrz przykład powyżej).

Możesz odłączyć dostawcę uwierzytelniania od konta, aby użytkownik nie mógł logować się dłużej u tego dostawcy.

Aby odłączyć dostawcę uwierzytelniania od konta użytkownika, przekaż identyfikator dostawcy do Metoda unlink. Możesz uzyskać identyfikatory dostawców uwierzytelniania połączony z użytkownikiem z usługi providerData.

WebWeb
import { getAuth, unlink } from "firebase/auth";

const auth = getAuth();
unlink(auth.currentUser, providerId).then(() => {
  // Auth provider unlinked from account
  // ...
}).catch((error) => {
  // An error happened
  // ...
});
auth_unlink_provider.js
 
user.unlink(providerId).then(() => {
  // Auth provider unlinked from account
  // ...
}).catch((error) => {
  // An error happened
  // ...
});
link-multiple-accounts.js