此页面由 Cloud Translation API 翻译。

使用 JavaScript 将多个身份验证提供程序链接到一个帐户

您可以通过将身份验证提供程序凭据链接到现有用户帐户来允许用户使用多个身份验证提供程序登录您的应用程序。用户可以通过相同的 Firebase 用户 ID 来识别，而不管他们用于登录的身份验证提供商如何。例如，使用密码登录的用户可以关联一个 Google 帐户，并在未来使用任何一种方法登录。或者，匿名用户可以链接 Facebook 帐户，然后再登录 Facebook 以继续使用您的应用程序。

在你开始之前

为您的应用添加对两个或更多身份验证提供程序（可能包括匿名身份验证）的支持。

将联合身份验证提供程序凭据链接到用户帐户

要将来自身份验证提供商（例如 Google 或 Facebook）的凭据链接到现有用户帐户：

使用任何身份验证提供程序或方法登录用户。

获取与您要链接到用户帐户的提供程序相对应的AuthProvider对象。例子：

Web version 9

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 version 8

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

提示用户使用您要链接的提供商登录。您可以通过打开弹出窗口或重定向到提供商的登录页面来提示您的用户登录。重定向方法在移动设备上是首选。

要使用弹出窗口登录，请调用linkWithPopup ：

Web version 9

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 version 8

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

要通过重定向到提供商的登录页面进行登录，请调用linkWithRedirect ：

Web version 9

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 version 8

auth.currentUser.linkWithRedirect(provider)
  .then(/* ... */)
  .catch(/* ... */);link-multiple-accounts.js

用户登录后，他们将被重定向回您的页面。然后，您可以在页面加载时通过调用getRedirectResult来检索登录结果：

Web version 9

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 version 8

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

如果用户成功登录，则该用户在提供商的帐户将链接到您的 Firebase 项目中的用户帐户。

如果凭据已链接到另一个用户帐户，则帐户链接将失败。在这种情况下，您必须根据应用程序的需要处理合并帐户和关联数据：

Web version 9

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 version 8

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

将电子邮件地址和密码凭据链接到用户帐户

要将电子邮件地址和密码凭据添加到现有用户帐户：

使用任何身份验证提供程序或方法登录用户。
提示用户输入电子邮件地址和新密码。

使用电子邮件地址和密码创建一个AuthCredential对象：

Web version 9

import { EmailAuthProvider } from "firebase/auth";

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

Web version 8

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

将AuthCredential对象传递给登录用户的linkWithCredential方法：

Web version 9

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 version 8

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

如果凭据已链接到另一个用户帐户，则对linkWithCredential的调用将失败。在这种情况下，您必须处理适合您的应用程序的帐户和关联数据的合并（参见上面的示例）。

取消身份验证提供程序与用户帐户的关联

您可以取消身份验证提供程序与帐户的链接，以便用户无法再使用该提供程序登录。

要从用户帐户取消链接身份验证提供程序，请将提供程序 ID 传递给unlink方法。您可以从providerData属性获取链接到用户的身份验证提供程序的提供程序 ID。

Web version 9

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 version 8

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