콘솔로 이동

자바스크립트에서 계정에 여러 인증 제공업체 연결하기

인증 제공업체의 사용자 인증 정보를 기존 사용자 계정에 연결하면 사용자가 여러 인증 제공업체를 통해 앱에 로그인할 수 있습니다. 사용자가 로그인할 때 어떤 인증 제공업체를 사용하든 동일한 Firebase 사용자 ID로 본인 확인이 가능합니다. 예를 들어 비밀번호로 로그인한 사용자가 Google 계정을 연결하면 추후에 2가지 방법 중 어느 방법으로나 로그인할 수 있습니다. 또는 익명 사용자가 Facebook 계정을 연결하면 나중에 Facebook으로 로그인해서 앱을 계속 사용할 수 있습니다.

시작하기 전에

앱에 두 가지 이상의 인증 제공업체(익명 인증 포함)에 대한 지원을 추가하세요.

사용자 계정에 제휴 인증 제공업체의 인증 정보 연결하기

기존 사용자 계정에 Google 또는 Facebook과 같은 인증 제공업체의 인증 정보를 연결하는 방법은 다음과 같습니다.

  1. 인증 제공업체 또는 인증 방법을 사용해 사용자를 로그인 처리합니다.
  2. 사용자의 계정에 연결할 제공업체에 해당하는 AuthProvider 개체를 가져옵니다. 예:
    var provider = new firebase.auth.GoogleAuthProvider();
    var provider = new firebase.auth.FacebookAuthProvider();
    var provider = new firebase.auth.TwitterAuthProvider();
    var provider = new firebase.auth.GithubAuthProvider();
    
  3. 연결하려는 제공업체의 계정으로 로그인하라는 메시지를 표시합니다. 팝업 창을 띄우거나 제공업체의 로그인 페이지로 리디렉션하여 사용자에게 로그인을 요청할 수 있습니다. 휴대기기의 경우 리디렉션을 사용하는 것이 바람직합니다.
    • 팝업 창으로 로그인하려면 linkWithPopup을 호출합니다.
      auth.currentUser.linkWithPopup(provider).then(function(result) {
        // Accounts successfully linked.
        var credential = result.credential;
        var user = result.user;
        // ...
      }).catch(function(error) {
        // Handle Errors here.
        // ...
      });
      
    • 제공업체의 로그인 페이지로 리디렉션하여 로그인하려면 linkWithRedirect를 호출합니다.
      auth.currentUser.linkWithRedirect(provider);
      
      사용자는 로그인한 후 내 페이지로 다시 리디렉션됩니다. 그러면 페이지가 로드될 때 getRedirectResult를 호출하여 로그인 결과를 검색할 수 있습니다.
      firebase.auth().getRedirectResult().then(function(result) {
        if (result.credential) {
          // Accounts successfully linked.
          var credential = result.credential;
          var user = result.user;
          // ...
        }
      }).catch(function(error) {
        // Handle Errors here.
        // ...
      });
      
    사용자가 정상적으로 로그인하면 제공업체의 사용자 계정이 Firebase 프로젝트의 사용자 계정에 연결됩니다.

    인증 정보가 다른 사용자 계정에 이미 연결되어 있으면 계정 연결에 실패합니다. 이 경우에는 앱에 맞게 중복 계정과 관련 데이터를 병합하는 과정을 처리해야 합니다.

    // Get reference to the currently signed-in user
    var prevUser = auth.currentUser;
    // Sign in user with another account
    auth.signInWithCredential(credential).then(function(user) {
      console.log("Sign In Success", user);
      var currentUser = user;
      // Merge prevUser and currentUser data stored in Firebase.
      // Note: How you handle this is specific to your application
    
      // After data is migrated delete the duplicate user
      return user.delete().then(function() {
        // Link the OAuth Credential to original account
        return prevUser.linkWithCredential(credential);
      }).then(function() {
        // Sign in with the newly linked credential
        return auth.signInWithCredential(credential);
      });
    }).catch(function(error) {
      console.log("Sign In Error", error);
    });
    

사용자 계정에 이메일 주소 및 비밀번호 인증 정보 연결

기존 사용자 계정에 이메일 주소 및 비밀번호 인증 정보를 추가하는 방법은 다음과 같습니다.

  1. 인증 제공업체 또는 인증 방법을 사용해 사용자를 로그인 처리합니다.
  2. 사용자에게 이메일 주소와 새 비밀번호를 묻습니다.
  3. 이메일 주소와 비밀번호로 AuthCredential 개체를 만듭니다.
    var credential = firebase.auth.EmailAuthProvider.credential(email, password);
    
  4. 다음과 같이 AuthCredential 개체를 로그인한 사용자의 linkWithCredential 메소드에 전달합니다.

    
    firebase.auth().currentUser.linkAndRetrieveDataWithCredential(credential).then(function(usercred) {
      var user = usercred.user;
      console.log("Account linking success", user);
    }, function(error) {
      console.log("Account linking error", error);
    });
    

    인증 정보가 다른 사용자 계정에 이미 연결되어 있다면 linkWithCredential 호출이 실패합니다. 이 경우에는 앱에 맞게 중복 계정과 관련 데이터를 병합하는 과정을 처리해야 합니다.

    // Get reference to the currently signed-in user
    var prevUser = auth.currentUser;
    // Sign in user with another account
    auth.signInWithCredential(credential).then(function(user) {
      console.log("Sign In Success", user);
      var currentUser = user;
      // Merge prevUser and currentUser data stored in Firebase.
      // Note: How you handle this is specific to your application
    
      // After data is migrated delete the duplicate user
      return user.delete().then(function() {
        // Link the OAuth Credential to original account
        return prevUser.linkWithCredential(credential);
      }).then(function() {
        // Sign in with the newly linked credential
        return auth.signInWithCredential(credential);
      });
    }).catch(function(error) {
      console.log("Sign In Error", error);
    });
    

인증 제공업체와 사용자 계정의 연결 해제하기

특정 인증 제공업체와 계정의 연결을 해제할 수 있습니다. 그러면 사용자가 제공업체로 로그인할 수 없습니다.

인증 제공업체와 사용자 계정의 연결을 해제하려면 제공업체 ID를 unlink 메소드에 전달합니다. 사용자 계정에 연결된 인증 제공업체의 제공업체 ID는 providerData 속성에서 가져올 수 있습니다.

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