Firebase.com에서 웹/Node.js 앱 업그레이드

이 문서에서는 Firebase.com에서 Firebase 콘솔 및 3.x SDK로 기존 웹 및 Node.js 앱을 업그레이드하는 과정을 안내합니다.

다음 3가지 단계를 따르면 됩니다.

  1. Firebase 콘솔로 프로젝트 가져오기
  2. 데이터베이스 코드 업데이트
  3. 인증 코드 업데이트

언제든지 프로젝트를 가져올 수 있으며 애플리케이션과 기존 SDK는 계속 작동합니다. 그런 다음 애플리케이션에서 새 Firebase 기능의 일부를 사용할 준비가 되면 코드를 업데이트할 수 있습니다.

Firebase 콘솔로 프로젝트 가져오기

  • Firebase 콘솔로 이동하고 '현재 Firebase.com의 프로젝트'에서 프로젝트를 찾습니다.
  • 업그레이드하려는 프로젝트에 대해 가져오기를 클릭합니다.
    • 프로젝트가 firebase.com에서 유료 요금제를 사용하는 경우 새 콘솔에서 프로젝트에 대한 결제를 설정해야 합니다. 결제 정보는 자동으로 이전되지 않습니다.
    • 결제 계정을 선택하거나 만듭니다. 가져오기를 완료하면 이 계정이 프로젝트에 대한 모든 청구를 담당합니다.
  • 즉시 자동으로 Firebase 콘솔로 실시간 데이터베이스 및 호스팅 콘텐츠를 가져옵니다.
  • 사용자 데이터는 자동으로 새 인증 백엔드로 이전됩니다. 백그라운드에서 이전되므로 사용자는 데이터가 이전되는 동안 앱을 계속 사용할 수 있습니다. 사용자 가입 및 로그인은 영향을 받지 않습니다. 시스템에서 사용자 계정을 이전하는 동안 Firebase 콘솔의 인증 탭에 스피너가 표시됩니다.
  • Firebase.com 앱의 활성 프로모션 코드가 있는 경우 문의하세요.

Firebase CLI 업그레이드

업그레이드된 프로젝트와 함께 명령줄 인터페이스를 사용하려면 3.0 이상 버전을 설치해야 합니다. 다음을 실행하여 설치할 수 있습니다.

npm install -g firebase-tools

Firebase CLI의 최신 버전을 설치하고 나면 firebase login을 실행하여 다시 인증해야 합니다. 연속 통합 서버 또는 다른 헤드리스 시스템에 대한 새 토큰을 얻으려면 firebase login:ci를 실행합니다.

마지막으로 이전한 Firebase.com 프로젝트의 각 프로젝트 디렉토리에서 firebase tools:migrate를 실행해야 합니다.

클라이언트 버전 업데이트

애플리케이션의 코드를 즉시 업데이트할 필요는 없습니다. 기존 데이터베이스 및 인증 코드는 업그레이드된 프로젝트에 대해 계속 사용할 수 있습니다. 하지만 애플리케이션에서 새 Firebase 기능의 일부를 사용할 준비가 되면 다음 단계에 따라 새 API로 데이터베이스 코드를 이전합니다.

시작하는 가장 쉬운 방법은 다음을 포함하는 스크립트를 변경하는 것입니다.

이전

<script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>
이후

<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase.js"></script>

Node.js 앱을 이전하는 경우 다음 명령어로 firebase npm 패키지의 최신 버전을 다운로드할 수 있습니다. firebase가 2.X 버전에 고정되지 않도록이 버전을 제거한 후 최신 버전을 설치합니다.

$ npm uninstall firebase --save
$ npm install firebase --save

데이터베이스 참조 가져오기

새 SDK에서는 new Firebase를 통해 데이터베이스 참조를 인스턴스화할 수 없습니다. 대신에 firebase.initializeApp()을 통해 SDK를 초기화합니다.

이전

var ref = new Firebase("https://databaseName.firebaseio.com");
이후

// See https://firebase.google.com/docs/web/setup#project_setup for how to
// auto-generate this config
var config = {
  apiKey: "apiKey",
  authDomain: "projectId.firebaseapp.com",
  databaseURL: "https://databaseName.firebaseio.com"
};

firebase.initializeApp(config);

var rootRef = firebase.database().ref();

웹 설정 페이지의 안내에 따라 위의 구성을 자동으로 생성할 수 있습니다.

no-argument getter가 이제 읽기 전용 속성이 됨

많은 no-argument getter가 읽기 전용 속성으로 변경되었습니다.

이전

// Reference
var key = ref.key();
var rootRef = ref.root();
var parentRef = ref.parent();

// Query
var queryRef = query.ref();

// DataSnapshot
ref.on("value", function(snapshot) {
  var dataRef = snapshot.ref();
  var dataKey = snapshot.key();
});
이후

