O Google tem o compromisso de promover a igualdade racial para as comunidades negras. Saiba como.

Vincular vários provedores de autenticação a uma conta usando JavaScript

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Você pode permitir que os usuários façam login no seu aplicativo usando vários provedores de autenticação vinculando as credenciais do provedor de autenticação a uma conta de usuário existente. Os usuários são identificáveis ​​pelo mesmo ID de usuário do Firebase, independentemente do provedor de autenticação usado para fazer login. Por exemplo, um usuário que fez login com uma senha pode vincular uma Conta do Google e fazer login com qualquer um dos métodos no futuro. Ou, um usuário anônimo pode vincular uma conta do Facebook e, posteriormente, fazer login com o Facebook para continuar usando seu aplicativo.

Antes de você começar

Adicione suporte para dois ou mais provedores de autenticação (possivelmente incluindo autenticação anônima) ao seu aplicativo.

Para vincular credenciais de um provedor de autenticação, como Google ou Facebook, a uma conta de usuário existente:

  1. Conecte o usuário usando qualquer provedor ou método de autenticação.
  2. Obtenha o objeto AuthProvider que corresponde ao provedor que você deseja vincular à conta do usuário. Exemplos:

    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();

    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();
  3. Solicite ao usuário que faça login com o provedor que você deseja vincular. Você pode solicitar que seus usuários façam login abrindo uma janela pop-up ou redirecionando para a página de login do provedor. O método de redirecionamento é preferido em dispositivos móveis.
    • Para entrar com uma janela pop-up, chame 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.
        // ...
      });

      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.
        // ...
      });
    • Para fazer login redirecionando para a página de login do provedor, ligue para linkWithRedirect :

      Web version 9

      import { getAuth, linkWithRedirect, GoogleAuthProvider } from "firebase/auth";
      const provider = new GoogleAuthProvider();
      
      const auth = getAuth();
      linkWithRedirect(auth.currentUser, provider)
        .then(/* ... */)
        .catch(/* ... */);

      Web version 8

      auth.currentUser.linkWithRedirect(provider)
        .then(/* ... */)
        .catch(/* ... */);
      Depois que o usuário entrar, ele será redirecionado de volta à sua página. Em seguida, você pode recuperar o resultado do login chamando getRedirectResult quando sua página for carregada:

      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.
        // ...
      });

      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.
        // ...
      });
    Se o usuário fizer login com sucesso, a conta do usuário com o provedor será vinculada à conta do usuário em seu projeto do Firebase.

    A vinculação de contas falhará se as credenciais já estiverem vinculadas a outra conta de usuário. Nessa situação, você deve lidar com a mesclagem das contas e dos dados associados conforme apropriado para seu aplicativo:

    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);
    });

    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);
    });

Para adicionar credenciais de endereço de e-mail e senha a uma conta de usuário existente:

  1. Conecte o usuário usando qualquer provedor ou método de autenticação.
  2. Solicite ao usuário um endereço de e-mail e uma nova senha.
  3. Crie um objeto AuthCredential com o endereço de e-mail e a senha:

    Web version 9

    import { EmailAuthProvider } from "firebase/auth";
    
    const credential = EmailAuthProvider.credential(email, password);

    Web version 8

    var credential = firebase.auth.EmailAuthProvider.credential(email, password);
  4. Passe o objeto AuthCredential para o método linkWithCredential do usuário conectado:

    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);
      });

    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);
      });

    A chamada para linkWithCredential falhará se as credenciais já estiverem vinculadas a outra conta de usuário. Nessa situação, você deve lidar com a mesclagem de contas e dados associados conforme apropriado para seu aplicativo (veja o exemplo acima).

Você pode desvincular um provedor de autenticação de uma conta para que o usuário não possa mais fazer login com esse provedor.

Para desvincular um provedor de autenticação de uma conta de usuário, passe o ID do provedor para o método unlink . Você pode obter os IDs dos provedores de autenticação vinculados a um usuário da propriedade providerData .

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
  // ...
});

Web version 8

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