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

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

시작하기 전에

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

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

  1. 인증 제공업체 또는 인증 방법을 사용해 사용자를 로그인 처리합니다.
  2. 사용자 계정에 연결할 제공업체에 해당하는 AuthProvider 객체를 가져옵니다. 예를 들면 다음과 같습니다.
    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을 호출합니다.
      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)
        .then(/* ... */)
        .catch(/* ... */);
      사용자는 로그인한 후 앱 페이지로 다시 리디렉션됩니다. 그러면 페이지가 로드될 때 getRedirectResult를 호출하여 로그인 결과를 검색할 수 있습니다.
      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 프로젝트의 사용자 계정에 연결됩니다.

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

    // 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(function(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(function(linkResult) {
          // Sign in with the newly linked credential
          return auth.signInWithCredential(linkResult.credential);
        })
        .then(function(signInResult) {
          // Save the merged data to the new user
          repo.set(signInResult.user, mergedData);
        });
    }).catch(function(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 객체를 만듭니다.
    var credential = firebase.auth.EmailAuthProvider.credential(email, password);
  4. 다음과 같이 AuthCredential 객체를 로그인한 사용자의 linkWithCredential 메서드에 전달합니다.

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

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

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

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

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