Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기

JavaScript를 사용하여 여러 인증 공급자를 계정에 연결

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

인증 공급자 자격 증명을 기존 사용자 계정에 연결하여 사용자가 여러 인증 공급자를 사용하여 앱에 로그인하도록 허용할 수 있습니다. 사용자는 로그인에 사용한 인증 제공업체에 관계없이 동일한 Firebase 사용자 ID로 식별할 수 있습니다. 예를 들어 비밀번호로 로그인한 사용자는 Google 계정을 연결하고 나중에 두 가지 방법 중 하나로 로그인할 수 있습니다. 또는 익명의 사용자가 Facebook 계정을 연결한 다음 나중에 Facebook에 로그인하여 앱을 계속 사용할 수 있습니다.

시작하기 전에

앱에 둘 이상의 인증 공급자(익명 인증 포함)에 대한 지원을 추가합니다.

Google 또는 Facebook과 같은 인증 공급자의 자격 증명을 기존 사용자 계정에 연결하려면:

  1. 인증 공급자 또는 방법을 사용하여 사용자를 로그인합니다.
  2. 사용자 계정에 연결하려는 공급자에 해당하는 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();

    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. 연결하려는 제공업체에 로그인하라는 메시지를 사용자에게 표시합니다. 팝업 창을 열거나 공급자의 로그인 페이지로 리디렉션하여 사용자에게 로그인하라는 메시지를 표시할 수 있습니다. 리디렉션 방법은 모바일 장치에서 선호됩니다.
    • 팝업 창으로 로그인하려면 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.
        // ...
      });
    • 공급자의 로그인 페이지로 리디렉션하여 로그인하려면 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(/* ... */);
      사용자가 로그인하면 페이지로 다시 리디렉션됩니다. 그런 다음 페이지가 로드될 때 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.
        // ...
      });

      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.
        // ...
      });
    사용자가 성공적으로 로그인되면 공급자의 사용자 계정이 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);
    });

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

기존 사용자 계정에 이메일 주소 및 비밀번호 자격 증명을 추가하려면:

  1. 인증 공급자 또는 방법을 사용하여 사용자를 로그인합니다.
  2. 사용자에게 이메일 주소와 새 비밀번호를 묻습니다.
  3. 이메일 주소와 비밀번호로 AuthCredential 객체를 생성합니다.

    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. 로그인한 사용자의 linkWithCredential 메서드에 AuthCredential 객체를 전달합니다.

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

    자격 증명이 이미 다른 사용자 계정에 연결된 경우 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
  // ...
});

Web version 8

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