Łą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:

    Web

    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

    Web

    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:

      Web

      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

      Web

      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.

      Web

      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

      Web

      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:

      Web

      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

      Web

      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:

    Web

    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

    Web

    // 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:

    Web

    import { EmailAuthProvider } from "firebase/auth";

const credential = EmailAuthProvider.credential(email, password);
    auth_make_email_credential.js

    Web

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

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

    Web

    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

    Web

    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ł zalogować się na jego konto.

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.

Web

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

Web

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