// Reference
var key = ref.key;
var rootRef = ref.root;
var parentRef = ref.parent;

// Query
var queryRef = query.ref;

// DataSnapshot
ref.on("value", function(snapshot) {
  var dataRef = snapshot.ref;
  var dataKey = snapshot.key;
});

인증 코드 업데이트

이제 firebase.auth() 서비스에서 Firebase 인증 기능을 사용할 수 있고 많은 메소드는 이름이 변경되었습니다. 다음 예는 OAuth 제공업체를 사용하여 사용자를 인증하는 방법입니다.

이전

ref.authWithOAuthPopup("twitter", function(error, authData) {
  if (error) {
    // An error occurred
    console.error(error);
  } else {
    // User signed in!
    var uid = authData.uid;
  }
});
이후

var auth = firebase.auth();

var provider = new firebase.auth.TwitterAuthProvider();
auth.signInWithPopup(provider).then(function(result) {
  // User signed in!
  var uid = result.user.uid;
}).catch(function(error) {
  // An error occurred
});

다음은 2.x API 및 새 API에서 맞춤 토큰 로그인이 작동하는 방식입니다.

이전

ref.authWithCustomToken(AUTH_TOKEN, function(error, authData) {
  if (error) {
    console.log("Login Failed!", error);
  } else {
    console.log("Login Succeeded!", authData);
  }
});
이후

firebase.auth().signInWithCustomToken(AUTH_TOKEN).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

서버에서 생성하는 맞춤 토큰에 새로운 형식이 사용됩니다. Node.js 및 자바용 Firebase Admin SDK를 사용하여 새 API와 호환되는 맞춤 토큰을 생성하거나 타사 JWT 라이브러리를 사용하여 맞춤 토큰을 생성할 수 있습니다.

2.x API의 헬퍼 라이브러리가 생성하는 토큰은 기본적으로 24시간 후에 만료되지만 Firebase Admin SDK가 생성하는 맞춤 토큰은 1시간 후에 만료됩니다.

사용 가능한 전체 메소드 목록은 Node.js 모두에 대한 인증 API 참조를 확인하세요.

액세스 토큰 가져오기

Firebase.com Authentication API로 제공업체의 액세스 토큰을 쉽게 사용하여 제공업체의 API를 호출하고 추가 정보를 얻을 수 있습니다. 이 액세스 토큰은 로그인 작업이 완료된 직후에 계속 사용할 수 있습니다.

이전

ref.onAuth(function(authData) {
  if (authData) {
    var accessToken = authData.providerData[authData.provider].accessToken;
  }
})
이후

var auth = firebase.auth();

var provider = new firebase.auth.GoogleAuthProvider();
auth.signInWithPopup(provider).then(function(result) {
  var accessToken = result.credential.accessToken;
});

Firebase 인증이 더 이상 액세스 토큰을 유지하지 않으므로 필요한 경우 애플리케이션에서 직접 액세스 토큰을 유지해야 합니다.

인증 상태 모니터링

인증 상태 모니터링을 위한 메소드 이름과 콜백 인수가 약간 변경되었습니다.

이전

ref.onAuth(function(authData) {
  if (authData) {
    // User signed in!
    var uid = authData.uid;
  } else {
    // User logged out
  }
});
이후

var auth = firebase.auth();

auth.onAuthStateChanged(function(user) {
  if (user) {
    // User signed in!
    var uid = user.uid;
  } else {
    // User logged out
  }
});

기존 로그인 이전

사용자가 이전 SDK로 앱에 로그인한 경우 새 SDK로 로그인 상태를 유지하려면 약간의 코드를 작성해야 합니다. 그렇지 않으면 사용자가 다시 로그인해야 합니다. 이를 수행하는 오픈소스 샘플 코드는 Firebase Auth Migration Helpers GitHub 저장소를 참조하세요.

새 비밀번호 재설정 템플릿 업데이트

앱에서 사용자가 이메일 및 비밀번호 인증으로 로그인하도록 허용하는 경우 사용자에게 비밀번호를 재설정하는 옵션도 제공하는 것이 보통입니다.

새 SDK로 업그레이드하고 나면 사용자 비밀번호 재설정 이메일은 Firebase 콘솔에 지정된 새 템플릿을 사용합니다. 앱의 필요에 맞게 템플릿을 업데이트해야 합니다.

Firebase 라이브러리 업데이트

다음 라이브러리를 사용하는 경우 최신 버전으로 업그레이드해야 합니다.

라이브러리 지원되는 버전 리소스
AngularFire 2.x.x Github
ReactFire 1.x Github
GeoFire 4.1.x GitHub

다음에 대한 의견 보내기...

도움이 필요하시나요? 지원 페이지를 방문하세요.