Эта страница переведена с помощью Cloud Translation API.

Свяжите несколько поставщиков аутентификации с учетной записью с помощью JavaScript

Важно : существует известная проблема , препятствующая корректной работе linkWithCredentials() в некоторых проектах. Информация об обходном пути и статусе исправления представлена в отчёте о проблеме.

Вы можете разрешить пользователям входить в ваше приложение с использованием нескольких поставщиков аутентификации, привязав учётные данные поставщика аутентификации к существующей учётной записи. Пользователи идентифицируются по одному и тому же идентификатору пользователя Firebase независимо от поставщика аутентификации, который они использовали для входа. Например, пользователь, вошедший с паролем, может привязать учётную запись Google и в дальнейшем использовать любой из этих методов. Или же анонимный пользователь может привязать учётную запись Facebook, а затем войти через Facebook, чтобы продолжить использовать ваше приложение.

Прежде чем начать

Добавьте в свое приложение поддержку двух или более поставщиков аутентификации (возможно, включая анонимную аутентификацию).

Свяжите учетные данные поставщика федеративной аутентификации с учетной записью пользователя

Чтобы связать учетные данные поставщика аутентификации, например Google или Facebook, с существующей учетной записью пользователя:

Выполните вход пользователя с использованием любого провайдера или метода аутентификации.

Получите объект AuthProvider , соответствующий провайдеру, которого вы хотите связать с учётной записью пользователя. Примеры:

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

Предложите пользователю войти в систему провайдера, с которым вы хотите установить связь. Вы можете предложить пользователю войти, открыв всплывающее окно или перенаправив его на страницу входа провайдера. Метод перенаправления предпочтительнее на мобильных устройствах.

Чтобы войти с помощью всплывающего окна, вызовите 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

Чтобы войти, перейдя на страницу входа провайдера, вызовите linkWithRedirect : Следуйте рекомендациям по использованию `linkWithRedirect`.

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

После входа пользователь перенаправляется обратно на вашу страницу. Затем вы можете получить результат входа, вызвав getRedirectResult при загрузке страницы:

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

Если пользователь успешно вошел в систему, его учетная запись у провайдера будет связана с учетной записью пользователя в вашем проекте Firebase.

Привязка учётных записей не будет выполнена, если учётные данные уже привязаны к другой учётной записи пользователя. В этой ситуации вам необходимо выполнить объединение учётных записей и связанных с ними данных в соответствии с требованиями вашего приложения:

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

Привязать адрес электронной почты и пароль к учетной записи пользователя

Чтобы добавить адрес электронной почты и пароль к существующей учетной записи пользователя:

Выполните вход пользователя с использованием любого провайдера или метода аутентификации.
Запросите у пользователя адрес электронной почты и новый пароль.

Создайте объект AuthCredential с адресом электронной почты и паролем:

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

Передайте объект AuthCredential методу 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

Вызов linkWithCredential завершится ошибкой, если учётные данные уже связаны с другой учётной записью пользователя. В этой ситуации вам необходимо выполнить объединение учётных записей и связанных с ними данных в соответствии с требованиями вашего приложения (см. пример выше).

Отключить поставщика аутентификации от учетной записи пользователя

Вы можете отключить провайдера аутентификации от учетной записи, и пользователь больше не сможет войти в систему с помощью этого провайдера.

Чтобы отвязать провайдера аутентификации от учётной записи пользователя, передайте его идентификатор методу unlink . Идентификаторы провайдеров аутентификации, связанных с пользователем, можно получить из свойства 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

Поиск неисправностей

Если при попытке связать несколько учетных записей у вас возникли ошибки, см. документацию по подтвержденным адресам электронной почты .